echarts-地图自定义颜色

utils方法

const _list = [{
    name: "北京市",
    adcode: "110000"
  },
  {
    name: "天津市",
    adcode: "120000"
  },
  {
    name: "河北省",
    adcode: "130000"
  },
  {
    name: "山西省",
    adcode: "140000"
  },
  {
    name: "内蒙古自治区",
    adcode: "150000"
  },
  {
    name: "辽宁省",
    adcode: "210000"
  },
  {
    name: "吉林省",
    adcode: "220000"
  },
  {
    name: "黑龙江省",
    adcode: "230000"
  },
  {
    name: "上海市",
    adcode: "310000"
  },
  {
    name: "江苏省",
    adcode: "320000"
  },
  {
    name: "浙江省",
    adcode: "330000"
  },
  {
    name: "安徽省",
    adcode: "340000"
  },
  {
    name: "福建省",
    adcode: "350000"
  },
  {
    name: "江西省",
    adcode: "360000"
  },
  {
    name: "山东省",
    adcode: "370000"
  },
  {
    name: "河南省",
    adcode: "410000"
  },
  {
    name: "湖北省",
    adcode: "420000"
  },
  {
    name: "湖南省",
    adcode: "430000"
  },
  {
    name: "广东省",
    adcode: "440000"
  },
  {
    name: "广西壮族自治区",
    adcode: "450000"
  },
  {
    name: "海南省",
    adcode: "460000"
  },
  {
    name: "重庆市",
    adcode: "500000"
  },
  {
    name: "四川省",
    adcode: "510000"
  },
  {
    name: "贵州省",
    adcode: "520000"
  },
  {
    name: "云南省",
    adcode: "530000"
  },
  {
    name: "西藏自治区",
    adcode: "540000"
  },
  {
    name: "陕西省",
    adcode: "610000"
  },
  {
    name: "甘肃省",
    adcode: "620000"
  },
  {
    name: "青海省",
    adcode: "630000"
  },
  {
    name: "宁夏回族自治区",
    adcode: "640000"
  },
  {
    name: "新疆维吾尔自治区",
    adcode: "650000"
  },
  {
    name: "台湾省",
    adcode: "710000"
  },
  {
    name: "香港特别行政区",
    adcode: "810000"
  },
  {
    name: "澳门特别行政区",
    adcode: "820000"
  }
];

export const mapRender = (domID, data, percent = false, mapName = "china") => {
  console.log(data)
  if (data.length == 0) {
    return
  }
  const chartDom = document.getElementById(domID);
  const minV = Math.min.apply(null, data.map(o => o.value));
  const maxV = Math.max.apply(null, data.map(o => o.value));
  if (mapName != "china") {
    echarts.dispose(chartDom);
  }

  let json, type;
  if (mapName == "china") {
    type = "china";
  } else {
    // 动态加载json
    const item = _list.find(o => o.name == mapName);
    if (item) {
      type = `province/${item.adcode}`;
    }
  }

  json = require(`@/utils/geoMapData/${type}.json`);
  echarts.registerMap(mapName, {
    geoJSON: json
  });
  let mapChart = echarts.init(chartDom);
  mapChart.clear();
  mapChart.setOption({
    tooltip: {
      trigger: "item",
      formatter: function ({
        marker,
        name,
        data
      }) {
        let value;
        if (percent) {
          value = `${Number(data?data.value * 100:0).toFixed(2)}%`;
        } else {
          value = data ? data.numOnly ? data.value + (data.unit ? data.unit : '') : Number(data.value).toFixed(2) + (data.unit ? data.unit : '') : 0;
        }
        return `<div>${marker}<span>${name}</span>:<span>${value}</span></div>`;
      }
    },
    visualMap: {
      type: "piecewise",
      left: "center",
      orient: "horizontal",
      itemHeight: 12,
      itemGap: 1,
      min: minV,
      max: maxV,
      text: [percent ? `${Number(maxV * 100).toFixed(2)}%` : data[0].numOnly ? Number(maxV).toFixed(0) : Number(maxV).toFixed(2),
        percent ? `${Number(minV * 100).toFixed(2)}%` : data[0].numOnly ? Number(minV).toFixed(0) : Number(minV).toFixed(2)
      ],
      inRange: {
        symbol: "rect",
        color: ["#224eff", "#8a9efa", "#cab8da", "#c87b8c", "#9f0822"],
      },
    },
    series: [{
      type: "map",
      map: mapName,
      data: data,
      roam: true,
      zoom: 1.2,
    }, ],
  });

  return mapChart;
};