Vue- echarts插件使用随笔(一图表)

Vue 使用 echarts 图表实例

第一步：安装：npm i -S echarts

第二步：创建一个plugins文件夹，创建echarts.js并配置

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

第三步 ：全局引入并使用,所有的插件都需要use()

  import Echarts from './plugin/echarts'
  Vue.use(Echarts);

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

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

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

<Map/>

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