ECharts中Map(地图)样式配置、渐变色生成

发表于 | 分类于
ECharts中Map(地图)样式配置、渐变色生成

前言

ECharts是我们常用的图表控件，功能特别强大，每次使用都要查API比较繁琐，这里就记录开发中常用的配置。

官网：https://echarts.apache.org/handbook/zh/get-started

配置项：https://echarts.apache.org/zh/option.html#title

第三方示例平台：https://www.makeapie.cn/echarts

主题：https://echarts.apache.org/zh/theme-builder.html

样式

示例

image-20240307114157422

配置

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
let option = {
    tooltip: {
      show: true,
      formatter: function (params) {
        if (params.value.length > 1) {
          return "  " + params.name + "：" + params.value[2];
        } else {
          return "  " + params.name + "：" + (params.value || 0);
        }
      },
    },
    geo: {
      map: "china",
      zoom: 1.2,
      show: true,
      roam: false,
      emphasis: {
        label: {
          show: false,
        },
      },
      layoutSize: "100%",
      itemStyle: {
        borderColor: "rgba(147, 235, 248, 1)",
        borderWidth: 2,
        shadowColor: "rgb(90,160,234)",
        shadowOffsetX: 0,
        shadowOffsetY: 10,
        shadowBlur: 10,
      },
    },
    visualMap: {
      show: false,
      seriesIndex: [0],
      inRange: {
        color: ["#8db1f1", "#026aa9"],
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        aspectScale: 0.75,
        zoom: 1.2,
        label: {
          show: true,
          color: "#ffffff",
        },
        itemStyle: {
          borderColor: "rgba(147, 235, 248, 1)",
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.9,
            colorStops: [
              {
                offset: 0,
                color: "rgba(17,217,245,0.5)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(10,209,231,0.2)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          borderWidth: 1,
        },
        emphasis: {
          label: {
            show: false,
            color: "#ffffff",
          },
          itemStyle: {
            areaColor: "#026aa9",
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
        data: allData,
      },
    ],
};

层级

地图的配置是一层盖一层，从底层到顶层的配置依次为：

geo => series => visualMap

geo 和 series 中都有两个配置项

  • itemStyle 未选中的样式
  • emphasis 选中的样式

geo隐藏掉只有series也是能正常显示整个地图的。

geo 和 series 的搭配可以实现一些阴影，偏移从而实现类似立体的效果。

visualMap

其中visualMap设置的背景颜色是动态的，会根据数值的大小在两个颜色之间变化。

1
2
3
4
5
6
7
visualMap: {
  show: false,
  seriesIndex: [0],
  inRange: {
    color: ["#cdcaf8", "#026aa9"],
  },
},

需要注意的是：

当区域有数据的时候会使用visualMap的颜色覆盖，如果没有数据则会使用series的itemStyle的样式。

默认最小值和最大值会根据数据自动计算，当然我们也可以指定具体的值。

1
2
3
4
5
6
7
8
9
visualMap: {
    min: 0,
    max: 100,
    inRange: {
        color: ['#e0ffff', '#0066ff'] // 设置颜色范围，浅色到深色
    },
    calculable: true,
    show: true
},

渐变色

线性渐变

沿着一条直线从一种颜色过渡到另一种颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#8db1f1", // 起始颜色
      },
      {
        offset: 1,
        color: "#026aa9", // 终止颜色
      },
    ],
}

径向渐变

从一个中心点向四周辐射的渐变色。

1
2
3
4
5
6
7
8
9
10
11
{
    type: 'radial',
    x: 0.5, 
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'rgba(255, 0, 0, 1)' // 起始颜色
    }, {
        offset: 1, color: 'rgba(0, 0, 255, 1)' // 终止颜色
    }]
}

你可以设置以下属性：

  1. type：设置渐变的类型，固定值为 ‘radial’。

  2. x、y：设置渐变的中心点坐标，取值范围为 0~1，其中 (0, 0) 表示左上角，(1, 1) 表示右下角。

  3. r：设置渐变的半径，也是相对于整个绘图区域的半径，取值范围为 0~1，1 表示半径等于绘图区域的最短边的一半。

  4. colorStops：设置渐变的起始颜色、终止颜色以及它们的位置。

    它是一个数组，每个元素包含两个属性，分别是 offset 和 color。

    其中 offset 表示该位置距离渐变位置的百分比，取值范围为 0~1，color 则是该位置所对应的颜色值。

