エフェクト画像
アプリケーションシナリオ
年次売上から月次売上など、データのドリルダウンには多くのアプリケーションシナリオがあります。
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;
}
}
}
}
実現原理
1. echartsインスタンスオブジェクトは、独立して1回だけ宣言されます。
2.チャートクリックイベントは、レンダリング関数の外部に書き込まれます。
私の実装の過程では、結合度を減らすことが重要です。コードを分割するのが簡単であればあるほど、より良い結果が得られ、多くの問題を回避できます。