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();
		}
   }
    }