在vue项目中，使用echarts图表。npm安装，引入和常规使用echarts无差别。在vue中，可以把echarts放在独立组件中，然后在页面中引用。通过组件的props传入需要图表展示的数据。在methods中定义初始化echarts实例的方法，比如drawline()，然后在组件生命周期mounted时，调用this.drawline()，进行echarts组件实例化渲染。

但是这么操作会带来一个问题，echarts只在初始化实例的时候，读取并渲染图表数据，在使用此组件的页面里，改变想要展示的图表数据时，这个echarts组件就无法复用了。解决方法如下：父组件或页面改变传入的props时，echarts中的props是会响应到相应改变的，我们只需要让echarts重新实例化一次，就可以重新渲染了。即在vue的watch方法中监听这个属性的变化，如果props发生了变化，重新调用之前定义的drawline()即可。

export default {
  name: 'Echarts',
  data () {
    return {
	
    }
  },
  props:{
		testdata: Array
  },
  mounted(){
    this.drawLine();
  },
  watch:{
	testdata(oldv,newv){
		this.drawLine();
	}  
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
		.....省略
  }
}