Echarts地图自定义颜色

// 模拟数据
let data = [
  {"name": "台湾","value": 20000},
              {"name": "河北", "value": 2000},
              {"name": "山西", "value": 2000},
              {"name": "内蒙古", "value": 2000},
              {"name": "辽宁", "value": 2000},
              {"name": "吉林", "value": 2000},
              {"name": "黑龙江", "value": 0},
              {"name": "江苏", "value": 10000},
              {"name": "浙江", "value": 10000},
              {"name": "安徽", "value": 10000},
              {"name": "福建", "value": 6500},
              {"name": "江西", "value": 6500},
              {"name": "山东", "value": 6500},
              {"name": "河南", "value": 6500},
              {"name": "湖北", "value": 1500},
              {"name": "湖南", "value": 100},
              {"name": "广东", "value": 20000},
              {"name": "广西", "value": 1500},
              {"name": "海南", "value": 1000},
              {"name": "四川", "value": 3000},
              {"name": "贵州", "value": 3000},
              {"name": "云南", "value": 3000},
              {"name": "西藏", "value": 3000},
              {"name": "陕西", "value": 100},
              {"name": "甘肃", "value": 5000},
              {"name": "青海", "value": 2000},
              {"name": "宁夏", "value": 2000},
              {"name": "新疆", "value": 2000},
              {"name": "北京", "value": 2000},
              {"name": "天津", "value": 2000},
              {"name": "上海", "value": 2000},
              {"name": "重庆", "value": 200},
              {"name": "香港", "value": 200},
              {"name": "澳门", "value": 200},
              {"name": "南海诸岛", "value": 15000} 
]

通过visualMap设置，设置visualMap中的min最小值、max最大值、color颜色值，echart会根据value数值自动匹配对应颜色

let optionMap = {
          tooltip: {
            formatter: '{a}
{b}: {c}人'
          },
          visualMap: {
            min: 0, // 最小值
            max: 20000, // 最大值
            text: ['20000', '0'],
            realtime: false,
            calculable: false,
            inRange: {
              color: ['#e6f7ff', '#1890FF','#0050b3'] // 渐变颜色
            }
          },
          series: [{
            name: '用户分布',
            type: 'map',
            mapType: 'china',
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: false, //显示省份标签
                textStyle: {
                  color: "#fff"
                } //省份标签字体颜色
              },
              emphasis: { //对应的鼠标悬浮效果
                show: true,
                textStyle: {
                  color: "#000"
                }
              }
            },
            aspectScale: 0.75,
            zoom: 1.2,
            itemStyle: {
              normal: {
                borderWidth: .5, //区域边框宽度
                borderColor: '#fff', //区域边框颜色
//                areaColor: "#ffefd5", //区域颜色
              },
              emphasis: {
                borderWidth: .5,
                borderColor: '#000',
                areaColor: "#fff",
              }
            },
            data:  data
          }],//各省地图颜色数据依赖value
        }

1

一个是dataRange，在splitList数据中的加入对应的color即可（{"name": "南海诸岛", "value": 15000,color: '#cfc5de'}）

        let optionMap = {
          tooltip: {
            formatter: '{a}
{b}: {c}人'
          },
          series: [{
            name: '用户分布',
            type: 'map',
            mapType: 'china',
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: false, //显示省份标签
                textStyle: {
                  color: "#fff"
                } //省份标签字体颜色
              },
              emphasis: { //对应的鼠标悬浮效果
                show: true,
                textStyle: {
                  color: "#000"
                }
              }
            },
            aspectScale: 0.75,
            zoom: 1.2,
            itemStyle: {
              normal: {
                borderWidth: .5, //区域边框宽度
                borderColor: '#fff', //区域边框颜色
//                areaColor: "#ffefd5", //区域颜色
              },
              emphasis: {
                borderWidth: .5,
                borderColor: '#000',
                areaColor: "#fff",
              }
            },
            data: data.map.seriesData //各省地图颜色数据依赖value
          }],
          dataRange: {
            x: '-1000 px', //图例横轴位置
            y: '-1000 px', //图例纵轴位置
            splitList: data //各省地图颜色，在data中插入对应的color即可 {"name": "南海诸岛", "value": 15000,color: '#cfc5de'} color：自定义颜色值

          },
        }

2