Echarts单页面渲染多个echarts组件,清除echarts实例

最新推荐文章于 2024-07-20 23:54:17 发布

匆叔

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量974

点赞数

文章标签： echarts javascript ecmascript vue.js chrome node.js webpack

本文链接：https://blog.csdn.net/m0_73854403/article/details/131308796

版权

Echarts在同一个dom中, 必须先销毁一个组件后, 才能渲染另外一个组件。使用async和await，进行异步处理，因为销毁组件是异步操作，因此可以使用await控制，代码和页面如下：

代码如下 , 切记 echarts容器要给宽高

 <button @click="control(1)">折线图</button>
 <button @click="control(2)">柱状图</button>
                

      <div id="lineChartEcharts" v-show="visualizationControl == 1"></div>
      <div id="histogramEcharts" v-show="visualizationControl == 2"></div>


    async control(val) {
      this.visualizationControl = val;
      if (val == 2) {
        await this.$echarts
          .init(document.getElementById("lineChartEcharts"))
          .dispose();
        this.histogramshowEcharts();
      } else {
        await this.$echarts
          .init(document.getElementById("histogramEcharts"))
          .dispose();
        this.lineChartshowEcharts();
      }
    },

     /**折线图*/
    lineChartshowEcharts() {
      var myChart = this.$echarts.init(
        document.getElementById("lineChartEcharts")
      );
      var option;
        option = {};
      option && myChart.setOption(option);
    },
  /**柱状图*/
    histogramshowEcharts() {
      var chartDom = document.getElementById("histogramEcharts");
      var myChart = echarts.init(chartDom);
      var option;
      option = {};
      option && myChart.setOption(option);
    },



   给容器宽高
   #lineChartEcharts,
    #histogramEcharts {
      width: 100%;
      height: 500px;
    }