1、前提
有后端数据接口和数据库，并且能够使用axios访问接口获取数据
2、安装依赖包
npm i vue-router echarts axios lessvue-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主要的是数据请求，数据修改展示等等，简单易上手