使用eacharts画行政区域规划图

用 Echarts 无论是制作省份地图还是区县域地图，他们的步骤都是基本一样的。

下面就利用 Echarts 简单绘制省份地图的步骤与经验与各位分享一下。

![](https://cdn.nlark.com/yuque/0/2024/png/27022430/1713511104993-e973c846-fd56-4cfb-a732-a9779e788c8e.png)

1、准备工作

1.1 下载 js 静态文件
- china.js - echarts.min.js

1.2 下载中国各省、各市的 .json 文件
- 省份或者地区的数据文件 - 网址：https://github.com/longwosion/geojson-map-china

2、获取省份数据

2.1 第一步：获取 XX 省的地图 json 数据文件（例：河南省）（是以各省身份证号前两位开头命名的）
2.2 第二步：将获取到的 JSON 文件转换成 js 文件（河南省：henan.js）
2.3 第三步：修改转换后的 js 文件 - 打开 js 文件 - 添加变量 xx (这里命名习惯为：（省名拼音小写+Json）例：henanJson)
_ var xx = (js 文件)
_ 例：
var henanJson = {“type”: “FeatureCollection”,
“cp”:[118.8586,32.915],
……..
}

- <font style="color:rgb(25, 27, 31);">保存 js 文件</font>

3、编写 HTML 代码

3.1 在中引入 js 文件

1 2	<script type="text/javascript" src="/static/js/echarts.min.js"></script> <script type="text/javascript" src="/static/js/henan.js"></script>

3.2 在中写入作图代码

<div>
    {# 标记 #}
     <a class="btn btn-success btn-sm" >江苏省</a>
    {# 地图代码开始 #}
     <div class="x-body">
         <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
         <div id="main" style="width: 949.75px;height:450px;"></div>
     </div>

      <script type="text/javascript">
               echarts.registerMap('henan', henanJson);

               // 基于准备好的dom，初始化echarts实例
               var myChart = echarts.init(document.getElementById('main'));

               var option = {
                      title: {
                          text: '',
                          left: 'center'
                      },
                      tooltip: {
                          trigger: 'item'
                      },
                      series: [
                          {
                              name: '河南省',
                              type: 'map',
                              mapType: '河南省',
                              roam: true, // 是否开启鼠标缩放和平移漫游
                              label: {
                                  show: true // 显示省份名称
                              },
                              data: [
                                  // 这里可以添加数据，例如：
                                   {name: '卫滨区', selected: true},
                                   //{name: '开封市', value: 200},
                                  // ...
                              ]
                          }
                      ]
                  };
            myChart.setOption(option);
       </script>
</div>