关于echarts折线图无数据时改变对应背景色的玩法

本文章具体针对的是在取得后台数据时，对连续为空的数据在echarts折线图中进行突出显示，当然可适用的范围也可以是重复的元素或者指定的元素。
话不多说上代码。
在echarts中操作的数据的在series中，关键点也是在series中完成。如果对echarts折线图的配置不清楚的可以点击这里Echarts折线图

  series: [{
            name: "数据点",
            type: 'line',
            symbol: 'none',//去点
            smooth:true,//让曲线平滑
            //color:'darkgrey',//区域背景色
            data: [],
            lineStyle:{
              color: '#61abf7',//曲线颜色
            },
            markArea: {
              data: []
     
      }
          }],

以下是核心函数，源码是借鉴大佬代码而改造的，出处在这js 取到相同的字符串 返回对应的下标

 markAreaColor(list){
        let arrList=[];
        list.forEach(function (v,i) {
          if(list[i]===null){
            var left=list[i]==list[i-1]?1:0;
            var right=list[i]==list[i+1]?1:0;
            if(left+right==1){
              arrList.push(i)
            }
          }
        });
        for(var i=0;i<arrList.length/2;i++){
          let arr=[{"xAxis":arrList[i*2]-1},{"xAxis":arrList[i*2+1]+1}];
          this.dataPointsData.series[0].markArea.data.push(arr);
        }
      },

最终效果：无数据的地方加上了灰色背景色。

第一次写的博客，如果有不足之处，还请大神们多多指点，不喜勿喷，谢谢！