vue中echars的简单使用（折线图例子）

1.在html中写入div，定义id为main

<div id="main" style="width: 1200px;height:400px;"></div>

2.在method中定义方法drawChart

注：xAxis.type 决定了图表样式，不同图表参数需求不同，详情见官网

drawChart() {
      // 基于准备好的dom，初始化echarts实例
  document.getElementById("main").removeAttribute("_echarts_instance_");
 let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let 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'
	    	}]
		};
	      // 使用刚指定的配置项和数据显示图表。
	      myChart.setOption(option);
	  }

3.mounted加载

mounted() {
    //挂载
    this.drawChart();
  },

4.图表的数据发生变化时，需要对echars进行一次监听，否则无法实现初次渲染
，效果图连接：折线图

watch: {
    //监听
      //深度监听复杂数据类型
    // series:{deep:true , handler(){
    //   this.drawChart();
    // }}
    
    series() {
      this.drawChart();
    },
  },