echarts——折线图实现不同区间不同颜色+下钻/回钻功能——技能提升
- 需求场景
- 解决步骤1：安装echarts插件
- 解决步骤2：html代码
- 解决步骤3：封装option配置和initChart渲染方法
- 解决步骤4：回钻功能
需求场景
最近在写后台管理系统时，遇到一个需求，就是要展示一个折线图。
注意：
1.折线图分两种颜色，前一部分是实际数据，要用orange颜色，后一部分是预测数据，要用红色展示。
2.点击某一个月份时，要下钻到当月的每一天的数据上，且数据要实现自动轮播展示
3.点击返回按钮，可以回钻到月份折线图上
下面介绍解决步骤：
解决步骤1：安装echarts插件
npm install echarts@5.4.0 --save
解决步骤2：html代码
<a-card style="margin-top: 10px">
<div style="display: flex;justify-content: space-between;align-items: center;">
<h3>下单金额下降</h3>
<a-button
v-if="renderBackFlag"
type="primary"
size="small"
id="return-button"
@click="renderBack"
>返回</a-button>
</div>
<div id="lineId1" class="pieCls"></div>
</a-card>
解决步骤3：封装option配置和initChart渲染方法
import * as echarts from 'echarts';
export default {
data(){
return{
renderBackFlag: false,
byMonth: {
realData:['23/7','23/8','23/9','23/10','23/11','23/12','24/1'],//实际数据的月份
predictionData:['24/2','24/3','24/4'],//预测数据的月份
},
renderObj: {
monthArr:['23/7','23/8','23/9','23/10','23/11','23/12','24/1','24/2','24/3','24/4'],
monthTotal:[0,0,0,0,0,243645,2035.1318,1175.732,1256.81,324.34],
dateArr:['7/1','7/2','7/3',...,'4/29','4/30'],
monthDate:{
'23/7':['7/1','7/2','7/3',...,'7/31'],
'23/8':['8/1','8/2','8/3',...,'8/31'],
...
'24/4':['4/1','4/2','4/3',...,'4/30']
},
monthValue:{
'23/7':[222,333,44,...,211],
'23/8':[2333,55,77,...,444],
...
'24/4':[244,66,11,...,833]
}
},
}
}
}
renderLine() {
let dom = document.getElementById('lineId1');
let myChart = echarts.init(dom);
let option = this.getOption(
this.renderObj.monthArr,
this.renderObj.monthTotal
);
this.initChart(myChart, option, dom);
},
getOption(xData, sData) {
let option = null;
option = {
tooltip: {
trigger: 'axis',
formatter: (params) => {
let param = params[0];
if (this.renderBackFlag) {
let time = param.name.split('/');
return (
time[0] +
'月' +
time[1] +
'日金额：<br/>' +
param.value.toFixed(2) +
'元'
);
} else {
return param.name + '金额：<br/>' + param.value.toFixed(2) + '元';
}
},
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(255,255,255,1)',
extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);',
textStyle: {
fontSize: 14,
color: '#000',
},
},
xAxis: {
type: 'category',
splitLine: { show: false },
axisTick: { show: false },
data: xData,
},
visualMap: {
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [
{
lte: this.byMonth.realData.length - 1,
color: '#f90',
},
{
gt: this.byMonth.realData.length - 1,
lte:
this.byMonth.realData.length +
this.byMonth.predictionData.length,
color: 'red',
},
],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
yAxis: {
type: 'value',
name: '',
},
series: [
{
name: '金额',
type: 'line',
symbolSize: 10,
lineStyle: {
width: 4,
},
itemStyle: {
color: '#f90', //这里设置的拐点颜色
},
label: {
show: true,
position: 'top',
formatter: function (params) {
return params.value.toFixed(0);
},
},
data: sData,
},
],
};
return option;
},
initChart(myChart, option, dom) {
myChart.setOption(option);
myChart.on('click', (params) => {
let name = params.name;
this.renderBackFlag = true;
echarts.dispose(dom);
var myChart = echarts.init(dom);
option.xAxis.data = this.renderObj.monthDate[name];
option.series[0].data = this.renderObj.monthValue[name];
delete option.visualMap;
myChart.setOption(option, true);
this.lunboEcharts(myChart, option.xAxis.data.length);
});
},
解决步骤4：回钻功能
renderBack() {
this.renderBackFlag = false;
let dom = document.getElementById('lineId1');
echarts.dispose(dom);
clearInterval(this.timer);
let myChart = echarts.init(dom);
let option = this.getOption(
this.renderObj.monthArr,
this.renderObj.monthTotal
);
this.initChart(myChart, option, dom);
},
完成！！！多多积累，多多收获！！！
