zoukankan      html  css  js  c++  java
  • 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);
           }) 
       }
    } 
    

      

  • 相关阅读:
    redis--pipelining管道
    插入排序
    选择排序
    冒泡排序
    网页表格导入导出Excel
    easyUI的datagrid表格的使用
    软件工程实践总结(个人)
    Beta答辩总结
    Beta冲刺7
    Beta冲刺6
  • 原文地址:https://www.cnblogs.com/nongfusanquan/p/13674247.html
Copyright © 2011-2022 走看看