Echart系列 | 绘制世界地图含中国各个省份（地图篇）（一）

步骤一

先绘制一张世界地图，这一步为基础工程，代码+效果图附下：

world.json 链接：https://pan.baidu.com/s/1-fLTbzm2JWTdh7c98q-jPQ 提取码：oe9w 

<template>
  <div class="content">
    <!-- 设置容器ID，宽度1920PX，高度1080PX -->    
    <div id="myEchart" style="width:1920px; height:1080px;"></div>
  </div>
</template>

<script>
import $ from "jquery";/* 引入JQUERY，此处不赘述，用于调用$.get函数。 */
var echarts = require("echarts");/* 引入echarts模块，此处不赘述 */

export default {
  data() {
    return {
      myChart: undefined,/* 定义变量 */
    };
  },
  mounted() {
    $.get('../static/world.json', function (geoJson) {/* 请求世界地图的本地json数据 */
      this.myChart = echarts.init(document.getElementById('myEchart'));/* 初始画布 */
      echarts.registerMap('world', geoJson);/* 注册world地图 */
      this.myChart.setOption({/* 设置myChart配置项 */
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        series: [
          {
            type: 'map',
            mapType: 'world', // 自定义扩展图表类型
            itemStyle: {
              normal: { label: { show: true } }, // 普通状态下，显示标签
              emphasis: { label: { show: true } } // 高亮状态下，显示标签（默认）
            },
            roam: true, // 放大缩小、平移
          }
        ]
      })
    })
  },
};
</script>

步骤二

网络上搜到一份中国省份的json文件，https://zcreturn0.github.io/echarts-map/json/china.js，提取里面的内容拷贝到世界地图json文件中。注意的点有：将省份当做国家处理，观察两份JSON结构的格式。

看一下效果：为了方便看结构，这里将普通状态下的标签先注释了，为了大家不被密密麻麻的文字看到眼花

步骤三

最后微调下，将世界json中的China部分删除即可（因为各省份已经拼成一个中国了，可以把China部分删除，如果你不想删除，也是可以。）

经过上述操作后，完整的地图JSON出来了：https://pan.baidu.com/s/1-fLTbzm2JWTdh7c98q-jPQ 提取码：oe9w