foreword
In the past few weeks, I have been thinking about how to add a line chart in vue to display data. After referring to many articles, it was finally completed.
This article mainly has the following contents:
- How to import the official library
- How to configure basic chart information for display, including title, legend, chart size, etc.
- How to add an average
- How to add an area display
- How to choose multi-discount stacking or stacking
introduction of echarts
echarts is an open source visual chart library based on JavaScript. It officially provides a rich variety of charts with its simple and comfortable testing method, which is very convenient for the use of front-end pages. Link: echarts
official website
Refer to the official website: Get started with ECharts in 5 minutes
The methods introduced under the vue framework are:
"dependencies"Include in package.json"echarts": "^5.0.1"to reference the latest version of the package- Add in main.js
import * as echarts from 'echarts'to all references - Declare the chart in the vue file,
<div id="myChart1" :style="{width: '1000px', height: '500px'}"></div>this way you can declare a fixed size configuration - Prepare the function in the js part of the vue file to initialize the chart
Dynamic display of charts
initialization
Before configuring the chart, you should first prepare an initialization function for instantiating the chart. This instantiated object should be set as a global variable to prevent repeated instantiation when modifying the chart (if the content does not need to be modified, it does not matter if it is set as a local variable )
Object acquisition (initialization):
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);
},
In the above function, the medium used to store chart information is a global variable:myChartOption
basic information
In the general development process, the basic information required by the chart will be prepared when this variable is declared, and the information on the x-axis and y-axis will be left blank for dynamic assignment, thereby maintaining flexibility.
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'}
]
}
}]
},
dynamic assignment
In the above option, the information except the x-axis and y-week is configured, because usually other parts except the data information are generally fixed, so for the data information, it is necessary to prepare a function for assignment and a monitor for update.
assignment:
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;
},
monitor (monitor)
Prepare a watch for monitoring property changes
watch: {
myChartOption: {
handler(newOption, oldOption) {
if(this.myChart){
if(newOption)
this.myChart.setOption(newOption);
else
this.myChart.setOption(oldOption);
}else {
//
}
},
immediate: true,//首次绑定就执行
deep: true, //深度监听，监听对象内任一属性发生变化
},
}
The final effect is as follows:
In addition, if you expect to use a stacked graph, that is, the sum of two sets of data will have special meaning, you only need to add the attribute of a single line in option, the specific stackoperation is to group and merge several sets of lines, and provide a group name for each set of lines For example: stack: '总量'.
However, it should be noted that when a stacked graph is used, the average value calculated by the upper line will be calculated based on its own height.
The final effect is as follows:
epilogue
From my personal point of view, the official chart solution provided by echart takes care of my own ignorance in this area very well. It has rich operation guidelines and simple debugging solutions, and rich styles, which is very conducive to various lightweight development .
For example: a debuggable example of a line chart style
(Knowledge points plus 1)
Reference: https://www.cnblogs.com/qdhxhz/p/12600889.html
Reference: https://www.cnblogs.com/ludeng-blog/p/12531903.html
Reference: https://www.jianshu. com/p/08fefbfc9378
Reference: https://blog.csdn.net/zhang_xiao_xie/article/details/114020691
Reference: https://www.cnblogs.com/shiningly/p/9471067.html
Reference: https://www .cnblogs.com/feiyangyao/p/12466563.html