需求场景

最近在写后台管理系统时，遇到一个需求，就是要展示一个折线图。

注意：
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-buttonv-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);
},

完成！！！多多积累，多多收获！！！