echarts多次使用SetOption时的数据问题

最新推荐文章于 2024-06-13 09:25:54 发布
最新推荐文章于 2024-06-13 09:25:54 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： 前端技术 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ximaiyao1984/article/details/115277257
版权

使用myChart.setOption(option，true); 没有什么用

解决

在 myChart.setOption()前添加

myChart.clear();
myChart.setOption(option);

或者

myChart.dispose(); //销毁
myChart.setOption(option);
讓丄帝愛伱
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts多次setOption没有覆盖（清除）上一条数据
BigOrange的博客
06-15 6656
问题现象： echarts多次setOption没有覆盖原数据。初始图表没有数据，显示一个空坐标轴；第二次setOption新数据时，图表正常绘制新图；第三次setOption时，y轴数据为空，但却绘制出第二次部分数据的图表。 现象依次如下面三图： 解决方法： echartsInstance. clear 官方文档 echartsInstance. clear any 清空当前实例，会移除实例中所有的组件和图表。 在setOption前，先清空图表chart.clear() ，便可以解决此问题。
echarts 大数据量 数据造成卡顿处理
weixin_43891869的博客
05-20 2415
数据进行筛选和抽样来减少渲染点数
Echart 实例未销毁，内存泄漏问题
最新发布
weixin_44642382的博客
06-13 265
echart
echarts多次进行SetOption的时候数据遗留问题
热门推荐
周金鱼啊
12-20 2万+
最近在使用  "echarts"的时候遇到了一个很是严重的问题，哈哈哈哈 就是通过点击的标题不同后台返回不同的数据，返回的echarts数据中有的为一条折线数据，有的就是三条折线数据，如图  然后在点击标题来回切换的时候就出现了数据残留的问题，本来数据返回的只有一条数据，但是却显示了三条！！！ 根据度娘提示，试用了 " myChart.setOption(option，true); ...
Echarts在vue项目中的使用方法，数据添加到setOption里面的两种方式
qq_43468165的博客
03-13 1656
Echarts在vue项目中的使用方法，数据添加到setOption里面的两种方式 <template> <div> <div style="width:500px;height:500px" ref="chart"></div> </div> </template> <script> export default{ data () { return {}; }, mo
echarts中setOption没有重新渲染表格，导致图表显示有问题？
纸上得来终觉浅
09-11 1万+
问题：echarts中setOption没有重新渲染表格，导致图表显示有问题说明： 使用的是折线图 第一次渲染的是三组数据，显示三根线。 切换后数据调整为两组，但是图表仍然显示三根线。 排查后数据源没有问题，但是显示有问题，猜测是echarts问题，查找资料发现没有重新渲染。解决方法： myChart.setOption(chartOption,true); 第二个参数设置为true参考链
关于Echarts2传入空数组，还是显示上次的数据，使用myChart.clear()和myChart.setOption(option,true)都不管用
Heyangqing611的专栏
06-27 1万+
网上有基本就是俩种方法：myChart.clear()和myChart.setOption(option,true) 但是我的项目还是不管用，我向它传递了空的数组，用上面方法不行，就加了一些判断。 ....以上代码省略 关键代码如下： var myChart = ec.init(document.getElementById('broadbandAd')); if (y_show.le...
解决echarts数据二次渲染不成功的问题
10-15
总之，解决ECharts数据二次渲染不成功的问题，主要是通过正确使用`setOption`方法的`notMerge`参数。确保每次更新数据时都设置`notMerge: true`，以便ECharts能准确地反映出新的数据变化，而不是与旧数据混合。同时...
在vue中实现清除echarts上次保留的数据(亲测有效)
10-14
在Vue.js应用中，使用ECharts进行数据可视化时，可能会遇到一个问题：当用户多次请求数据并更新图表时，ECharts可能会保留之前的数据显示，导致新数据无法正常渲染。为了解决这个问题，我们需要找到一种方法来清除...
数据可视化echarts-5.3.1.zip文件
03-09
ECharts 5.3.1版本是对这个库的一次更新，它可能包含了性能优化、新功能添加或已知问题修复。 ### ECharts的特点 1. **易用性**：ECharts提供了简单易懂的API和配置项，使得开发者能够快速上手并创建出复杂的可视...
echarts数据分页
09-27
然而，当需要展示的数据量过大时，直接将所有数据一次性加载到页面上可能导致浏览器性能下降，甚至导致界面卡顿或崩溃。为了解决这个问题，我们可以利用数据分页技术来优化ECharts的性能。 数据分页是一种有效的...
taro 使用echarts图表.zip
08-21
描述中提到，在Taro 3.05版本时，尝试在小程序上使用ECharts遇到了渲染问题，但在升级至3.07版本后问题得到解决。这表明Taro团队可能在新版本中修复了与ECharts的兼容性问题。在实际开发中，确保使用与库兼容的框架...
echarts实现地图定时切换散点与多图表级联联动详解
10-18
在本文中，我们将深入探讨如何使用ECharts实现地图定时切换散点与多图表级联联动的功能。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互功能，适用于各种Web应用程序。我们将按照...
基于ECharts大数据可视化展示平台模板源码
12-03
对于大数据量的情况，可以使用ECharts的动态加载和分块加载功能，避免一次性加载过多数据导致页面卡顿。 数据可视化展示平台通常包含多个图表，这些图表之间可能存在联动效果。ECharts提供了一种交互式的数据可视化...
echarts动态加载多组曲线实例.zip
07-11
在本实例中，我们主要探讨如何使用ECharts这个流行的JavaScript数据可视化库来动态加载多组曲线数据，并在时间轴上进行展示。ECharts是一个由百度开发的开源图表库，支持丰富的图表类型，如柱状图、折线图、饼图等，...
利用echarts做的中国地图城市之间飞行效果
05-30
每个数据项表示一次“飞行”，包括起点和终点城市，以及动画的时间和样式： ```javascript var flightData = [ {name: '北京', value: '上海', animationDuration: 2000, animationEasing: 'cubicOut'}, {name:...
Echarts 同一个页面echarts多次使用setOption后，显示的与series 不同
zq爱生活爱代码的博客
02-25 2617
一行一行的研究代码 打log 最后发现 实际显示的图标与option中的data不符 百度后发现 letbarGraph=_this.$echarts.init(_this.$refs.chart); var option={ } barGraph.clear(); 清空 barGraph.setOption(option); ...
Echarts填充data
夏言辰的专栏
09-05 3318
*{margin:0;padding:0px;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,  form,fieldset,input,textarea,p,blockquote,th,td {padding: 0; margin: 0; font-size: 12px; font-family:"宋体", System;} 
Echarts data赋值
梵法利亚的博客
09-20 3784
var date=new Date; var countYear = eval(’${countForYear}’); var countYear1=0; for (var i = 0; i < countYear.length; i++) { 　　if(date.getFullYear() == countYear[i].yearNo){ 　　　　countYear1 = count...
使用 ECharts 的数据驱动方式
06-03
使用Charts 的数据驱动方式，可以将所有数据一次性传递给图表，然后使用 `dataset` 和 `series` 配置项来显示不同的柱状图。以下是一个简单的示例： ```javascript var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, xAxis: { type: 'category' }, yAxis: { type: 'value' }, dataset: { // 数据 source: [ ['星期一', 120, 132, 101, 134, 90, 230, 210], ['星期二', 220, 182, 191, 234, 290, 330, 310], ['星期三', 150, 232, 201, 154, 190, 330, 410], ['星期四', 320, 332, 301, 334, 390, 330, 320], ['星期五', 820, 932, 901, 934, 1290, 1330, 1320] ] }, series: [] }; // 循环遍历数据，为每个柱状图添加配置项 for (var i = 0; i < option.dataset.source[0].length - 1; i++) { option.series.push({ type: 'bar', encode: { // 指定数据来源 x: 0, y: i + 1 }, // 颜色 itemStyle: { color: 'rgb(' + (i * 30) + ', ' + (i * 50) + ', ' + (i * 80) + ')' } }); } // 绘制图表 myChart.setOption(option); ``` 在这个示例中，首先定义了初始的图表配置项 `option`，其中 `dataset` 用于指定所有的数据，`series` 用于存放要绘制的柱状图的配置项。 然后使用循环遍历的方式，为每个要绘制的柱状图添加配置项，并将其添加到 `option` 中的 `series` 数组中。这里使用了 `encode` 属性来指定每个柱状图的数据来源，这样可以将多个柱状图绘制在同一个图表中。 最后，调用 `myChart.setOption(option)` 方法绘制图表。 使用数据驱动方式，可以提高图表的性能，同时也可以方便地绘制多个柱状图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

讓丄帝愛伱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值