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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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'))
        .....省略
  }
}