开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

实现效果

实现前提

1. 中国各省份的geojson数据（geojson是一种描述地理位置的数据格式,可以理解为将地理位置信息按规定写成json格式的数据)。具体解释 geojson
2. 关联数据，见实现步骤4
3. echarts

实现步骤

1. 引入echarts,这里使用的是5.4.0版本
2. 初始化echarts实例,后面称为eInstance（echarts初始化时需要绑定一个给定大小的dom）

const geoDom = document.querySelector(".geo");
const eInstance = echarts.init(geoDom);

3. 使用echarts的registerMap方法注册地图数据，如

echarts.registerMap("china", {
  geoJSON: chinaJSON, //其中china为自定义的地图名，chinaJSON为中国各省份的geojson数据
});

此时地图还不会出来，需要进行步骤4

4. 调用eInstance中的setOption方法，如

     eInstance.setOption({
          series: [
            {
              type: "map",
              map: "china", //这里即步骤三中我们自定义的地图名
              data: chinaPeopleJSON, //这里为关联，数据结构为形如[{name: '广东',value: 126012510}]
              roam: true,
              label: {
                show: true,
                formatter: "{b} {@value}",
                fontSize: 10,
              },
            },
          ],
        });

ps: data参数数据结构可以参考文档 echarts series文档 经过步骤4一个基本的人口分布地图就出来了

5. 为了有清晰的视觉效果，我们可以使用visualMap组件，具体设置如下

 visualMap: [
    {
      type: "continuous",
      // show: false, //设置是否显示左侧控制组件
      min: 0,
      max: 126012510,
      calculable: true,
      text: ["多", "少"],
      // hoverLink: false, //选中地图区域左侧组件映射对应数值
      // inRange: {
      //   color: ["#f6efa6", "#d88273", "#bf444c"], // 默认的取色值
      // },//设置选中范围的颜色值等
      top: "middle",
      formatter: "{value}", //可以格式化最高值和最低值,此处{value}表示边界值
    },
],

一些参数的解释已经写在代码中了，大家还有什么不明白的可以参考文档 echarts visualMap文档 做到这一步大家就可以得到实现效果中的地图了！ 下面附上完成的setOption代码

eInstance.setOption({
  title: {
    text: "",
    left: "center",
  },
  visualMap: [
    {
      type: "continuous",
      // show: false, //设置是否显示左侧控制组件
      min: 0,
      max: 126012510,
      calculable: true,
      text: ["多", "少"],
      // hoverLink: false, //选中地图区域左侧组件映射对应数值
      // inRange: {
      //   color: ["#f6efa6", "#d88273", "#bf444c"], // 默认的取色值
      // },//设置选中范围的颜色值等
      top: "middle",
      formatter: "{value}", //可以格式化最高值和最低值,此处{value}表示边界值
    },
  ],
  series: [
    {
      type: "map",
      map: "china",
      data: chinaPeopleJSON,
      roam: true,
      label: {
        show: true,
        formatter: "{b} {@value}",
        fontSize: 10,
      },
    },
  ],
});