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

效果图：

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

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

1
2
3
4
5
6
7

我的需求是最大天数、最小天数、平均天数，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);
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161