vue項目中使用Echarts插件

vue項目中使用Echarts插件

//1、第一步在Vue項目中引入Echarts插件(在Echarts官網中有詳細的說明)
//2、第二步在H5标簽中建立一個具有寬、高的塊級元素，并在這個塊級元素中插入ref='test'(test可以随便起名)
//3、第三步在data裡面聲明一個對象option并在這個對象裡面設定你需要的圖形參數
//4、第四步在Vue的生命周期‘mounted’中将用ref擷取到的dom節點放到echarts.init()這個方法裡面
//5、第五步在第四步的結果中使用setOption()方法，将第三步設定好的對象放到setOption()方法中
           

// An highlighted block
//1、第一步在Vue項目中引入Echarts插件(在Echarts官網中有詳細的說明)
//2、第二步在dom中建立一個有寬、高的塊級元素
<template>
	<div style="height:500px;width:500px;" ref="test"></div>
</template>
//3、第三步在data裡面聲明一個對象option并在這個對象裡面設定你需要的圖形參數
export default {
  data: function () {
    return {
    		//第三步在data裡面聲明一個對象option并在這個對象裡面設定你需要的圖形參數
    		option : {
				    xAxis: {
				        type: 'category',
				        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
				        data: [820, 932, 901, 934, 1290, 1330, 1320],
				        type: 'line',
				        smooth: true
				    }]
				};
    		}
    	}
   methods:{
   		selectMonth(data){
			console.log(data)
		}
   }
   mounted: function(){
   		//這裡可以封裝成一個方法
   		//第四步在Vue的生命周期‘mounted’中将用ref擷取到的dom節點放到echarts.init()這個方法裡面
  		let chart1 = echarts.init(this.$refs.test);
  		//第五步在第四步的結果中使用setOption()方法，将第三步設定好的對象放到setOption()方法中
  		chart1.setOption(this.option);
		//完成以上步驟就可以得到一個曲線圖了，下面内容如沒有需求可以不加
		
  		//向圖表中添加點選事件
  		chart1.on("click", (data) => {
  			//data是通過點選圖表事件擷取的内容
	        this.selectMonth(data);
      	});
      	//使圖表自适應縮放  注意：如果有多個圖表都必須放在一個window.onresize裡面否則後面的會覆寫前面的内容
      	window.onresize = function () {
			chart1.resize();
		}
   }
    }