【图表利剑】开发复杂Echarts时，visualMap视觉组件中属性seriesIndex必须用起来

一、背景

据说90%的可视化是用Echarts开发，没错，笔者也没例外，在新的开发项目中，遇到了这个开发神器Echarts，想要的功能就是在省份上显示动态效果图，比如涟漪。原来的功能已有范围视觉组件visualMap。

二、需求明确

在已有的地图组件中完成涟漪的开发，开发之前例行动作，看看别人怎么开发的 😃 。
结果就是大同小异，地图用GEO类型，然后需要的地理位置添加effectScatter类型组件。

三、开发步骤

1. 整改原来的地图为geo类型

 geo: {
          // 引入数据名
          map: 'china',
          show: true,
          // 关闭拖拽
          roam: true,
          zoom: 1.7,
          label: {
            show: true,
            // position: ['50%', '50%'],
            position: 'left',
            distance: 100,
            offset: [-3000, -100],
            color: '#f1e3e3',
            align: 'left'
          },
          // 组件距离容器的距离
          top: '50'
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2. 添加多个series初始配置

   {
            name: '项目数据',
            // 将项目数据和第0个geo配置关联在一起
            geoIndex: 0,
            type: 'map',
            zlevel: 20
          },
          {
            name: '严重告警',
            // 配置散点的坐标数据
            type: 'effectScatter',
            colorBy: 'data',
            // visualMap: false,
            // 指明涟漪使用的坐标系统 geo的坐标系统
            coordinateSystem: 'geo',
            symbol: 'circle',
            // 图例大小
            symbolSize: 8,
            // 设置涟漪动画缩放的比例
            rippleEffect: {
              scale: 5,
              brushType: 'stroke'
            },
            zlevel: 10
          }],
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

3. 测试涟漪数据

  const dataOption = {
          series: [
            {
              data: originalMapData
            },
            {
              data: [
                {
                  name: '上海',
                  value: [121.47, 31.26]

                },
                {
                  name: '北京',
                  value: [116.405285, 39.904989]
                },
                {
                  name: '四川',
                  value: [104.065735, 30.659462]
                },
                {
                  name: '青海',
                  value: [97.180921, 35.802832]
                }
              ],
              color: '#174c68'
            }

          ]
 }
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

四、结果

翻车了。😦

1. 首先出现的是无涟漪效果，怀疑是地理位置没给对，几个对比下来发现没问
2. 上海位置的涟漪出现了，各种排查，现象是有项目的未出现涟漪，没有项目出现涟漪，怀疑是视觉组件覆盖了
3. 更改了各自的在zlevel，依旧没有效果，索性不改了，改改颜色吧
4. 颜色也改不动，感觉被限制了
5. 决定换个视觉组件类型，原来的是分段型，改为连续型试试
6. 换颜色也不行，搜各种资源，发现有说seriesIndex属性要配置为geo数据属性，不配置的话，会覆盖其它组件的样式
7. 终于它来了，出现了
   

五、visualMap配置项

visualMap: [
          {
            type: 'piecewise',
            bottom: 10,
            // min: 0,
            // max: 200,
            pieces: [
              { gte: 40, label: '40个以上' }, // 不指定 max，表示 max 为无限大（Infinity）。
              { gte: 30, lte: 39, label: '30-39个' },
              { gte: 20, lte: 29, label: '20-29个' },
              { gte: 10, lte: 19, label: '10-19个' },
              { gte: 4, lte: 9, label: '4-9个' },
              { lte: 3, label: '1-3个' } // 不指定 min，表示 min 为无限大（-Infinity）。
            ],
            inRange: {
              // 渐变颜色，从小到大
              color: [
                '#8abcd1',
                '#5cb3cc',
                '#66a9c9',
                '#2f90b9',
                '#1781b5',
                '#176287'
              ]
            },
            // 颜色的设置  dataRange
            textStyle: {
              fontSize: this.screenHeight / 60
            },
            splitList: [
              { start: 0, end: 150000 }
            ],
            // color: ['rgb(50,88,124)'],
            zlevel: 10,
            // 保证不覆盖其它样式,包含涟漪效果
            seriesIndex: 0
          }
        ],
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