文章目录
目标代码数据改写为动态Echarts引入与html结构折线图：orderData柱状图：userData饼状图：videoData
总效果总代码:Home.vue
参考视频：
VUE项目，VUE项目实战，vue后台管理系统，前端面试，前端面试项目
案例链接【前端】Vue+Element UI案例：通用后台管理系统-导航栏（视频p1-16）https://blog.csdn.net/karshey/article/details/127640658【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠（p17-19）https://blog.csdn.net/karshey/article/details/127652862【前端】Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格（p20-22）https://blog.csdn.net/karshey/article/details/127674643【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战（p23-25）https://blog.csdn.net/karshey/article/details/127735159【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表：折线图、柱状图、饼状图（p27-30）https://blog.csdn.net/karshey/article/details/127737979【前端】Vue+Element UI案例：通用后台管理系统-面包屑、tag栏（p31-35）https://blog.csdn.net/karshey/article/details/127756733【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出（p36-38）https://blog.csdn.net/karshey/article/details/127787418【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框（p39-42）https://blog.csdn.net/karshey/article/details/127777962【前端】Vue+Element UI案例：通用后台管理系统-登陆页面Login（p44）https://blog.csdn.net/karshey/article/details/127795302【前端】Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出（p45-46）https://blog.csdn.net/karshey/article/details/127849502【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由（p47-48）https://blog.csdn.net/karshey/article/details/127865621【前端】Vue+Element UI案例：通用后台管理系统-项目总结https://blog.csdn.net/karshey/article/details/127867638
上一篇：【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战
目标
左边：把代码中写死的数据改成mock模拟的数据右边三个图：折线图，柱状图，饼状图
代码
数据改写为动态
上一篇中我们在mockData中有一个tableData，就是它了！
export default {
data() {
return {
TableData:[],
TableLabel,
CountData
}
},
mounted(){
getData().then((data)=>{
console.log(data);
this.TableData=data.data.getStatisticalData.data.tableData
})
}
}
效果：
Echarts引入与html结构
文档：echarts文档
安装：
npm i echarts@5.1.2
引入：
import * as echarts from 'echarts'
html结构：
三个图标都是卡片，所以都在el-card里用ref引入echarts图表，且里面一定要有height或width，否则不显示注意向左的间距柱状图和饼状图的横向排列：flex+space between
css：
.graph {
display: flex;
// 两个靠边
justify-content: space-between;
margin-top: 20px;
.el-card {
width: 49%;
}
}
效果：就是这样~
折线图：orderData
文档中模板的代码如下：虽然模板的代码是柱状图，而我们这里要做的事折线图，但我们可以通过模板来了解配置与其对应的效果。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
效果如下 ： 配置关系如下：具体可以看文档。 而series对应的是鼠标悬浮在柱上时的显示：
接下来写折线图。
观察一下数据：红框内的是x轴，也就是xAxis，series.name，1013这样的每一个数据都是series.data。
已经配置好的属性：
const order = {
legend: {
// 图例文字颜色
textStyle: {
color: "#333",
},
},
grid: {
left: "20%",
},
// 提示框
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category", // 类目轴
data: [],
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
axisLabel: {
interval: 0,
color: "#333",
},
},
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
},
],
color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
series: [],
}
export default order
我们这里必须配置（自己配置）的属性有：legend、xAxis、yAxis、series。
mounted() {
getData().then((data) => {
console.log(data);
this.TableData = data.data.getStatisticalData.data.tableData
// echarts图表
// 折线图
// 基于准备好的dom，初始化echarts实例
const echarts1 = echarts.init(this.$refs.echarts1)
var echarts1Option = {}
// ES6解构语法
var { orderData, userData, videoData } = data.data.getStatisticalData.data
// 获取x轴:要求是一个对象
const xAxis = Object.keys(orderData.data[0])
const xAxisData = {
data: xAxis
}
// 配置
echarts1Option.legend = xAxisData
echarts1Option.xAxis = xAxisData
echarts1Option.yAxis = {}
echarts1Option.series = []
// 配置series
xAxis.forEach(key => {
echarts1Option.series.push({
name: key,
type: 'line',
// key对应的orderData的所有值
data: orderData.data.map(item => item[key])
})
})
// 使用刚指定的配置项和数据显示图表。
echarts1.setOption(echarts1Option);
})
}
效果：
柱状图：userData
接下来的操作就很类似了。
基础代码：
// 柱状图
const echarts2 = echarts.init(this.$refs.echarts2)
var echarts2Option = user
echarts2.setOption(echarts2Option);
已经配置好的属性：
const user = {
legend: {
// 图例文字颜色
textStyle: {
color: "#333",
},
},
grid: {
left: "20%",
},
// 提示框
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category", // 类目轴
data: [],
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
axisLabel: {
interval: 0,
color: "#333",
},
},
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
},
],
color: ["#2ec7c9", "#b6a2de"],
series: [],
}
export default user
user缺什么，我们这里就配置什么：xAxis.data、series.
显然xAxis.data是date的value：series会有两个，分别是new和active。
// 柱状图
const echarts2 = echarts.init(this.$refs.echarts2)
var echarts2Option = user
// 配置
echarts2Option.xAxis.data = userData.map(item => item.date)
echarts2Option.series = [
{
name: '新增用户',
data: userData.map(item => item.new),
// 类型:bar是柱状图
type:'bar'
}
,
{
name: '活跃用户',
data: userData.map(item => item.active),
type:'bar'
}
]
echarts2.setOption(echarts2Option);
效果：
饼状图：videoData
配置：
const video = {
tooltip: {
trigger: "item",
},
color: [
"#0f78f4",
"#dd536b",
"#9462e5",
"#a6a6a6",
"#e1bb22",
"#39c362",
"#3ed1cf",
],
series: [],
}
export default video
我们只需要自己配series。
// 饼状图
const echarts3 = echarts.init(this.$refs.echarts3)
var echarts3Option = video
echarts3Option.series = {
data: videoData,
type: 'pie'
}
echarts3.setOption(echarts3Option);
效果：
总效果
总代码:Home.vue
本篇新建的文件和文件夹如红框所示，代码已放在文中。 有更改的问价如橙框所示，代码如下。
Admin
超级管理员
上次登录时间：2021-7-19
上次登陆地点：武汉
{{ priceFormate(item.value) }}
{{ item.name }}
文章来源
您阅读本篇文章共花了：
发表评论