【删繁就简】Echarts 视觉映射组件中国地图分段颜色显示，选中范围内外颜色设置策略

【删繁就简】Echarts 视觉映射组件中国地图分段颜色显示，选中范围内外颜色设置策略

• 一、背景
• 二、增加0值分段配置项
• 三、解决方案
• • 3.1 更改地图底色
  • 3.2 更改`outOfRange`配置项

一、背景

在前端项目开发过程中，需要在大屏模块模块中按照项目在各省份分部的数量进行可视化显示，该功能对应Echarts的视觉映射组件VisualMap，设置完成后，出现的效果如图所示。当项目量为0的省份是透明的。

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个' },
              { gte: 1, lte: 3,  label: '1-3个' },
            ],
            inRange: {
              // 渐变颜色，从小到大
              color: [
                '#a3cbdf',
                '#85bad4',
                '#66a9c9',
                '#5c98b5',
                '#47768d',
                '#176287'
              ]
            },
            // 颜色的设置  dataRange
            textStyle: {
              fontSize: this.screenHeight / 60
            },
            splitList: [
              { start: 0, end: 150000 }
            ],
            // color: ['rgb(50,88,124)'],
            zlevel: 10,
            // 保证不覆盖其它样式,包含涟漪效果
            seriesIndex: 0
          }
        ],

二、增加0值分段配置项

pieces属性增加0值范围后，inRange属性对应颜色序列也要新增一条，出现如下图所示的结果。==“暂无”==的出现甲方并不满意，因此能不能把这一条隐藏掉，同时颜色并不改变。

VisualMap配置如下：

 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个' },
     { gte: 1, lte: 3,  label: '1-3个' },
   ],
    inRange: {
     // 渐变颜色，从小到大
     color: [
       '#b3d7f1',
       '#a3cbdf',
       '#85bad4',
       '#66a9c9',
       '#5c98b5',
       '#47768d',
       '#176287'
     ]
   },

三、解决方案

3.1 更改地图底色

在官方文档中未找到该配置项，直接Pass。

3.2 更改outOfRange配置项

OK，该配置项至关重要，也对应着解决甲方客户问题，官方文档链接，该配置项outOfRange是 定义 在选中范围外 的视觉元素。和inRange配置项正好对应。在选中范围内的颜色就跟着inRange配置走，不在选中范围内的跟着outOfRange配置项走，因为0不在我们定义的范围内，颜色就跟着outOfRange配置项走。、

效果如图所示。