Echarts 设置visualMap.inRange后，解决地图颜色显示不全的问题

一、当前遇到的问题

1.1、需求：使用 Echarts 绘制中国地图，通过每个省份的 value 值不同，用渐变色区分

 

2.2、查询 Echarts 官方API，通过设置属性 visualMap.pieces 和 visualMap.inRange ，即可显示渐变色的地区

 

2.3、但是呢，效果总是不尽人意，本项目中设置的颜色都是蓝色系列，可是数据渲染出现，偶尔会有几个省份会出现白色（即颜色显示不全）

• 此时设置的 visualMap.pieces 和 visualMap.inRange  值如下

visualMap: {
    pieces: [      // 自定义每一段的范围，以及每一段的文字
      { gte: 10000, label: '10000人以上'}, // 不指定 max，表示 max 为无限大（Infinity）。
      { gte: 1000, lte: 9999, label: '1000-9999人'},
      { gte: 500, lte: 999, label: '500-999人'},
      { gte: 100, lte: 499, label: '100-499人'},
      { gte: 10, lte: 99, label: '10-99人'},
      { lte: 9, label: '1-9人'}          // 不指定 min，表示 min 为无限大（-Infinity）。
    ],
    inRange: {
       // 渐变颜色，从小到大
       color: ['#d1d4da', '#bacae8', '#96b5ef', '#6797ef', '#3375e4', '#035cf5']
    }
}

 

• 效果图如下，此处“重庆”、“河北”等地就是白色，效果不应该是这样滴！！！

 

 

 

二、解决办法

2.1、只设置属性 visualMap.pieces ，并且单独设置图元 color 属性，即在定义每段范围的同时，增加对应的颜色属性；代替在属性 visualMap.inRange 设置颜色

 

2.2、原因感觉是属性 "visualMap.inRange" 不能够精确到每个范围，反正通过本人测试，一般出现白色的区域（即颜色显示不全的地区）值都在 "400 - 499"

 

2.3、最终 visualMap 属性设置如下

visualMap: {
      // 左下角定义 在选中范围中的视觉元素 渐变地区颜色
      type: 'piecewise', // 类型为分段型
      top: "bottom",
      right: 10,
      splitNumber: 6,
      seriesIndex: [0],
      itemWidth: 20, // 每个图元的宽度
      itemGap: 2,    // 每两个图元之间的间隔距离，单位为px
      pieces: [      // 自定义每一段的范围，以及每一段的文字
        { gte: 10000, label: '10000人以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
        { gte: 1000, lte: 9999, label: '1000-9999人', color: '#3375e4' },
        { gte: 500, lte: 999, label: '500-999人', color: '#6797ef' },
        { gte: 100, lte: 499, label: '100-499人', color: '#96b5ef' },
        { gte: 10, lte: 99, label: '10-99人', color: '#bacae8' },
        { lte: 9, label: '1-9人', color: '#d1d4da' }          // 不指定 min，表示 min 为无限大（-Infinity）。
      ]
      textStyle: {
        color: '#737373'
      }
    }

 

2.4、此时地图渐变色显示正常了，效果图如下

 

 

写给自己的随笔，有问题欢迎指出(*^▽^*)