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'))
		.....省略
  }
}