echarts的散点图和中国地图配合使用

热力图，我觉得也是叫散点图，我做的是分散在地图上面的点，主要效果如下：
图是在晚上抄的：

主要配置有几个:
第一个需要配置两个地图属性，即两个series:

    series: [
      {
        // 地图,可以是数组，多个
        label: { // label就是你地图上展示的名字，比如四川，重庆等等
          show: true, //显示省市名称
          position: [1, 100], // 相对的百分比
          fontSize: 12,
          offset: [2, 0], // 是否对文字进行偏移，横向偏移2像素，纵向偏移0
          align: "left", // 文字对齐方式
          color: '#fff',
        },
        itemStyle: {
          areaColor: "#5470c6" // 地图图形颜色
        },
        geoIndex: 0, // 默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件
        type: "map", // 地图类型
        roam: true, // 整个地图能否缩放，拖拽
        map: city, // 地图名字
        zoom: 1.1, // 当前视角的缩放比例
        top: "15%", // 距离顶部距离
        scaleLimit: { // 缩放级别限制
          max: 9,
          min: 1
        },
      }, { // 散点图配置
        type: 'scatter', // 地图类型
        coordinateSystem: 'geo', // 该系列所用的坐标系,geo表示使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
        data: arr, // 数据
        symbolSize: function (val) { // 散点大小分块展示，calculateValue根据你的最大值除以20得出，最后整个散点大小都会在10-20像素
          if (!val) {
            return
          }
          if (val.length === 0 || val.length < 3) {
            return
          }
          if (!val[2]) {
            return
          }
          let value = val?.[2] / calculateValue
          if (value < 12) {
            return 10
          }
          if (value < 14) {
            return 12
          }
          if (value < 16) {
            return 16
          }
          if (value < 18) {
            return 18
          }
          return 20
        },
        tooltip: {
          // 提示框
          trigger: "item", // 触发类型
          showDelay: 0, // 浮层显示延迟
          transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
          formatter: function (params) { // 用来格式化图例文本
            let { data = {} } = params;
            return `${data?.name}设备总数: ${data?.value?.[2]}`;
          }
        },
      }],

然后设置地理坐标系组件geo

    geo: {
      scaleLimit: {
        max: 9,
        min: 1
      },
      map: city,
      roam: true,
      tooltip: {
        show: true
      },
      itemStyle: {
        areaColor: "#5470c6" // 地图图形颜色
      },
      label: {
        show: true, //显示省市名称
        position: [1, 100], // 相对的百分比
        fontSize: 12,
        offset: [2, 0],
        align: "left",
        color: '#fff',
      },
    },

还有一些其他配置，但是我不知道为什么不加这个配置就不得行:

    tooltip: {
      // 提示框
      trigger: "item",
      showDelay: 0,
      transitionDuration: 0.2,
      formatter: function (params) {
        let Count = 0;
        arr.map(item => {
          if(item.name === params.name) {
            Count = item?.value?.[2]
          }
        })
        return `${params.name}<br/>
                    个数: ${Count}`;
      }
    },
    dataset: {
      source: data
    },

完整代码：

export const chinaMapConfig = (configData) => {
  const { data, city, mapData } = configData;
  const arr = []
  const calculatedArr = []; // 获取当前级别里面的设备数量数组
  const foo = (max) => {
    return max / 20
  }  
  for (let i of data) {
    for (let j of mapData?.features) {
      if ((i?.Province && i?.Province?.indexOf(j.properties.name) !== -1)
        || (i?.City && i?.City?.indexOf(j.properties.name) !== -1)
        || (i?.District && i?.District?.indexOf(j.properties.name) !== -1)) {
        arr.push({ value: [...j.properties.center, i.Count], name: j.properties.name }) // 热力图数据
        calculatedArr.push(i.Count)
      }
    }
  }
  calculatedArr.sort((a, b) => b - a)
  const calculateValue = foo(calculatedArr[0])

  const result = {
    tooltip: {
      // 提示框
      trigger: "item",
      showDelay: 0,
      transitionDuration: 0.2,
      formatter: function (params) {
        let Count = 0;
        arr.map(item => {
          if(item.name === params.name) {
            Count = item?.value?.[2]
          }
        })
        return `${params.name}<br/>
                    个数: ${Count}`;
      }
    },
    dataset: {
      source: data
    },
    series: [
      {
        // 地图,可以是数组，多个
        label: {
          show: true, //显示省市名称
          position: [1, 100], // 相对的百分比
          fontSize: 12,
          offset: [2, 0],
          align: "left",
          color: '#fff',
        },
        itemStyle: {
          areaColor: "#5470c6" // 地图图形颜色
        },
        geoIndex: 0,
        type: "map",
        roam: true, // 整个地图能否缩放，拖拽
        map: city,
        zoom: 1.1, // 当前视角的缩放比例
        top: "15%", // 距离顶部距离
        scaleLimit: {
          max: 9,
          min: 1
        },
      }, { // 散点配置
        type: 'scatter',
        coordinateSystem: 'geo',
        data: arr,
        symbolSize: function (val) {
          if (!val) {
            return
          }
          if (val.length === 0 || val.length < 3) {
            return
          }
          if (!val[2]) {
            return
          }
          let value = val?.[2] / calculateValue
          if (value < 12) {
            return 10
          }
          if (value < 14) {
            return 12
          }
          if (value < 16) {
            return 16
          }
          if (value < 18) {
            return 18
          }
          return 20
        },
        tooltip: {
          // 提示框
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
          formatter: function (params) {
            let { data = {} } = params;
            return `${data?.name}设备总数: ${data?.value?.[2]}`;
          }
        },
      }],
    geo: {
      scaleLimit: {
        max: 9,
        min: 1
      },
      map: city,
      roam: true,
      tooltip: {
        show: true
      },
      itemStyle: {
        areaColor: "#5470c6" // 地图图形颜色
      },
      label: {
        show: true, //显示省市名称
        position: [1, 100], // 相对的百分比
        fontSize: 12,
        offset: [2, 0],
        align: "left",
        color: '#fff',
      },
    },
  };
  return result
};