Vue中使用echarts图表的两种方式

VUE中使用Echarts
1. 方式一
echarts 的引用 (需要自己初始化echart对象[init], 然后setOption({})设置属性，构建echart图表)
echart的安装引入
    安装命令：npm install echarts --save
	页面引入：import Echarts from 'echarts'
    页面使用：在created   mounted   methods 等区域使用
			  //初始化echart对象
	          let echarts = Echarts.init(document.getElementById('chartBox'));
			  //设置参数
			  echarts.setOption(this.pieOption);
			  //监听重置大小的处理事件
			  window.addEventListener('resize', this.handleResize);
			  //绑定图表点击事件
			  echarts.on("click", clickEvent);
		
	//可以在 main.js 中全局引入 echarts
		import echarts from "echarts";
		Vue.prototype.$echarts = echarts;
		// 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("main"));

2. 方式二
vue-echarts 的引用(将echart集成成vue的一个组件，页面上可以直接用<Echart>标签来实现图表，更加便捷)
    安装命令：npm install vue-echarts --save-dev
	页面引入：  import ECharts from 'vue-echarts'
				//引入相关组件
			    import "echarts/lib/chart/bar";
				import "echarts/lib/chart/line";
				import "echarts/lib/chart/map";
				import "echarts/extension/dataTool/index";
				
			    components: { 'ECharts': ECharts }//引入组件
			  
	页面使用: <ECharts
                    ref="chart1O"
                    :options="chartOption"
                    :auto-resize="true"
					@click="onClick"  //图表绑定点击事件
                    theme="light"></ECharts>
			
			methods     onClick(event, instance, echarts) {
						    console.log(event);
						    console.log(instance);
						    console.log(echarts);
						},
	

 

来源：oschina

链接：https://my.oschina.net/u/2326864/blog/4287707