首页 > 其他分享 >[ECharts] There is a chart instance already initialized on the dom.

[ECharts] There is a chart instance already initialized on the dom.

时间:2024-09-27 22:22:42浏览次数:8  
标签:DOM 初始化 already dom refs There echarts 实例 ECharts

[ECharts] There is a chart instance already initialized on the dom.

 

 

报错解释:
这个错误表示在同一个DOM元素上已经初始化了一个ECharts图表实例,而你又尝试去在同一个DOM上初始化另一个图表实例。ECharts不允许在同一个DOM上叠加多个实例。

解决方法:
    在尝试初始化新的图表实例之前,首先销毁已经存在于该DOM上的实例。可以使用echarts.dispose方法来销毁实例:

if (echarts.getInstanceByDom(domElement)) {
    echarts.dispose(domElement);
}
var myChart = echarts.init(domElement);
// 其他初始化代码

    确保你的代码逻辑中不会重复初始化同一个DOM元素上的图表实例。
    如果你的应用逻辑需要多个图表实例,考虑使用不同的DOM元素或者通过ECharts实例的setOption方法来更新现有实例的配置,而不是重新初始化。

 

Uncaught ReferenceError: domElement is not defined

this.$refs.echarts1

 

解决:

 this.intervalId = setInterval(() => {

        if (echarts.getInstanceByDom(this.$refs.echarts1)) {
            echarts.dispose(this.$refs.echarts1);
        }
        if (echarts.getInstanceByDom(this.$refs.echarts2)) {
            echarts.dispose(this.$refs.echarts2);
        }
        this.loadData();

      }, 10000) 

 

 

 

this.intervalId = setInterval
 
  beforeDestroy() {
    clearInterval(this.intervalId)
  }
 

 

 const myChart1 = echarts.init(this.$refs.echarts1)

 const myChart2 = echarts.init(this.$refs.echarts2)

 

[ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

 

 

 

标签:DOM,初始化,already,dom,refs,There,echarts,实例,ECharts
From: https://www.cnblogs.com/emanlee/p/18328769

相关文章

  • 前端必知必会-jQuery遍历DOM函数
    文章目录jQuery遍历元素什么是遍历?jQuery遍历-祖先遍历DOM树jQueryparent()方法jQueryparents()方法jQueryparentsUntil()方法总结jQuery遍历元素什么是遍历?jQuery遍历,即“移动”,用于根据HTML元素与其他元素的关系“查找”(或选择)HTML元素。从一......
  • 深入 JavaScript 世界:掌握 OOP、虚拟 DOM 等
    踏上激动人心的旅程,探索广阔而动态的javascript世界!getvm提供的免费编程学习资源集合涵盖了广泛的主题,从复杂的面向对象编程(oop)到创建自定义虚拟dom实现。无论您是经验丰富的开发人员还是好奇的初学者,这些教程都将为您提供提升javascript能力的知识和技能。?理......
  • .NetCore MySqlException 多线程中(There is already an open DataReader associated w
    问题描述:其实标题只是遇到问题的其中之一,遇到三种异常信息如下:Lockwaittimeoutexceeded;tryrestartingtransaction大概意思:超过锁定等待超时;尝试重新启动事务 ThereisalreadyanopenDataReaderassociatedwiththisConnectionwhichmustbeclosedfirst.大......
  • react-router-dom嵌套路由实践
    想要通过react-router-dom实现类似vue的router-view的嵌套路由效果,在点击导航菜单时切换页面,官方文档是真的没找到相关内容,现做个总结:在createBrowserRouter的配置中配置给目标路由配置子路由;在目标组件的相应位置添加一个<Outlet/>作为子路由的组件渲染容器(Outlet组件类似vue......
  • [CF1842H]Tenzing and Random Real Numbers
    题面原题传送门题面机翻有\(n\)个介于0和1之间(包括0和1)的均匀随机实变量,记为\(x_1,x_2,\ldots,x_n\)。Tenzing有\(m\)个条件。每个条件的形式为\(x_i+x_j\le1\)或\(x_i+x_j\ge1\)。Tenzing想要知道所有条件都满足的概率,模为\(998~244~353\)。形式上......
  • 一文搞懂XPath查找html dom
     博主介绍: 大家好,我是Yuperman,互联网宇宙厂经验,17年医疗健康行业的码拉松奔跑者,曾担任技术专家、架构师、研发总监负责和主导多个应用架构。技术范围: 目前专注java体系,以及golang、.Net、软件架构、DDD、微服务、redis、nginx、tomcat、mysql、oracle等业务范围: 从数字医......
  • 领域驱动设计(Domain-Driven Design, DDD)
    目录核心概念实践原则领域驱动设计(Domain-DrivenDesign,DDD)是一种软件开发方法论,它强调将业务领域知识与软件实现紧密结合,以提高软件对于复杂业务需求的适应性和可维护性。DDD由埃里克·埃文斯(EricEvans)在其2003年出版的同名书籍《领域驱动设计》中首次提出,并逐渐成为处理复......
  • 万象更新 Html5 - dom: DOM 获取元素,修改元素的样式
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-dom:DOM获取元素,修改元素的样式示例如下:dom\demo1.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>DOM获取元素,修改元素的样式</t......
  • 万象更新 Html5 - dom: DOM 常用方法和属性
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-dom:DOM常用方法和属性示例如下:dom\demo2.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>DOM常用方法和属性</title>&......
  • 万象更新 Html5 - dom: DOM 事件
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-dom:DOM事件示例如下:dom\demo3.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>DOM事件</title><sty......