Echarts使用visualMap实现随时间渐变折线图颜色

如图本来的折线图为X轴按时间顺序分布，现在的新需求是在当前时间之后的部分折线图的颜色透明度调为60%。
给四条线设置visualMap属性使其颜色分段

        visualMap: [{
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              lte: 8,
              color: 'rgba(188, 77, 255, 1)'
            },
            {
              gt: 8,
              lte: 20,
              color: 'rgba(188, 77, 255, 0.6)'
            }
          ]
        }, {
          show: false,
          dimension: 0,
          seriesIndex: 3,   //第二条曲线
          pieces: [
            {
              lte: 6,
              color: 'rgba(255, 148, 0, 1)'     //前部分颜色
            },
            {
              gt: 6,
              lte: 20,
              color: 'rgba(255, 148, 0, 0.6)',
            }
          ]
        }, {
          show: false,
          dimension: 0,
          seriesIndex: 1,   //第二条曲线
          pieces: [
            {
              lte: 6,
              color: 'rgba(0, 217, 255, 1)'     //前部分颜色
            },
            {
              gt: 6,
              lte: 20,
              color: 'rgba(0, 217, 255, 0.6)',
            }
          ]
        }, {
          show: false,
          dimension: 0,
          seriesIndex: 2,   //第二条曲线
          pieces: [
            {
              lte: 6,
              color: 'rgba(158, 255, 0, 1)'     //前部分颜色
            },
            {
              gt: 6,
              lte: 20,
              color: 'rgba(158, 255, 0, 0.6)',
            }
          ]
        }],

此时已经实现了部分透明度为60%的需求，接下来需要根据时间动态显示

// 传入时间节点和当前时间比较
    time_range (beginTime) {
      var strb = beginTime.split(":");
      if (strb.length != 2) {
        return false;
      }
      var b = new Date();
      var n = new Date();
      b.setHours(strb[0]);
      b.setMinutes(strb[1]);
      if (n.getTime() - b.getTime() > 0) {
        return true;
      } else {
        return false;
      }
    },


		let timeArr = [] // 用来存储新数组  arr数组是存储时间节点的输入，每一个时间节点调用一次time_range函数
        for (let i = 0; i < arr.length; i++) {
          timeArr.push(this.time_range(arr[i]))
        }

可以看到为true的就是该正常显示颜色的部分，为false代表当前时间未抵达部分需要将透明度调为60%

  		const currentArr = timeArr.filter(item => { return item == true })
        this.optionLine.visualMap[0].pieces[0].lte = currentArr.length
        this.optionLine.visualMap[1].pieces[0].lte = currentArr.length
        this.optionLine.visualMap[2].pieces[0].lte = currentArr.length
        this.optionLine.visualMap[3].pieces[0].lte = currentArr.length

然后修改器其lte值（小于等于）

gt：大于（greater than）

gte：大于等于（greater than or equal）

lt:：小于（less than）

lte：小于等于（less than or equal）

eq：等于（equal）

neq：不等于

完成