echart同一个dom下多次动态渲染值，防止值、事件重复互相影响

最新推荐文章于 2023-11-23 10:28:07 发布
原创 最新推荐文章于 2023-11-23 10:28:07 发布 · 935 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echart

本文介绍如何在ECharts中进行有效的动态渲染优化，避免多次渲染造成的资源浪费和数据混乱问题。主要介绍了两种方法：一是使用dispose方法释放图表资源后再重新初始化；二是通过setOption方法的notMerge参数设置为true来实现数据不合并。

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

echart同一个dom下多次动态渲染值，防止值、事件重复互相影响
1、每次init之后，先dispose释放下资源，再重新init

var  myChart=Echart.init(document.getElementById(DomID));

myChart.dispose()；

myChart=Echart.init(document.getElementById(DomID));

2、setOption时候，设置setOption（option，true） ，true表示数据不合并

setOption(Object option,{boolean = true} notMerge) //notmerge默认为false，即不不合并，就是合并，true就是不合并（脑残设计）

echarts动态渲染数据及数据重复渲染问题解决
weixin_43569862的博客
06-04 7085
echarts动态渲染数据 最近在用echarts时发现了问题，从后台获取的数据不能渲染到页面上，研究后发现渲染到页面的数据和自己从后端获取到后赋给的数据不同，分析得出其实echarts在页面创造阶段就进行了渲染，并且后期echart内部数据发生改变时不再进行二次渲染，思考过后我们采用深度监听数据的方式，当数据发生改变时再次调用echarts渲染页面的函数重新渲染来实现动态的渲染数据 代码如下 // option为echarts渲染的数据 watch:{ option: { handler (
Vue页面多次渲染echarts封装的组件但只出现一个
mynameisjinxiaokai的博客
06-14 685
原因分析 首先我们要知道echart实例的创建方式 通过获取div的id从而初始化echarts的实例，所以进行渲染时，两个div的id相同从而导致只能渲染出来一个图形 解决方案 上面已经得出了 因为id相同导致渲染不出来的 原因，所以经过验证有目前我想出了方案：1.切换为ref获取元素 dom只有一个id，所以会出现覆盖的情况。我们需要把id改为通过ref获取到组件 使用ref我们就不需要获取DOM结点了。$ref如果注册在元素上，它指向的就是DOM元素，如果注册在组件上，他指向的就是组件的实例。...
echarts重复加载解决办法
03-01
解决用百度echarts日历添加点击或双击事件后，会出现重复加载情况。
合理解决vue封装的Echarts重复渲染不显示（vue2,3通用）
qczzc的博客
11-23 1070
项目场景：在通过vue封装Echarts组件，对其进行重复使用。
echarts在同一个dom下动态渲染值，值相互影响解决办法
LQ271524的博客
07-12 909
1、每次init之后，先dispose释放下资源，再重新init var myChart=Echart.init(document.getElementById(DomID)); myChart.dispose()； myChart=Echart.init(document.getElementById(DomID)); 2、setOption时候，设置setOption（option，true） ，true表示数据不合并 ...
同时加载多个echart使用demo
10-24
在网页开发中，ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、...确保正确引用ECharts库后，按照上述步骤和注意事项，你就能实现在同一个页面上同时加载和展示多个ECharts图表了。
解决vue 中 echart 在子组件中只显示一次的问题
10-18
这个问题是由于Vue的生命周期钩子函数mounted只执行一次，导致图表初始化只进行了一次，后续如果数据更新需要重新渲染时，图表不会自动更新。为了解决这个问题，可以利用Vue的watch属性来监听数据的变化，从而实现...
解决vue一个页面中复用同一个echarts组件的问题
10-15
当在Vue模板中多次使用相同的ECharts组件时，每个组件都会尝试通过相同的id初始化ECharts实例，从而导致了图表无法正常显示的问题。 为了解决这个问题，我们可以为每个ECharts实例创建一个唯一的id。这可以通过在...
echart饼图渲染多组数据
q18852548808的博客
09-01 1871
准备好数据barDats 2.定时器 3.Echart饼图 4.饼图的数据 数组for循环到哪个数据，把该数据给饼图。当for循环到最后一个，再从0开始 实现一直循环，返回各个饼图的数据 5.datas数据怎么来的 6.源码 function getCustEcah(barDatas) { console.log("====") console.log(barDatas) let index =0; ...
解决Vue封装echarts组件多次调用出现id重复问题
甜心的专栏
08-01 1411
解决封装的echarts组件多次被调用，id重复，导致页面不渲染、数据覆盖等一系列问题
动态添加DOM时，绑定的click事件会重复执行
weixin_30920853的博客
08-10 249
最近因为业务需求，需要重写window的alert和confirm弹窗，但是每次显示的提示按钮不相同，所有每次打开的弹窗都需要重写生成，但是对于相同的按钮会保留上次创建时的click事件，所以当你创建了多少次弹窗，你下次单击该按钮就会执行多少次，面对这个问题有两个解决方法： 1，每次关闭弹窗时都将其销毁，destory() 方法，将创建的dom从document中remove()掉； 2，将一...
[echarts] 多次渲染导致点击事件调用多次
qq_14993591的博客
04-04 193
原理就是：每次要渲染eChart之前，都去手动把eChart对象之前绑定的所有click事件清除掉，然后再重新绑定新的click事件，这样就不会导致渲染多次，多次绑定相同的click事件了。
同一DOM二次渲染echarts的残留问题
六耳石猴的博客
08-11 678
对同一个dom，先进行柱图的渲染，结果如下，很正常 然后再对这个dom进行饼图的渲染，结果如下 可以看到柱图配置的坐标轴还保留着。 解决方法 只需要在setOption方法中添加第二参数即可解决 option && chart.setOption(option, true); 该参数名为 notMerge，即控制重绘图表时是否进行配置合并，默认为false-合并。修改为true后即以不合并的方式重绘。 ...
在同一个dom中多次加载echarts
qq_25350011的博客
06-30 164
每次加载完 不用之后将mychart 清零，就可以重复加载。
如何避免点击事件被执行多次
langxian_168的博客
07-19 737
private static long lastClickTime;//按钮点击时间工具 public static boolean isFastClick(long ClickIntervalTime) {//ClickIntervalTime 传入间隔多少时间 long ClickingTime = System.currentTimeMillis(); if
jQuery一个元素绑定多个相同事件的解决
热门推荐
lhzjj的专栏
08-27 2万+
jQuery的bind的函数在实际应用中用的不是特别多，只是他可以绑定一个事件，但不会即时触发，也可以通过unbind来解除绑定。在没有看到这篇文章之前，我一直不知道原来bind也可以有命名空间。事实上，我看完这篇文章后，再去翻了一下手册，也才发现了一点点的注释。但手册也仅仅是一句话就带过去了。没有过多的深究，或许他认为命名空间这玩意很简单，没有必要多解释？ 先看手册，由于bind方法有三个参数
原生js 中 多处使用同一echarts ，造成页面混乱
逆风优雅的博客
07-12 696
在项目中，有很多树形图，点击树形图节点，要弹出另一个echarts图表。因为使用的是同一个图表，仅仅点击接口后，数据不一样。但是这样会造成在图表渲染的时候，数据混乱。解决的方法是：
echarts使用常见问题：参数合并等
xiaomajia029的博客
08-03 1111
1. 设置动态改变图表内容时不合并 在echarts中，所有参数和数据的修改都可以通过setOption完成，但是ECharts 会将新的参数和数据与原始数据合并，然后刷新图表。所以当你动态改变了echarts的数据之后，会发现原来的数据还是留在视图界面。 解决： 将setOption的第二个参数设置为true mychart.setOption(option, true); // ch...
There is a chart instance already initialized on the dom. 在同一个页面要打开不同的echart
最新发布
01-01
对于需要展示多个图表的情况，则可以在父级组件内多次调用上述自定义好的 echart 子组件即可轻松完成部署工作。需要注意的是要给每一个图表分配独一无二 id 属性以便区分不同的 dom 节点[^3]。 另外如果想要让 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值