前言
前几周到现在琢磨了一下怎么在vue里添加折线图用于显示数据。参考了不少文章终于完成了。
本文主要有以下内容:
- 如何引入官方库
- 如何配置图表基础信息用于显示,包括标题,图例,图表大小等
- 如何添加平均线
- 如何添加面积显示
- 如何选择多折现的叠加或者堆砌
echarts引入
echarts是一个基于 JavaScript 的开源可视化图表库,官方提供了丰富的图表种类配合其简单舒适的测试方式,非常利于前端页面使用
链接:echarts官网
参考了官网的:5 分钟上手 ECharts
在vue框架下引入的方法为:
- 在package.json中的
"dependencies"
内加入"echarts": "^5.0.1"
以引用最新版本的包 - 在main.js中加入
import * as echarts from 'echarts'
以全部引用 - 在vue文件中声明图表,
<div id="myChart1" :style="{width: '1000px', height: '500px'}"></div>
这种方式可以声明固定的大小配置 - 在vue文件的js部分准备函数进行图表的初始化
图表的动态显示
初始化
在配置图表前首先应该准备一个初始化函数用于实例化图表,这个实例化的对象应该设置成全局变量,以防止修改图表时进行重复的实例化(如果内容无需修改,那么设置为局部变量也无所谓)
对象的获取(初始化):
iniMyChart(){
if (this.myChart != null &&
this.myChart != "" &&
this.myChart != undefined) {
//this.MyChart.dispose();//销毁
}else
this.myChart = this.$echarts.init(document.getElementById('myChart1'));
this.myChart.setOption(this.myChartOption);
},
在上方这个函数中,用于存储图表信息的媒介为全局变量:myChartOption
基础信息
在一般的开发过程中会在这个变量声明的时候准备好图表所需的基础信息而将x轴和y轴的信息留空,用于动态的进行赋值,从而保持灵活性。
Option:
myChartOption : {
title: {
text: 'XX统计',
textStyle:{ //---主标题内容样式
color:'#000' //主标题文字颜色
},
padding:[5,0,0,100] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
},
legend: { //图例
data: ['AA统计(单位:次)','BB统计(单位:次)']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [] //x轴数组
},
yAxis: {
type: 'value'
},
series: [{
name:'AA统计(单位:次)',
data: [],
type: 'line',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
areaStyle: {}, //折线面积图
smooth: true, //平滑曲线
markLine : { //平均线
data : [
{type : 'average'}
]
}
}, {
name:'BB统计(单位:次)',
data: [],
type: 'line',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
areaStyle: {}, //折线面积图
smooth: true, //平滑曲线
markLine : { //平均线
data : [
{type : 'average'}
]
}
}]
},
动态赋值
在上方的option中,配置了除了x轴和y周的信息,因为通常除数据信息外其他部分是通用固定的,那么对于数据信息需要准备一个函数用于赋值,准备一个监视用于更新。
赋值:
setMyChart(xAx,yAy,yAy2){
if (this.myChart != null &&
this.myChart != "" &&
this.myChart != undefined) {
}else
this.myChart = this.$echarts.init(document.getElementById('myChart1'));
//用于演示
//xAx = ["5-1","5-2","5-3","5-4","5-5","5-6","5-7","5-8"];
//yAy = [9,8,1,3,5,4,7,6];
//yAy2 = [5,7,8,1,5,0,6,7];
this.myChartOption.xAxis.data = xAx;
this.myChartOption.series[0].data = yAy;
this.myChartOption.series[1].data = yAy2;
},
监视(监听)
准备一个watch用于监听属性的变化
watch: {
myChartOption: {
handler(newOption, oldOption) {
if(this.myChart){
if(newOption)
this.myChart.setOption(newOption);
else
this.myChart.setOption(oldOption);
}else {
//
}
},
immediate: true,//首次绑定就执行
deep: true, //深度监听,监听对象内任一属性发生变化
},
}
最终效果如下:
此外如果期望使用堆叠图,也就是两组数据的合计将有特殊意义,只需要为option中单条线的属性添加stack
,具体操作是为将几组线进行分组合并,为每组线提供一个组名例如:stack: '总量'
。
但需要注意的是,当采用堆叠图时,上方线所计算平均值将以自身高度所在进行计算。
最终效果如下:
结语
从我个人角度出发echart官方所提供的图表解决方案非常好的照顾了我自身对这方面的未知,有着丰富的操作指引以及简单的调试方案,并且样式丰富,非常利于进行各种轻量级开发。
比如:折线图样式的可调试示例
(知识点加1)
参考:https://www.cnblogs.com/qdhxhz/p/12600889.html
参考:https://www.cnblogs.com/ludeng-blog/p/12531903.html
参考:https://www.jianshu.com/p/08fefbfc9378
参考:https://blog.youkuaiyun.com/zhang_xiao_xie/article/details/114020691
参考:https://www.cnblogs.com/shiningly/p/9471067.html
参考:https://www.cnblogs.com/feiyangyao/p/12466563.html