echarts实现折线图上下限区域展示

效果图：

画这种区域中主要是利用了series的两个属性：
思路：上下限都画上区域，然后折线利用图形透明度隐藏，给上区域加上颜色，给下区域加上白色（echarts图背景是啥色，就加啥色）

    lineStyle: {
      opacity: 0
    }, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
    areaStyle: {
      color: 'rgba(0,122,255,0.1)'
    }, // 填充的颜色

我的需求是最大天数、最小天数、平均天数，echarts图背景是白色的
数据形式：

核心代码如下：（核心是操作了series）

        let _series = [];
        const dataDict = {
          max: {
            name: '最大天数',
            color: '#ff5e3a',
            value: [],
            unit: '天'
          },
          min: {
            name: '最小天数',
            color: '#58cbb2',
            value: [],
            unit: '天'
          },
          avg: {
            name: '平均天数',
            color: '#007aff',
            value: [],
            unit: '天'
          }
        };
        for (let item in dataDict) {
          let _dict = dataDict[item];
          _legend.push(_dict.name);
          let dataVal = lineObj[item];
          if (item === 'max') {
            let _sery = {
              name: _dict.name,
              unit: _dict.unit,
              type: 'line',
              smooth: true,
              symbol: 'none',
              itemStyle: {
                normal: {
                  color: _dict.color
                }
              },
              lineStyle: {
                opacity: 0
              }, // 隐藏线
              areaStyle: {
                color: 'rgba(0,122,255,0.1)'
              }, // 上限区域
              data: dataVal
            };
            _series.push(_sery);
          } else if (item === 'min') {
            let _sery = {
              name: _dict.name,
              unit: _dict.unit,
              type: 'line',
              smooth: true,
              symbol: 'none',
              itemStyle: {
                normal: {
                  color: _dict.color
                }
              },
              lineStyle: {
                opacity: 0
              }, //隐藏线
              areaStyle: {
                color: '#fff'
              },// 下限区域
              data: dataVal
            };
            _series.push(_sery);
          } else {
            let _sery = {
              name: _dict.name,
              unit: _dict.unit,
              type: 'line',
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              itemStyle: {
                normal: {
                  color: _dict.color
                }
              },
              data: dataVal
            };
            _series.push(_sery);
          }
        }

        this.generateChart(this.chartMeteo, _legend, _xAxis, _yAxis, _series);


    generateChart(chart, _legend, _xAxis, _yAxis, _series) {
      let self = this;
      let option = {
        title: {
          x: 'left'
        },
        tooltip: {
          trigger: 'axis',
          // 坐标轴指示器
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: 'rgba(0,122,255,0.6)'
            }
          },
          backgroundColor: 'rgba(73,91,127,1)',
          formatter(a, b, c) {
            let series = self.chartMeteo.getOption().series;
            let tip = a[0].axisValue + '<br>';
            for (let i = 0; i < a.length; i++) {
              let seriesIndex = a[i].seriesIndex;
              let val =
                a[i].value !== 'NaN'
                  ? a[i].value.toFixed(1) + series[seriesIndex].unit
                  : '-';
              tip = tip + a[i].seriesName + ':' + val + '<br>';
            }
            return tip;
          }
        },
        legend: {
          show: false // 不显示legend
          // data: _legend,
          // x: 'center',
          // textStyle: {
          //   color: '#000'
          // }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _xAxis,
          axisLabel: {
            color: '#AFBCD1'
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#5F7190'
            }
          },
          // 指示器设置
          axisPointer: {
            lineStyle: {
              color: '#7D9DBB',
              type: 'dashed'
            }
          }
        },
        yAxis: _yAxis,
        series: _series
      };

      chart.setOption(option);
    }