使用Echarts绘制geo地图（案例）

使用Echarts绘制geo地图（案例）

项目使用@vue/cli 4.5.13以及echarts版本为5.1.2。
需求：在省份地图上，将数据进行分段映射。如图：

首先下载geojson数据

链接: http://datav.aliyun.com/tools/atlas/index.html#&lat=33.521903996156105&lng=104.29849999999999&zoom=3
在左侧点击所选择的区域，勾选是否包含子区域（是否显示各个市区域），然后直接下载即可。

下载后我将文件放入了libs文件夹下，并用export default输出：

接下来就是mapEcharts组件的基本代码

<template>
  <div class="map" ref="mapChart"></div>
</template>
<script>
//引入geo数据
import zjData from "libs/china-zj";

export default {
   
  methods: {
   
  	initMapChart() {
   
      const el = this.$refs.mapChart;
      const echarts = require("echarts");
      const myChart = echarts.init(el);
      echarts.registerMap("zj", zjData);
      
	  const option = {
   
      //这里渲染地图
	  }
	  
      myChart.setOption(option);
      window.addEventListener("resize", function () {
   
        myChart.resize();
      });
    },
  },
  mounted() {
   
     this.initMapChart();
  },
};
</script>

<style lang="less" scoped>
.map {
   
  width: 100%;
  height: 100%;