Vue-echarts插件随笔(二地图)

Vue 使用 echarts 地图实例

第一步：安装：npm i -S echarts
安装echarts依赖后，打开node_modules下边的map文件夹里边的js。js文件下有：
china.js–>中国地图
world.js–>世界地图
province文件夹—>各个省份地图

第二步 : 在全局 main.js 引入地图资源

import Echarts from './plugin/echarts'
	Vue.use(Echarts);
import "../node_modules/echarts/map/js/china.js"

第三步 ： 在 echarts.js 文件中添加 chinaMap 相关配置

import echarts from 'echarts'
	const install = function (Vue){
	       //将 echarts 挂载到 vue 原型上
	        Object.defineProperties(Vue.prototype,{
		$charts: {
		       get(){
		             return{
			      //编写视图
			      chinaMap : function( id ){
				this.chart = echarts.init(document.getElementById("chinamap"));
				this.chart.clear();
				// 配置地图信息
				var option = {
				        ......//实例代码
			          	},
				this.chart.setOption(option)
			       }
			}
		       }
	                }
	         })
	}	
	export default install;

第四步 ：在views文件夹下创建视图组件Map.vue

<div class="map>
      	 地图 <div id="chinaMap"></div>
</div>
mounted(){
    this.$charts.chinaMap("chinaMap");
}
 #chinamap{
	 width:100%;
	 height:400px;
}

第五步 : 引入App.vue，让他显示出来

<Map/>

import Map from './views/Map'
components:{
	Map
}