首页 前端知识 使用v-if操作两个echarts图显示的时候的渲染问题(图表实例没有)

使用v-if操作两个echarts图显示的时候的渲染问题(图表实例没有)

2024-09-21 22:09:49 前端知识 前端哥 899 653 我要收藏

一、问题描述

最近使用v-if的时候操作echarts的时候出现了一个奇怪的问题,问题的效果图如下:

本来想弄的效果是,点击true按钮的时候显示圆环图,然后点击false按钮的时候显示一个柱状图,页面初始化的时候,圆环图没有任何问题,但是在点击false显示柱状图之后再点true按钮显示圆环图的时候,就会出现上面的问题。

代码是这样的:

// 两个按钮
<div style="flex: 1">
   <el-button-group>
       <el-button size="small" type="" @click="openUseAmount">true</el-button>
       <el-button size="small" type="" @click="openUseMoney">false</el-button>
   </el-button-group>
</div>

// 柱状图和圆环图
  <div v-if="visible">
     <div id="main_pie" style="width: 100%; height: 298px"></div>
   </div>
  <div v-else>
     <div id="main_bar" style="width: 100%; height: 298px"></div>
  </div>

 二、出现原因

一开始以为是v-if的问题,后面才发现是echarts的问题,也可以说是自己操作的问题。因为echarts的官方文档写了下面这样一句话。唉!学艺不精啊!!!!!一开始都没怎么注意这句话,直到出现问题之后,后面回头才发现这句话。看文档还是要仔细啊!!!!!

因为我操作两个echarts的时候,初始的方法是各有一个,会分别生成两个实例,然后因为echarts在一个标签里面操作,两个实例都是在同一个canvas上面,就会导致出现上面的情况。

三、解决方法

解决的办法也挺多的。

①使用echarts提供的方法dispose()对实例进行销毁,这个是比较推荐的。就像下面这样。

    openUseAmount() {
      this.visible = true;
      this.pieChart?.dispose();
      this.initPie();
    },
    openUseMoney() {
      this.visible = false;
      this.barChart?.dispose();
      this.initBar();
    },
 // 基于准备好的dom,初始化echarts实例
        let myChart = echarts.init(document.getElementById('main_pie'));
        this.pieChart = myChart;

pieChart和barChart都是echarts实例,每次重新调用初始化echarts的方法之前都对实例进行一下销毁。echarts网址:图表容器及大小 - 概念篇 - Handbook - Apache ECharts

②不使用v-if方法操作,使用v-show方法对echarts方法进行操作,v-if和v-show的操作原理是不一样的,v-show会直接将display置为none。也能避免上面的问题,但只能说治标不治本。

当然还有很多其他的方法可以避免上面的问题,也就不一一叙述了。如果有更好的方法,欢迎大家在评论区探讨。 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18547.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!