echarts 实现包络效果

97 阅读1分钟

最近需要实现一个功能,实现包络功能,即折线图填充两条线之间颜色。一开始想的是使用 areaStyle ,一条线上色,一条线不上色。不过这样效果不佳。 最终方案为以下:

image.png

        let maxline = []
        let minline = []
        for (let i = 0; i < this.timedata.time.length; i++) {
          const time = this.timedata.time[i]
          let values = [this.timedata.data[i]]
          if (layerData && layerData.length > 0) {
            layerData.forEach((layer) => {
              layer.time.findIndex((t) => t === time) !== -1 && values.push(layer.data[i])
            })
          }
          maxline.push([time, Math.max(...values)])
          minline.push([time, Math.min(...values)])
        }
        let line = []
        line = maxline.concat(minline.reverse())  // 重点

        this.option.series.unshift({
          name: '包络线',
          type: 'line',
          showSymbol: false,
          data: line,
          xAxisIndex: 0,
          yAxisIndex: 0,
          //smooth: true,
          // lineStyle: { color: 'rgba(255,255,255,0.2)' },
          itemStyle: {
            color: '#DB925B',
          },
          areaStyle: {
            color: '#DB925B',
            opacity: 0.4,
          },
        })