Echarts地图绘制(详细版包教会，可绘制全国所有省份和市区地图

本文链接：https://blog.youkuaiyun.com/qq_62188992/article/details/132699736

本文介绍了如何通过下载echarts.js库，获取阿里云DataV的JSON数据，将其转换为JavaScript格式，并在HTML中创建地图图表，展示如延安市宝塔区等区域的数据。最后，展示了如何将动态数据绑定到地图上，实现实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里我就以延安市为例

效果图:

1.下载echarts.js文件。

先去gitHub把echarts.js下载

是echarts.js不是echarts.min.js

echarts.min.js是经过压缩和精简处理的版本，不支持自定义图表属性(百度的

echarts/dist at master · apache/echarts · GitHub

2.去阿里云数据可视化平台生成你要生成的国家、省份、市区的JSON数据。

DataV.GeoAtlas地理小工具系列 (aliyun.com)

2.1进去之后在范围选择器点击你想要的区域地图，左侧会生成JSON的url。

2.2复制后在浏览器打开。

啃臭＋a，啃臭＋c。

2.3将JSON格式转换成Js格式。

在线JSON转JS对象工具 - UU在线工具 (uutool.cn)

并给生成的数据复制到一个变量，建议为你选择区域的拼音

啃臭＋a，啃臭＋c。

2.5新建一个(区域名).js后缀的文件，打开将转换后的js数据啃臭＋v。

3.测试，新建一个demo项目。将两个js文件放到js目录下，如何新建一个Html文件。

3.1 在Html引入两个js文件。

3.2 可以粘贴以下代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #main{
      width:400px;
      height:400px;
      border:5px solid #50d9d7;
    }
    #popup {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.8);
      padding: 10px;
      border-radius: 5px;
      display: none;
    }
  </style>
</head>
<body>
<div id="main"></div>
<div id="popup"></div>
</body>
</html>
<script src="js/echarts.js"></script>
<script src="js/yanan.js"></script>
<script type="text/javascript">
  var mapChatDate=yanan;//使用延安.js中的变量
  echarts.registerMap('yanan', mapChatDate);
  var chart = echarts.init(document.getElementById('main'));
  var dataMap = [
    { name: '宝塔区' }
  option={
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        return params.name + '景点数量: ' + params.value;
      },
      backgroundColor: "#f8f8f8", //提示标签背景颜色
      textStyle: {color: "#f65555"}, //提示标签字体颜色
    },
    visualMap: {
      show: true,
      bottom: 60,
      right: 0,
      text: ["高", "低"],
      min:0,
      max: 100,
      //   precision:0,
      itemHeight: 100,
      color: [
        "#0cccd3",
        "#45d2f6",
        "#a5dcea",
      ],
    },
    series: [{
      type: 'map',
      map: 'yanan',
      itemStyle: {
        normal: { label: { show: true } },
        emphasis: {
          label: { show: true, fontSize: 20 }, // 悬浮时地区名称放大
          borderWidth: 2,        // 悬停时的边框宽度
          shadowBlur: 20,
          shadowColor: "rgba(0, 0, 0, 0.5)",
          borderColor: "#fff",
          areaColor: "#7cf1de",
        }
      },
      label: {
        normal: {
          textStyle: {
            fontSize: 6,
            // fontWeight: 'bold',
            color: 'black'
          }
        }
      },

      data: [
        { name: '宝塔区' ,value : 102}
      ]
    }]
  }
</script>

4.代码修改。

4.1修改变量名。

这里是2.3自定义的var。

4.2 修改数据绑定。

这里的name就是生成的区域的下一级目录，生成中国那么name就是各省份名，同理生成市，name就是各区的名字，可以查看js文件，名字要对应上。

value就是一些你自定义的数据。

5.整合到自己项目中。

可以将代码整合到你项目中的方法中，将后端返回的list、hashmap数据与地图的data进行绑定，就可以实现动态刷新数据了。

参考:

        const pieData = [];
        for (let i = 0;i < response.data.length;i++) {
          const value = response.data[i].avgMon;
          const key = response.data[i].proname;
          pieData.push({ value, name: key });
        }