覆盖散点

涟漪散点

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
series: [
  {
    type: "map",
    map: "china",
    aspectScale: 0.75,
    zoom: 1.2,
    label: {
      show: true,
      color: "#11688a",
    },
    itemStyle: {
      areaColor: "rgba(10,76,139,1)",
      borderColor: "#215495",
      borderWidth: 1,
    },
    emphasis: {
      label: {
        show: false,
      },
      itemStyle: { areaColor: "#061E3D" },
    },
    data: allData,
  },
  {
    type: "effectScatter",
    coordinateSystem: "geo",
    rippleEffect: {
      brushType: "stroke",
    },
    showEffectOn: "render",
    itemStyle: {
      color: {
        type: "radial",
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [
          {
            offset: 0,
            color: "rgba(5,80,151,0.2)",
          },
          {
            offset: 0.8,
            color: "rgba(5,80,151,0.8)",
          },
          {
            offset: 1,
            color: "rgba(0,108,255,0.7)",
          },
        ],
        global: false, // 缺省为 false
      },
    },
    label: {
      show: true,
      color: "#fff",
      fontWeight: "bold",
      position: "inside",
      formatter: function (para) {
        return "{cnNum|" + para.data.value[2] + "}";
      },
      rich: {
        cnNum: {
          fontSize: 13,
          color: "#D4EEFF",
        },
      },
    },
    symbol: "circle",
    symbolSize: function (val) {
      if (val[2] === 0) {
        return 0;
      }
      let a = (maxSize4Pin - minSize4Pin) / (max - min);
      let b = maxSize4Pin - a * max;
      return a * val[2] + b * 1.2;
    },
    data: convertData(allData),
    zlevel: 1,
  },
],

其中

1
2
3
4
5
6
7
8
9
10
11
12
13
let convertData = function (outdata) {
    let res = [];
    for (let i = 0; i < outdata.length; i++) {
      let geoCoord = geoCoordMap[outdata[i].name];
      if (geoCoord) {
        res.push({
          name: outdata[i].name,
          value: geoCoord.concat(outdata[i].value),
        });
      }
    }
    return res;
};

值类似于

1
2
3
4
{
    name : "河南",
    value: [113.0668, 33.8818, 140]
}

普通散点

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
{
    type: "scatter",
    coordinateSystem: "geo",
    rippleEffect: {
      brushType: "stroke",
    },
    showEffectOn: "render",
    itemStyle: {
      color: {
        type: "radial",
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [
          {
            offset: 0,
            color: "rgba(5,80,151,0.8)",
          },
          {
            offset: 0.5,
            color: "rgba(0,108,255,0.7)",
          },
          {
            offset: 1,
            color: "rgba(5,80,151,0.2)",
          },
        ],
        global: false, // 缺省为 false
      },
    },
    label: {
      show: true,
      color: "#fff",
      fontWeight: "bold",
      position: "inside",
      formatter: function (para) {
        return "{cnNum|" + para.data.value[2] + "}";
      },
      rich: {
        cnNum: {
          fontSize: 13,
          color: "#D4EEFF",
        },
      },
    },
    symbol: "circle",
    symbolSize: function (val) {
      if (val[2] === 0) {
        return 0;
      }
      let a = (maxSize4Pin - minSize4Pin) / (max - min);
      let b = maxSize4Pin - a * max;
      return a * val[2] + b * 1.2;
    },
    data: convertData(allData),
    zlevel: 1,
},

放射线

image-20221030183220536

示例

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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "@/assets/utils/resize.js";
import "@/assets/utils/china.js";

