使用vue3实现数据大屏展示_vue3数据大屏

1、前提

有后端数据接口和数据库，并且能够使用axios访问接口获取数据

2、安装依赖包

npm i vue-router echarts axios less

vue-router，我们有多个页面进行展示数据，所以使用路由

echarts，用来进行数据展示

axios，用来发送数据请求，获取数据

3、数据库数据

这个案例使用了四个数据表进行数据展示，数据表如下图所示

hosts

gold

lengths 

watchnumpv 

 

以上四个数据表都有四个不同区域的分类

后端接口返回的数据格式为下图所示（数组包含多个对象的形式）

4、路由配置 

假设有四组数据需要用echarts进行展示，所以设置了四个路由分别进行展示

在src下新建router文件夹，router文件夹下新建index.js

路由配置（router/index.js）

import { createRouter,createWebHistory } from "vue-router";
const router=createRouter({
    history:createWebHistory(),
    routes:[
        {
            component:()=>import('../components/gold.vue'),
            name:'gold',
            path:'/gold'
        },
        {
            component:()=>import('../components/host.vue'),
            name:'host',
            path:'/host'
        },
        {
            component:()=>import('../components/length.vue'),
            name:'length',
            path:'/length'
        },
        {
            component:()=>import('../components/watchnum.vue'),
            name:'watchnum',
            path:'/watchnum'
        },
        {
            //实现路由重定向，当进入网页时，路由自动跳转到/student路由
            redirect:'/gold',
            path:'/'
        }
    ]
})
export default router

 注册路由(main.js)

import { createApp } from 'vue'
import App from './App.vue'
 
import './assets/main.css'
import router from './router'
createApp(App).use(router).mount('#app')

使用路由（app.vue）

<template>
<header class="main">
    <div><router-link to="/gold">主播获取金币TOP10</router-link></div>
    <div><router-link to="/host">主播热度TOP10</router-link></div>
    <div><router-link to="/length">主播被观看时长TOp10</router-link></div>
    <div><router-link to="/watchnum">主播被观看次数TOP10</router-link></div>
</header>
<router-view></router-view>
</template>
 
<script setup>
 
</script>
 
<style scoped lang="less">
.main{
    width: 100%;
    height: 50px;
    align-items: center;
    display: flex;
    justify-content: center;
    background-color: pink;
    div{
        padding: 0 50px;
    }
}
</style>

效果展示

5、echarts绘制数据图表

 5、1主播获取金币TOP10（饼图绘制）

假设获取数据的接口为http://localhost:8088/api/areagold/ausgoldlist

<template>
    <!-- 定义标题按钮，用来切换地区 -->
    <div class="title" @click="changeSelect">
        <!-- 给按钮配置data-index，当点击时用来区分点击的是哪个 -->
        <button data-index='ausgoldlist'>CT</button>
        <button data-index='actgoldlist'>US</button>
        <button data-index='anggoldlist'>NG</button>
    </div>
    <!-- 定义容器 -->
    <div class="big">
        <div id="main">
        </div>
    </div>
</template>
 
<script setup>
// 引入echarts，axios，onMounted
import * as echarts from 'echarts'
import axios from 'axios'
import { onMounted } from 'vue';
// 提前定义myCharts
let myChart = null
onMounted(() => {
    // 获取dom节点
    myChart = echarts.init(document.getElementById('main'))
    // 获取数据
    getdata('ausgoldlist')
})
const getdata = async(gold) => {
    // 拿到返回的数据
    let result = await axios.get(`http://localhost:8088/api/areagold/${gold}`)
    // 将数据传给函数，用来划图
    toecharts(result.data)
}
const toecharts=(result)=>{
    // 设置配置对象
    let option = {
        title: {
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        dataset: { source: result },
        series: [
            {
                name: '主播的uid',
                type: 'pie',
                radius: '50%',
                emphasis: {
                    itemStyle: {
                        itemName: 'uid',
                        value: 'gold',
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 划图
    myChart.setOption(option);
}
// 获取点击按钮
const changeSelect=(e)=>{
    let {index}=e.target.dataset
    // 将选择的参数发送给getdata，获取数据
    getdata(index)
}
</script>
 
<style scoped lang="less">
#main {
    width: 700px;
    height: 500px;
    border:blue 1px solid
}
.big{
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.title{
    margin-top: 50px;
    text-align: center;
    button{
        font-size: 40px;
    }
}
</style>

结果展示，通过点击按钮获取不同区域的数据，用于展示

 5.2主播热度TOP10（柱状图）

 假设接口地址为http://localhost:8088/api/areagold/aushostslist

代码实现

<template>
    <!-- 定义标题按钮，用来切换地区 -->
    <div class="title" @click="changeSelect">
        <!-- 给按钮配置data-index，当点击时用来区分点击的是哪个 -->
        <button data-index='aushostslist'>CT</button>
        <button data-index='acthostslist'>US</button>
        <button data-index='anghostslist'>NG</button>
    </div>
    <!-- 定义容器 -->
    <div class="big">
        <div id="hosts">
        </div>
    </div>
</template>
 
<script setup>
// 引入echarts，axios，onMounted
import * as echarts from 'echarts'
import axios from 'axios'
import { onMounted } from 'vue';
// 提前定义myCharts
let myChart = null
onMounted(() => {
    // 获取dom节点
    myChart = echarts.init(document.getElementById('hosts'))
    // 获取数据
    getdata('aushostslist')
})
const getdata = async(gold) => {
    // 拿到返回的数据
    let result = await axios.get(`http://localhost:8088/api/areahosts/${gold}`)
    let dataX = []
    let data = []
    result.data.forEach(item => {
        dataX.push(item.uid.slice(-3))
        data.push(item.hots)
    });
    // 将数据传给函数，用来划图
    toecharts(dataX, data)
}
const toecharts=(dataX, data)=>{
    // 设置配置对象
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: dataX,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '视频观看时长',
                type: 'bar',
                barWidth: '60%',
                data
            }
        ]
    };
    // 划图
    myChart.setOption(option);
}
// 获取点击按钮
const changeSelect=(e)=>{
    let {index}=e.target.dataset
    // 将选择的参数发送给getdata，获取数据
    getdata(index)
}
</script>
 
<style scoped lang="less">
#hosts {
    width: 700px;
    height: 500px;
    border:blue 1px solid
}
.big{
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.title{
    margin-top: 50px;
    text-align: center;
    button{
        font-size: 40px;
    }
}
</style>

成果展示

 剩下的两个图表可以根据金币和热度进行参考

 6、总结

使用echarts主要的是数据请求，数据修改展示等等，简单易上手

仓库地址datashow: 数据大屏的展示