ECharts

<div id="map" style="width: 1000px; height: 800px"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script>
    //...
</script>

 
function createMap(el, mapdata, mapcode) {
 
	// 生成随机数据
	echarts.registerMap(mapcode, geoJson);
 
  let data = [];
  geoJson.features.forEach((f) => {
      if (f.properties.name) {
          data.push({
              name,
              value: Math.random() * 100,
          });
      }
  });
 
  // 配置项
  var option = {
      title: {
          text: "地图示例",
          left: "center",
      },
      tooltip: {
          trigger: "item",
          formatter: "{b}<br/>数值：{c}",
      },
      visualMap: {
          left: "right",
          min: 0,
          max: 1000,
          text: ["高", "低"],
          calculable: true,
          inRange: {
              color: [
                  "#e0f3f8",
                  "#abd9e9",
                  "#74add1",
                  "#4575b4",
                  "#313695",
              ],
          },
      },
      series: [
          {
              type: "map",
              map: mapcode, // 对应注册的地图名称
              roam: true, // 允许缩放拖动
              label: {
                  show: true,
                  fontSize: 12,
              },
              emphasis: {
                  label: {
                      show: true,
                      color: "#333",
                  },
                  itemStyle: {
                      areaColor: "#ffd700",
                  },
              },
              // 模拟数据
              data: data,
          },
      ],
  };
 
  myChart.setOption(option);
}
 
 
fetch('https://geojson.cn/api/china/china.json')
    .then(response => response.json())
    .then(mapdata => {
        createMap(
            document.querySelector('#map'),
            mapdata,
            'china'
        )
    });