首页 > 其他分享 >v-if后的echarts显示已有dom解决方法

v-if后的echarts显示已有dom解决方法

时间:2024-02-18 16:56:32浏览次数:20  
标签:销毁 dom dispose myChart 已有 echarts resize

控制台报错:There is a chart instance already initialized on the dom.

 

核心思路:先判断dom是否存在,如存在就调用销毁方法,再初始化正常操作。

echarts内:

      if (
          this.myChart != null &&
          this.myChart != "" &&
          this.myChart != undefined
        ) {
          //已存在则调用 dispose() 方法销毁
          this.myChart.dispose();
        }
        this.myChart = this.$echarts.init(this.$refs.echat);
        // this.myChart.clear(); //先销毁原有的
        this.myChart.resize();
        this.myChart.setOption({option})
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });

 

父组件内:

要使用this.$nextTick

 

标签:销毁,dom,dispose,myChart,已有,echarts,resize
From: https://www.cnblogs.com/ruyijiang/p/18019560

相关文章

  • JavaSE---Random
    java.util.Random概述Aninstanceofthisclassisusedtogenerateastreamofpseudorandomnumbers. Random实例用来生成伪随机数;Theclassusesa48-bitseed,whichismodifiedusingalinearcongruentialformula. (SeeDonaldKnuth,TheArtofComputerPr......
  • Random
    maven<!--https://mvnrepository.com/artifact/org.apache.commons/commons-lang3--><dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId><version>3.9</version>......
  • TopCoder SRM478C RandomApple 题解
    题意:有\(k\)种苹果和\(n\)个箱子,每个箱子中有一些苹果,先等概率选取\(n\)个箱子组成集合的非空子集,再从选出的苹果中随机选一个,问每种苹果被选中的概率是多少箱子\(i\)有\(a_{i,j}\)个第\(j\)种苹果,第\(i\)个箱子的总苹果数\(siz_i=\sum\limits_{j=1}^ka_{i,j}\),苹果总数\(sum=\su......
  • HTML DOM addEventListener() 方法
    jsaddeventlistenerJavaScript是一种广泛应用于网页开发的脚本语言,具有灵活的语法和强大的功能。在网页中,我们经常需要处理用户的交互操作,例如点击按钮、输入文本等,而addEventListener方法就是用来处理这些事件的。1.jsaddEventListener方法的基本语法addEventListener是DOM......
  • vue3整合echarts
    Vue3是一个流行的前端框架,而ECharts是一个功能强大的图表库。将ECharts整合到Vue3项目中可以方便地展示各种图表。以下是将ECharts整合到Vue3项目中的基本步骤:安装ECharts:使用npm或yarn安装ECharts:bash复制代码npminstallecharts--save或......
  • 【JDK】Random 的局限以及ThreadLocalRandom 类原理剖析
    1 前言我们平时使用随机数大家可能会用到 Random,但是它的问题大家知道吗?以及该如何解决呢?这节我们就来看看。2  Random类及其局限性在JDK7之前包括现在,java.util.Random都是使用比较广泛的随机数生成工具类,而且java.lang.Math中的随机数生成也使用的是java.util.......
  • Codeforces Round 260 (Div. 1)A. Boredom(dp)
    最开始写了一发贪心wa了,然后这种选和不选的组合优化问题,一般是考虑动态规划\(dp[i][0]:\)表示第i个数不选的最大值\(dp[i][1]:\)表示第i个数选的最大值考虑转移:\(dp[i][0]=max(dp[i-1][1],dp[i-1][0])\)\(dp[i][1]=dp[i-1][1]+a[i]*i\)需要将每一个数用一个桶统计次数因......
  • Vue中使用Echarts
    第一步:安装echarts模块cnpminstallecharts-S第二步:在main.js中全局引入importechartsfrom'echarts'Vue.prototype.$echarts=echarts//全局引入后面用this.$echarts就能直接使用了使用方式:template中<template><el-cardclass="box-card"style=&quo......
  • 领域驱动设计(Domain-Driven Design,简称DDD)【简介 个人学习笔记】
    找到了第1篇资料:领域驱动设计详解:是什么、为什么、怎么做?-知乎找到了第2篇资料:领域驱动架构(DDD)建模中的模型到底是什么?-知乎找到了第3篇资料:一文看懂DDD领域驱动设计-知乎找到了第4篇资料:什么是DDD(领域驱动设计)?这是我见过最容易理解的...找到了第5篇资料:领......
  • js DOM2 和 DOM3
    DOM2(DOMLevel2)和DOM3(DOMLevel3)在这些结构之上加入更多交互能力,提供了更高级的XML特性。实际上,DOM2和DOM3是按照模块化的思路来制定标准的,每个模块之间有一定关联,但分别针对某个DOM子集。这些模式如下所示。DOMCore:在DOM1核心部分的基础上,为节点增加方法和属性。......