话不多说先上图

主要根据regions这个属性，对区域做不同的样式处理

核心代码：options.geo.regions

开始上代码：

1. 首先设置地图的数据，从接口获取或者本地静态设置都可，这里我用的是vue3的语法
2. 地图json数据
3. 配置options

// 地图数据
const mapData = ref([
  { name: '温州市(本级)', value: [120.65523, 28.01469], count: 0.1 },
  { name: '乐清市', value: [120.98338, 28.11289], count: 0 },
  { name: '瑞安市', value: [120.45518, 27.87838], count: 0.15 },
  { name: '龙港市', value: [120.596024, 27.561398], count: 0.2 },
  { name: '永嘉县', value: [120.651152, 28.20921], count: 0.25 },
  { name: '苍南县', value: [120.478435, 27.416398], count: 0.3 },
  { name: '平阳县', value: [120.46595, 27.6621], count: 0.35 },
  { name: '文成县', value: [120.077944, 27.862732], count: 0.4 },
  { name: '泰顺县', value: [119.887386, 27.650897], count: 0.239 },
  { name: '洞头区', value: [121.067535, 27.872822], count: 0.24 },
])

// 地图配置，主要是geo.regions这个属性，返回的对象属性name对应mapData数据里的name，也对应地图渲染的json数据中的name
const mapOptions = computed(() => {
  return {
    geo: {
      map: 'wenzhou',
      regions: mapData.value.map((area) => {
        return {
          name: area.name,
          itemStyle: {
            areaColor: getAreaColorByValue(area.count),
          },
        }
      }),
    },
    
  }
})

// 获取地图数据区域对应的颜色
function getAreaColorByValue(areaCount) {
  let color = ''
  if (areaCount > 0 && areaCount <= 0.164) {
    color = '#91cc75' // 绿色
  } else if (areaCount > 0.164 && areaCount <= 0.239) {
    color = '#003298' // 蓝色
  } else if (areaCount > 0.239) {
    color = '#fac858' // 橙色
  } else {
    color = '#003298'
  }
  return color
}