export default {
  name: "BarChart",
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    title: {
      type: String,
      default: "",
    },
    chartData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: function () {
      this.initChart();
    },
  },
  async mounted() {
    await this.$nextTick();
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$el);
      }
      var chinaGeoCoordMap = {
        黑龙江: [127.9688, 45.368],
        内蒙古: [110.3467, 41.4899],
        吉林: [125.8154, 44.2584],
        北京市: [116.4551, 40.2539],
        辽宁: [123.1238, 42.1216],
        河北: [114.4995, 38.1006],
        天津: [117.4219, 39.4189],
        山西: [112.3352, 37.9413],
        陕西: [109.1162, 34.2004],
        甘肃: [103.5901, 36.3043],
        宁夏: [106.3586, 38.1775],
        青海: [101.4038, 36.8207],
        新疆: [87.9236, 43.5883],
        西藏: [91.11, 29.97],
        四川: [103.9526, 30.7617],
        重庆: [108.384366, 30.439702],
        山东: [117.1582, 36.8701],
        河南: [113.4668, 34.6234],
        江苏: [118.8062, 31.9208],
        安徽: [117.29, 32.0581],
        湖北: [114.3896, 30.6628],
        浙江: [119.5313, 29.8773],
        福建: [119.4543, 25.9222],
        江西: [116.0046, 28.6633],
        湖南: [113.0823, 28.2568],
        贵州: [106.6992, 26.7682],
        云南: [102.9199, 25.4663],
        广东: [113.12244, 23.009505],
        广西: [108.479, 23.1152],
        海南: [110.3893, 19.8516],
        上海: [121.4648, 31.2891],
      };
      let chinaDatas = [
        [
          {
            name: "黑龙江",
            value: 0,
          },
        ],
        [
          {
            name: "内蒙古",
            value: 0,
          },
        ],
        [
          {
            name: "吉林",
            value: 0,
          },
        ],
        [
          {
            name: "辽宁",
            value: 0,
          },
        ],
        [
          {
            name: "河北",
            value: 0,
          },
        ],
        [
          {
            name: "天津",
            value: 0,
          },
        ],
        [
          {
            name: "山西",
            value: 0,
          },
        ],
        [
          {
            name: "陕西",
            value: 0,
          },
        ],
        [
          {
            name: "甘肃",
            value: 0,
          },
        ],
        [
          {
            name: "宁夏",
            value: 0,
          },
        ],
        [
          {
            name: "青海",
            value: 0,
          },
        ],
        [
          {
            name: "新疆",
            value: 0,
          },
        ],
        [
          {
            name: "西藏",
            value: 0,
          },
        ],
        [
          {
            name: "四川",
            value: 0,
          },
        ],
        [
          {
            name: "重庆",
            value: 0,
          },
        ],
        [
          {
            name: "山东",
            value: 0,
          },
        ],
        [
          {
            name: "河南",
            value: 0,
          },
        ],
        [
          {
            name: "江苏",
            value: 0,
          },
        ],
        [
          {
            name: "安徽",
            value: 0,
          },
        ],
        [
          {
            name: "湖北",
            value: 0,
          },
        ],
        [
          {
            name: "浙江",
            value: 0,
          },
        ],
        [
          {
            name: "福建",
            value: 0,
          },
        ],
        [
          {
            name: "江西",
            value: 0,
          },
        ],
        [
          {
            name: "湖南",
            value: 0,
          },
        ],
        [
          {
            name: "贵州",
            value: 0,
          },
        ],
        [
          {
            name: "广西",
            value: 0,
          },
        ],
        [
          {
            name: "海南",
            value: 0,
          },
        ],
        [
          {
            name: "上海",
            value: 1,
          },
        ],
      ];
      let allpoints = Object.values(chinaGeoCoordMap);

      let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let dataItem = data[i];
          let fromCoord = chinaGeoCoordMap[dataItem[0].name];
          let toCoord = allpoints[Math.floor(Math.random() * allpoints.length)];
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
                value: dataItem[0].value,
              },
              {
                coord: toCoord,
              },
            ]);
          }
        }
        return res;
      };
      var series = [];
      series.push(
        {
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: "arrow", //箭头图标
            symbolSize: 5, //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              color: "#17F5FF",
            },
          },
          data: convertData(chinaDatas),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: "stroke", //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: "right", //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) {
                //圆环显示文字
                return params.data.name;
              },
              fontSize: 10,
              color: "#FFFFFF",
            },
            emphasis: {
              show: true,
            },
          },
          symbol: "circle",
          symbolSize: function (val) {
            return 5 + val[2] * 5; //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: "#17F5FF",
            },
          },
          data: chinaDatas.map(function (dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([
                dataItem[0].value,
              ]),
            };
          }),
        }
      );

      let option = {
        tooltip: {
          show: false,
          trigger: "item",
          backgroundColor: "rgba(166, 200, 76, 0.82)",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          formatter: function (params) {
            //根据业务自己拓展要显示的内容
            var res = "";
            var name = params.name;
            var value = params.value[params.seriesIndex + 1];
            res =
              "<span style='color:#fff;'>" +
                name +
                "</span><br/>数据：" +
                value || 0;
            return res;
          },
        },
        geo: {
          map: "china",
          zoom: 1.2,
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: false, //是否允许缩放
          itemStyle: {
            normal: {
              color: "rgba(51, 69, 89, .5)", //地图背景色
              borderColor: "#516a89", //省市边界线00fcff 516a89
              borderWidth: 1,
            },
            emphasis: {
              color: "rgba(37, 43, 61, .5)", //悬浮背景
            },
          },
        },
        series: series,
      };
      this.chart.setOption(option);
    },
  },
};
</script>

