关于Vue+ECharts 地图引用空间文件或GIS(.shp)
效果图：
直接步入主题
GIS 能够让你查看这个 .shp 文件的地图内容，但是我感觉用不用都可以，反正我是没用，因为他在合并的时候我不是很理解，毕竟太过跨越了；
关于引用空间文件
1.首先你需要得到一些 .shp 文件，当然是越轻量级越好；
2.你需要将你得到的空间文件在 这个网站进行转化为geoJSON ；
3.你转换的是geoJSON 但是到手的确实JSON文件，这个不用慌，就是这么的无厘头；
4.如果你得到的是一个JSON文件当然最好，如果是多个你就需要合并了，就像我是的安装了很多插件，但是最后都没成，还是自己手动的合成了一下，但好在不是很多，我只有三个，简单地看了一下应该是 （点、线、面）凑成的三个JSON文件；
5.你得到这个JSON文件你成功了三分之二，剩下的就是echarts的操作了，以上的一些步骤卡了我2天时间，毕竟比较菜鸡，叶很水，当然你看见了我这个文章你就乐吧，稳稳地能帮你把这个需求搞定；
以下是ECharts的操作了
1.你需要将你得到的JSON文件放到你的项目文件中以便引入；
这是一个引入外部JSON文件 在ECharts中有过案例；
把这个写上，这个也是官网的案例；
以上就是我的实现经历 如果大家有更方便的办法请联系我或评论哦 （在将几个JSON文件合并时感觉好尴尬）
在Vue中使用echarts
由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~
我的示例是在vue-cli搭建
首先需要全局引入
在main.js中
在Echarts.vue中
div id="myChart" :style="{width: '300px', height: '300px'}"/div
注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中
这样一个简单的图表就完成了，是不是觉得很简单？假如在一个大型的项目中，而且数据是非常复杂的？那么该如何操作？
由于全局引入会将所有的echarts图表打包，导致体积过大
在Echarts.vue文件中
使用 require 而不是 import
基于前面的疑问，加上实际运用到项目中遇到的一些问题，我思考使用组件的形式。
从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便
vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。
下面是一个我自己对echarts进行的一个简单的vue组件的集成。
在echarts中
子组件：
props部分是我接收到的参数，父组件获取数据分发，data是父组件分发给echarts的数据源。
父组件：
如果在大型的项目，而且图表又非常的多，那么vuex少不了。如果把数据集中存储到了vuex中，echarts组件再从vuex中获取数据，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~
在vue 中使用百度echarts
前言：在vue2.0中使用 百度echarts 有三种解决方案。
这样每次都要获取图表dom元素 然后通过setOption渲染数据，最后在mounted中初始化。很麻烦。
vue-echarts 是ECharts 的 Vue.js 组件，基于 ECharts v4.1.0 + 开发，依赖 Vue.js v2.2.6 +，意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻松使用echarts的所用功能。。。
v-charts 是基于vue2二次封装的图表组件库，功能没有echarts多 但也够用了，官网很详细，这里用一个官网例子说明问题。
以上，可跟据需求选用，如果需求简单可直接用 v-charts
在Vue中将echart封装为可复用组件
首先在项目中安装echarts
npm install echarts --save
1.动态设置id。为什么是动态，id是唯一的，这不用多说吧。
2.引入echarts
const echarts = require('echarts')
3.上面说过了id是唯一的，使用echarts.init这个方法来创建一个 ECharts 实例，返回 echartinstance，不能在单个容器上初始化多个 ECharts 实例,因此需要用到Vue的computed属性来解决这个问题
4.因为把它封装成了一个Vue组件,父子组件之间的通信需要用到props这个属性
5.封装echarts。
6.在Vue的生命周期mounted执行，并且在this.$nextTick里面执行这个方法，保证承若所有的子组件被挂载、能保证通过获取到组件
注意：
在父组件中调用子组件，如果是通过ajax获取的数据，需要在引入组件是判断一下数组或对象是否为空。
在Vue中使用echarts的两种方式
main.js
myCharts.js
HelloWorld.vue
除了全量引用echarts，我们还可以采用按需引入的方式
main.js
HelloWorld.vue
Vue封装echarts组件
1、最近做的项目是后台管理系统，里面含有各种的echarts的图标，一般的图表都是比较好绘制的，稍微比较难的世界地图和中国地图的绘制。
在vue中引入echarts，分两种情况引入，一种值npm安装包，另一种是cdn外部引入，但是这个对于一般的echarts绘制是没有影响的。
首先安装echarts依赖
你可选择全局导入，也可以在需要的页面导入。全局的话，在main.js里面，然后就可以变成全局的了，就不需要在局部引进echarts了
页面引用
最后利用混合混入，实现图表自适应的效果