1.首先echarts使用之前必须有完整的DOM结构,所以可以放在mounted中使用

使用步骤:

1)

 mounted() {
    this.echarts1()
    this.echarts2(this.imageData)
  },

2)在methods中配置这两个表格

echarts1(){
      var myChart = echarts.init(document.getElementById('main'));
      var option = {}//样式可参照echarts官网
      myChart.setOption(option,true);//true是设置是否可动态更新数据

 }
3)如果想要动态更新表格,可以先初始化一个数据,然后利用watch监听,当数据发生改变,就重新加载表格

        比如我这里初始化

data(){
return{
    imageData:{'1':'2','2':'12'.....}//初始的数据
 }
}

      那这个imageData可以传给echarts进行初始化的展示

4)当数据发生变化的时候,先清除掉旧的echarts图表,然后重新调用

 watch:{
    imageData:{
      deep:true,
      handler:function(){
        document.getElementById('aside').removeAttribute('_echarts_instance_'); // 移除容器上的 _echarts_instance_
        this.echarts2(this.imageData)
      }
    }
  }

Logo

前往低代码交流专区

更多推荐