背景变色

image-20221030183301848 

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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "@/assets/utils/resize.js";
import "@/assets/utils/china.js";

export default {
  name: "BarChart",
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    title: {
      type: String,
      default: "",
    },
    chartData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: function () {
      this.initChart();
    },
  },
  async mounted() {
    await this.$nextTick();
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$el);
      }

      let dataList = [
        {
          name: "重庆",
          value: 347,
        },
        {
          name: "浙江",
          value: 59,
        },
        {
          name: "云南",
          value: 115,
        },
        {
          name: "新疆维吾尔自治区",
          value: 45,
        },
        {
          name: "香港",
          value: 81,
        },
        {
          name: "西藏自治区",
          value: 5,
        },
        {
          name: "天津",
          value: 121,
        },
        {
          name: "四川",
          value: 23,
        },
        {
          name: "上海",
          value: 1140,
        },
        {
          name: "陕西",
          value: 143,
        },
        {
          name: "山西",
          value: 77,
        },
        {
          name: "山东",
          value: 209,
        },
        {
          name: "青海",
          value: 3,
        },
        {
          name: "宁夏回族自治区",
          value: 1,
        },
        {
          name: "内蒙古自治区",
          value: 7,
        },
        {
          name: "辽宁",
          value: 386,
        },
        {
          name: "江西",
          value: 67,
        },
        {
          name: "江苏",
          value: 464,
        },
        {
          name: "湖南",
          value: 6,
        },
        {
          name: "湖北",
          value: 614,
        },
        {
          name: "黑龙江",
          value: 53,
        },
        {
          name: "河南",
          value: 140,
        },
        {
          name: "河北",
          value: 190,
        },
        {
          name: "海南",
          value: 24,
        },
        {
          name: "贵州",
          value: 2,
        },
        {
          name: "广西壮族自治区",
          value: 77,
        },
        {
          name: "广东",
          value: 449,
        },
        {
          name: "甘肃",
          value: 7,
        },
        {
          name: "福建",
          value: 23,
        },
        {
          name: "北京",
          value: 603,
        },
        {
          name: "安徽",
          value: 29,
        },
      ];

      let option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            if (params.value.length > 1) {
              return "&nbsp;&nbsp;" + params.name + "：" + params.value[2];
            } else {
              return "&nbsp;&nbsp;" + params.name + "：" + (params.value || 0);
            }
          },
        },
        visualMap: {
          show: false,

          seriesIndex: [0],
          inRange: {
            color: ["#A5DCF4", "#006edd"],
          },
        },
        geo: {
          map: "china",
          zoom: 1.2,
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: false,
            },
          },
          layoutSize: "100%",
          itemStyle: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 2,
              shadowColor: "rgba(10,76,139,1)",
              shadowOffsetY: 0,
              shadowBlur: 60,
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            aspectScale: 0.75,
            zoom: 1.2,
            label: {
              normal: {
                show: true,
                color: "#4dccff",
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#073684", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#061E3D", // 100% 处的颜色
                    },
                  ],
                },
                borderColor: "#215495",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#061E3D",
              },
            },
            data: dataList,
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>