Effect picture
Application scenarios
There are many application scenarios for data drilling down, such as annual sales to monthly sales.
html
<template>
<div class="chart">
<div ref="chartEle" id="chart" style="width: 100%; height: 600px; margin: 0 auto;"></div>
<div class="btn-box">
<el-button @click="getChartData('month')">click</el-button>
<el-button @click="reset">reset</el-button>
<el-button @click="prev">prev</el-button>
</div>
</div>
</template>
js
export default {
name: "Chart",
data() {
return {
myChart: null,
status: 2,
month: '01',
date: '2019-01-01'
}
},
mounted() {
this.myChart = this.$echart.init(this.$refs.chartEle);
this.clickChart();
},
methods: {
//渲染图表
renderChart(xData, yData, name) {
let option = {
color: ['#bfccff'],
title: {
text: ''
},
tooltip: {
},
xAxis: {
data: xData,
name: name
},
yAxis: {
name: 'sunlight'
},
series: [{
name: name, //可以当做一个唯一的属性，用来判断当前的图表
type: name == 'h' ? 'line' : 'bar',
smooth: true,
barCategoryGap: '50%',
data: yData,
itemStyle: {
color: new this.$echart.graphic.LinearGradient(
0, 0, 0, 2,
[
{
offset: 0, color: '#C346C2'},
{
offset: 0.5, color: '#F5CBFF'}
])
},
areaStyle: {
}
}]
};
this.myChart.setOption(option);
window.addEventListener('resize', () => {
this.myChart.resize();
});
},
//获取图表数据
getChartData(name) {
const url = '/power/projPower/getAll';
let data = {
'pid': 990,
'status': this.status,
'month': this.month,
'date': this.date
};
this.$ajax.get(url, {
'params': data
}).then(res => {
if (res.code == 200) {
this.renderChart(res.data.times, res.data.number, name);
}
})
},
//图表点击下钻
clickChart() {
this.myChart.on('click', params => {
switch (params.seriesName) {
case 'month':
this.status = 1;
this.month = params.name.length < 2 ? '0'.concat(params.name) : params.name;
this.getChartData('day');
break;
case 'day':
this.status = 0;
this.date = params.name.length < 2 ? '0'.concat(params.name) : params.name;
this.date = '2019-' + this.month + '-' + this.date;
this.getChartData('h');
break;
default:
break;
}
})
},
//还原为最开始的数据
reset() {
this.status = 2;
this.getChartData('month');
},
//返回上一步图表数据
prev() {
switch (this.status) {
case 1:
this.status = 2;
this.getChartData('month');
break;
case 0:
this.status = 1;
this.getChartData('day');
break;
default:
break;
}
}
}
}
Realization principle
1. The echarts instance object is declared independently and only once.
2. The chart click event is written outside the rendering function.
In the process of my implementation, it is important to reduce the degree of coupling. The simpler the code can be split, the better, and many problems can be avoided.