echarts——折线图实现不同区间不同颜色+下钻/回钻功能——技能提升

需求场景

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

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

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