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

最新推荐文章于 2023-11-23 10:28:07 发布
最新推荐文章于 2023-11-23 10:28:07 发布
阅读量802 收藏 3
点赞数 1
分类专栏： Echart图表 文章标签： echart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happy81997/article/details/96114887
版权

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就是不合并（脑残设计）

小湾生产队队长
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery使用attr()方法同时设置多个属性值用法实例
10-24
主要介绍了jQuery使用attr()方法同时设置多个属性值的用法,实例分析了jQuery中attr方法实现多个属性设置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
echarts折线图数据更新后 不重新渲染
w_ziShan的博客
09-30 1328
echarts折线图
echarts 重新渲染时图表重叠现象的问题解决方法
weixin_33937913的博客
05-02 1092
问题描述： 1、选择系列--生成图表--不选系列--生成图表--正常（图表不会重叠）； 2、选择系列--生成图表--全屏--还原--不选系列并改变图表类型--生成图表--异常（图表重叠）。 问题原因： myChart.setOption(option); 修改为： myChart.setOption(option,true);解决问题。 归根结底是：echarts重新渲染的问题！ ...
合理解决vue封装的Echarts重复渲染不显示（vue2,3通用）
最新发布
qczzc的博客
11-23 502
项目场景：在通过vue封装Echarts组件，对其进行重复使用。
JS实现动态添加DOM节点和事件的方法示例
10-19
主要介绍了JS实现动态添加DOM节点和事件的方法,涉及javascript事件响应及针对页面dom元素节点与属性的动态操作相关实现技巧,需要的朋友可以参考下
echarts动态渲染数据及数据重复渲染问题解决
weixin_43569862的博客
06-04 6535
echarts动态渲染数据 最近在用echarts时发现了问题，从后台获取的数据不能渲染到页面上，研究后发现渲染到页面的数据和自己从后端获取到后赋给的数据不同，分析得出其实echarts在页面创造阶段就进行了渲染，并且后期echart内部数据发生改变时不再进行二次渲染，思考过后我们采用深度监听数据的方式，当数据发生改变时再次调用echarts渲染页面的函数重新渲染来实现动态的渲染数据 代码如下 // option为echarts渲染的数据 watch:{ option: { handler (
解决Vue封装echarts组件多次调用出现id重复问题
甜心的专栏
08-01 976
解决封装的echarts组件多次被调用，id重复，导致页面不渲染、数据覆盖等一系列问题
echarts使用常见问题：参数合并等
xiaomajia029的博客
08-03 920
1. 设置动态改变图表内容时不合并 在echarts中，所有参数和数据的修改都可以通过setOption完成，但是ECharts 会将新的参数和数据与原始数据合并，然后刷新图表。所以当你动态改变了echarts的数据之后，会发现原来的数据还是留在视图界面。 解决： 将setOption的第二个参数设置为true mychart.setOption(option, true); // ch...
vue自定义指令preventReClick防止多次点击，针对于elementUI button
luyundesign的博客
09-30 3393
1、定义全局指令文件 Vue.directive import Vue from 'vue' // 自定义指令防止按钮重复点击 v-preventReClick(使用时) const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { el.addEventListener('click', () => { console.log(11111) c
动态添加DOM时，绑定的click事件会重复执行
weixin_30920853的博客
08-10 194
最近因为业务需求，需要重写window的alert和confirm弹窗，但是每次显示的提示按钮不相同，所有每次打开的弹窗都需要重写生成，但是对于相同的按钮会保留上次创建时的click事件，所以当你创建了多少次弹窗，你下次单击该按钮就会执行多少次，面对这个问题有两个解决方法： 1，每次关闭弹窗时都将其销毁，destory() 方法，将创建的dom从document中remove()掉； 2，将一...
javascript获取dom的下一个节点方法
10-25
主要介绍了javascript获取dom的下一个节点方法,实现在页面点击加减按钮数字的累加，需要的朋友可以参考下
vue动态生成dom并且自动绑定事件
01-19
用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没办法取到相应对象的，必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: <input type=text v-model=item.val style=width:40px>
echarts 异步数据获取、通过切换搜索条件后重复渲染问题、添加loading
qq_42103673的博客
04-22 536
1.同一坐标系渲染多条折线 问题：在数据请求回来之前已经开始画线，导致线条画不上的问题 解决： // 曲线图1 actulePriceList1(){ return new Promise((resolve, reject) => { priceClient.findActulePriceListByName(StringValue.of(this.condition.varietyNameCode)).then(res=>{
echarts折线图，下拉框二次渲染，数据重叠问题
WeiflR10的博客
12-31 1802
总结：网上有很多方法 ①mychart.setOption(option,true) 设置属性（好像没用） ②mychart.clear() 清空画布（意外发现可以解决渲染不同步问题，比如，下拉框2019年有数据，但需选择其他年份后，才能展示） 以上方法都没有用，检查后发现是自己的数据本身就追加了，跟echarts无关，那就简单了，直接判断，清空上次数据就ok了， 效果图...
vue openlayer单击地图事件循环多次执行_Vue中DOM的异步更新策略以及nextTick机制
weixin_39887961的博客
11-22 488
本篇文章主要是对Vue中的DOM异步更新策略和nextTick机制的解析，需要读者有一定的Vue使用经验并且熟悉掌握JavaScript事件循环模型。引入：DOM的异步更新打印的结果是begin, 而不是我们设置的end。这个结果足以说明Vue中DOM的更新并非同步。在Vue官方文档中是这样说明的：可能你还没有注意到，Vue异步执行DOM更新。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一...
DOM事件的执行顺序如何解决
xxgjjh的博客
10-24 491
DOM事件执行顺序 事件循环机制
JS动态添加元素绑定点击事件，触发事件多次执行问题？
weixin_45901261的博客
04-20 3627
JS动态添加元素绑定点击事件，触发事件多次执行问题
jQuery一个元素绑定多个相同事件的解决
热门推荐
lhzjj的专栏
08-27 2万+
jQuery的bind的函数在实际应用中用的不是特别多，只是他可以绑定一个事件，但不会即时触发，也可以通过unbind来解除绑定。在没有看到这篇文章之前，我一直不知道原来bind也可以有命名空间。事实上，我看完这篇文章后，再去翻了一下手册，也才发现了一点点的注释。但手册也仅仅是一句话就带过去了。没有过多的深究，或许他认为命名空间这玩意很简单，没有必要多解释？ 先看手册，由于bind方法有三个参数
echart横坐标（纵坐标）的值竖着显示的实现方法
happy81997的博客
07-19 8268
echart横坐标（纵坐标）的值竖着显示的实现方法 xAxis : [ 　　{ 　　　　type : 'category', 　　　　data : data[1], 　　　　axisLabel:{ 　　　　interval: 0, 　　　　formatter: function (value) { 　　　　　　//x轴的文字改为竖版显示 　　　　　　var str = value.split(""...
js如何实现动态切换绑定同一个DOM的事件
07-15
在JavaScript中，你可以使用事件委托来实现动态切换绑定同一个DOM的事件。事件委托是一种将事件处理程序绑定到其父元素上，然后利用事件冒泡的机制来触发子元素的事件。 具体实现步骤如下： 1. 获取父元素，即包含需要绑定事件的DOM的父级元素。 2. 给父元素绑定事件，这个事件可以是所有子元素都会触发的事件，比如点击事件。 3. 在事件处理程序中，通过event.target属性获取实际触发事件的子元素，进而根据子元素的特征来执行相应的操作。 下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>动态切换绑定事件</title> </head> <body> <div id="parent"> <button class="btn">按钮1</button> <button class="btn">按钮2</button> <button class="btn">按钮3</button> </div> <script> var parent = document.getElementById('parent'); parent.addEventListener('click', function(event) { var target = event.target; if (target.classList.contains('btn')) { // 根据子元素的特征执行相应操作 console.log(target.textContent + '被点击了'); } }); </script> </body> </html> ``` 在上面的示例中，我们给父元素 `parent` 绑定了点击事件。当点击父元素中的任意一个子元素时，通过判断子元素是否具有 `btn` 类名，来确定是哪个子元素被点击了。然后可以根据不同的子元素执行相应的操作。 这样就实现了动态切换绑定同一个DOM的事件。无论你添加或删除了多少个按钮，只需要在父元素上绑定一次事件即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值