ECHARTS重复渲染CHART INSTANCE错误解决

已于 2023-06-01 13:23:04 修改
阅读量269 收藏
点赞数
文章标签： echarts 前端 javascript
于 2023-06-01 13:20:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74293268/article/details/130986208
版权
当Echarts图表在DOM上已有实例时，文章提供了三个步骤来解决该错误：首先，在方法外部全局声明echarts对象；其次，检查DOM对象是否已存在；最后，正常初始化Echarts图表。这种方法确保了每个DOM元素只初始化一次Echarts实例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

topgun_xmpx
关注
【React ECharts】There is a chart instance already initialized on the dom
weixin_56461542的博客
05-30 847
解决React使用ECharts时报错：There is a chart instance already initialized on the dom. import React from "react" import * as echarts from "echarts" import styled from "components-styled" export default class BarChart extends React.Component { constructor(props) {
解决echarts数据二次渲染不成功的问题
10-15
主要介绍了解决echarts数据二次渲染不成功的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts 二次渲染不显示及报错 this.dom.getcontext is not a function
webBrother的博客
03-24 1996
1.二次渲染不显示 （注：用原生dom获取方法否则会报错如：下图） //容器id="main" 里有个_echarts_instance_ // 移除容器上的 _echarts_instance_ document.getElementById('main').removeAttribute('_echarts_instance_'); //重新初始化 let myChart = echarts.init(document.getElem...
echarts二次渲染失败解决方法
weixin_59685936的博客
09-22 1963
echarts二次渲染失败解决方法
合理解决vue封装的Echarts重复渲染不显示（vue2,3通用）
qczzc的博客
11-23 1029
项目场景：在通过vue封装Echarts组件，对其进行重复使用。
解决ECharts图表不能重复渲染问题
爱蹦哒的咸鱼的博客
04-12 622
图表只能显示一次是因为通过id获取标签，一个html中id只能有一个，所以每次获取的是同一个标签。
[ECharts] There is a chart instance already initialized on the dom渲染不出来
最新发布
12-27
container.__chartInstance__ = echarts.init(container); } else { container.__chartInstance__.dispose(); container.__chartInstance__ = echarts.init(container); } container.__chartInstance__....
[ECharts] There is a chart instance already initialized on the dom.报这个警告 并且echarts没有渲染
10-13
这个警告通常是因为在同一个 DOM 元素上重复初始化了 ECharts 实例。可以尝试先销毁已有的实例，再重新初始化。 可以使用 `echarts.dispose()` 方法销毁已有的实例，例如： ```javascript var myChart = echarts....
echarts There is a chart instance already initialized on the dom.
12-10
ECharts是一个流行的开源JavaScript图表库，它允许开发者在网页上动态创建各种交互式的图表，如折线图、柱状图、饼图等。如果你已经有一个ECharts实例初始化在DOM上，意味着你已经在HTML页面上创建了一个ECharts对象...
如何解决echarts的ere is a chart instance already initialized on the dom.这个警报
04-16
可以尝试在重新渲染一个图表之前先销毁之前的图表实例，使用 echarts 的 dispose 方法可以销毁一个图表实例，代码如下： ``` var myChart = echarts.init(document.getElementById('main')); // ... myChart....
【echarts】加载重绘问题
“看见月亮就想起你”的博客
08-26 394
最近研究了echarts，发现重新加载不重新绘图的问题，找了一下问题的根源所在，大概如下： 解决方案： 因为echarts绘制都要创建一个Echarts实例，返回echartsInstance。所以我们只需要在重新创建的时候，移除之前创建的实例并且重新创建一个Echarts实例： document.getElementById('main').removeAttribute('_echarts_instance_'); // 移除容器上_echarts_instance_ 属性 重新创建： let my
解决echarts第二次不渲染问题
甜心的专栏
08-01 2148
echarts第一次能渲染，但点击其他页面在点击回来就不渲染了。查看dom属性发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染。
vue封装的echarts组件被同一个页面多次引用无法正常显示问题
weixin_44106237的博客
05-18 208
将我们封装的组件中的。，下面是组件修改部分。
react中,echarts渲染多个饼图,数据一样
cehntanran的博客
11-09 1878
react中,echarts渲染多个饼图,数据一样 最近在写一个echarts的pie图的需求, 需要展示成下面这样 但是在初始化过程中, 数据一直显示的是最后一组数据, 代码如下 这是父页面的数据 import React, { Component } from 'react' import Pie from './pie' class EchartsPie extends Compone...
错题笔记: echart-渲染过程
qq_43455862的博客
06-01 1047
echart
「ECharts」交互 API （echarts、echartsInstance）
imByte的博客
01-09 2295
「ECharts」交互 API （echarts、echartsInstance）
echarts第一次正常渲染，第二次不能渲染（二次不渲染）
xybhua的博客
12-04 3009
在使用vue模板中需要echarts图表就重新写了一个，发现第一次能渲染，但点击其他页面在点击回来就不渲染了。图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染。echarts的渲染是从setOption中开始的，不是从echarts.init()开始。echarts每次绘制都需要创建一个Echarts的实例，返回echartsInstance。解决办法就是我们在重新创建的时候，移除之前
Echarts常用API（echarts和echartsInstance）
weixin_30800807的博客
07-22 4413
一、echarts上的方法 一般在项目中引入echarts之后，可以获得一个全局的echarts对象。 1.下面是几个比较常用的echarts方法 echarts.init() 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例。 (dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string,...
解决echarts图表页面切换不显示，刷新后显示的问题
weixin_45713650的博客
01-24 2763
最近在做大屏开发时，图表只有第一次正常显示，每次修改代码，或者切换页面再切回来，图表都不显示，需要重新刷新才可以显示。通过查阅资料，好像使用动态的id也可以实现，在每次重新渲染时id都不同（例如id拼接时间戳）在图表初始化之前，清除掉_echarts_instance_属性。，这种方式我并没有动手尝试，应该也可以解决这个问题。这样，切换页面的时候，也可以正常渲染了~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值