vue2+echarts实现地图效果

前言--用vue2结合echarts实现一个地图的效果。之前用echarts都是直接从官网上找示例然后复制粘贴，改改配置就直接用了，但是前段时间的大屏任务需要制作3D地图，由于没有示例并且内容比较繁琐在，所以自己还是摸索了一下如何制作。这一期先分享如何用vue和echarts实现一个地图，最终效果图如下

大家有需要源码的可以去Gitee上面下载,后续会持续更新实现3D效果。

https://gitee.com/guoJunJia/vue-charts-implement-maps.git

老样子，按照惯例，去官网找示例，但是地图的示例很粗糙 ，所以这里就一步一步的来构建自己的基础地图。

首先肯定就是基础部分，先创建一个容器，来容纳我们的地图

<div ref="chart" style="width:900px;height:600px; "/>

    
接着就是将我们自己的容器初始化成为一个echarts的容器，这样才能在容器中显示echarts图表。这里我们需要使用echarts库提供的一些实例和方法。使用前需要下载echarts库

npm install echarts --save

import * as echarts from 'echarts';

// 在mounted函数中书写
const myChart = echarts.init(this.$refs.chart);

在书写具体代码之前，我们需要自己准备一个地图的JSON文件，为构建想要的地图做准备。这里给大家提供一个链接，可以去下载各市区的JSON文件。当然如果自己有其他好的途径也可以，JSON文件都大差不大。

http://<https://hxkj.vip/demo/echartsMap/>

这里我以荆州的JSON为例来构建地图。获取到的JSON文件保存下来，使用的时候必须使用echarts的registerMap方法进行注册，否则是不能用的。传入两个参数，第一个是你后续在配置项中给map 的名称，第二个是你的JSON文件。

import jingzhouMap from "./jingzhouMap.json";


// 在mounted函数中书写
echarts.registerMap("jingzhouMap", jingzhouMap);