vue+echarts组件销毁

  注:其实完全可以在实例化之前,使用echarts.init(document.getElementById('xxx')).dispose();解决

  项目开发中有一个echarts折线图表展示,根据下拉框选择,请求不同接口,结合时间选择,传给后台,进而获取数据进行绘制。其中信号强度为多条折线图,链路质量为单条折线,根据下拉进行切换,点击查询后,不能完全绘制成功。

  

   分析:切换绘制时,上一个绘制内容未能完全销毁导致。

   解决:

<!--template-->
<div id="myEcharts" v-if="alive"></div>
//script
data() {
    return {
      alive: true
    }
},
methods: {
    //查询按钮触发,根据下拉判断调用那个接口,进行url和参数组装
    echartsHandle() {
       //url和参数组装
       .....
       //调用axios请求方法
       this.alive = false;//此时销毁
       this.$nextTick(() => {//结合$nextTick使用
           this.alive = true;
           this.getEchartsData(url,param);
       }) 
   }
} 

  

原文地址:https://www.cnblogs.com/nongfusanquan/p/13674247.html