使用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）

效果展示

5、echarts绘制数据图表

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

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

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

 5.2主播热度TOP10（柱状图）

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

代码实现

成果展示

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

 6、总结

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

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