echarts图表当年月筛选项切换后无法重新刷新问题

最新推荐文章于 2024-06-05 09:57:16 发布
转载 最新推荐文章于 2024-06-05 09:57:16 发布 · 676 阅读 · 0

博客指出特殊情况下用ECharts实例并setOption()无法刷新表格内容，如修改div容器内部标签。原因是破坏了第一次渲染的div容器结构，ECharts渲染会匹配div容器属性值，破坏结构则无法重新渲染。给出解决办法，但此操作会重新操作DOM影响性能。

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

在特殊情况下,我们可能是用echarts实例并且setOption()但无法刷新表格内容,例如:我们修改了div容器的内部标签等等…

原因可能是我们破坏了第一次渲染的div容器的结构,

echarts的渲染逻辑是这样的:
如果未实例化则进行实例化过程,在此期间会在div容器生成一个 echarts_instance 属性, 该属性值其实就是当前echarts的ID,然后进行后边的渲染操作…

当我们刷新已经实例化的echarts图表时,echarts会先匹配改div容器上的_echarts_instance_属性值是否与实例对象的ID一样,如果一样则会在原有的结构上进行渲染,但是因为我破坏了原有的结构,所以无法重新渲染出表格内容,所以我们可以执行如下代码:

        var solvetime_chart = echarts.init(document.getElementById("solvetime_chart"));
        document.getElementById('solvetime_chart').setAttribute('_echarts_instance_', '')

这样div的_echarts_instance_值就不会被匹配到,这样echarts就会像渲染新的图标一样渲染出来

注:这样的操作会重新渲染echarts的div容器结构,也就是重新操作了dom,会影响性能

猫寧
关注
echarts柱状图实现select下拉刷新数据
weixin_43092301的博客
04-15 7690
echarts柱状图实现select下拉刷新数据 废话少说，直接上代码 <div>月度 <select id="year_data"> <option value="1" class="active">3月</option> <option value="2">4月</option> &...
ECharts---一个非常炫酷好用的图表库。发现自己写的好详细。怪不得当时弄那么久。
FOR 的博客
11-24 3585
ECharts_study 对于渲染可视化图标的库有许多，因为项目需要，我学习了 Echarts 。完整叫 Apache ECharts 很多图在基本的准备部分不会详细说明，因此初学一定要看基本准备的部分 另外 ，图表真的很多 ， 官网 什么是 Echarts ECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观
jQuery+Echarts实现按年月数据统计柱状图表代码
06-10
jQuery+Echarts图表插件实现按年月数据统计柱状图表代码，按年月分类的访客数据统计分布图表实例代码。
Echars图表插件-图标options更新，但图表不更新
weixin_33701251的博客
11-16 543
描述：每次根据不同条筛选时，之前不需要展示的图标数据同样存在，这是echarts内部封装的，原理是你在根据条件进行筛选时，新数据与旧数据会合并，并不是重新进行渲染。 解决方式：在调用图标数据是，加true条件 myChart.setOption(option,true); 转载于:https://www.cnblogs.com/jiangze-blog/p/7844779.html...
echarts - 数据更新但图表不更新
kelly0721的博客
02-22 2667
echarts重绘、setOption
elementui select组件选中后页面无法刷新
weixin_48877974的博客
11-18 537
elementui select组件选中后页面无法刷新选中了值但是回显的内容不会同步刷新 在 select组件中的 change 方法使用 this.$forceUpdate() change (val){ this.$forceUpdate() } 可以有效解决此问题
Echarts重新加载数据但不重新渲染的原因和解决方法
rhcjqmm666的博客
06-24 7349
Echarts重新加载数据但不重新渲染的原因和解决方法
下拉框选择事件动态加载echart数据
01-22
在本文中，我们将深入探讨如何在用户选择下拉框选项时动态加载ECharts图表的数据。ECharts是一款由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，强大的交互功能，以及灵活的数据接入方式，使得在...
Echarts图表数据更新技巧：背景动态变化的技术细节大公开
## 数据的动态更新：Echarts图表技术的精髓 在信息可视化领域，Echarts作为一款强大的图表库，其核心竞争力之一在于其数据动态更新的能力。不论是实时监控、数据分析还是交互式报告，Echarts能够通过高效的数据更新...
ECharts数据可视化学习笔记（温故而知新）
qq_64510496的博客
07-14 256
ECharts是一个使用JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts年月日切换图表
羊羊羊羊羊羊羊的博客
08-10 8677
效果： <div class="w30LFwid bgs mt15"> <h3 class="totalt_title"> <span class="titleIcon"> </span> 社区参与人数 </h3> <div class="w30sTab"> <ul c
微信小程序动态数据渲染echarts图表及不渲染图表问题
Cangwuwuwu
05-29 3593
import echarts from '../../../ec-canvas/echarts' const app = getApp(); var recipeChart = null; //全局变量 存储动态查询的数据 function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.s
解决：ECharts数据更新后，图表没有更新问题
陈暗暗的博客
05-12 7599
问题：ECharts图表数据我们都是从后台获取，点击查询重新获取数据时发现图表没有刷新 原因：代码 myChart.setOption(option); setOption有3个属性，setOption(option,notMerge,lazyUpdate); 第二个notMerge默认为false,即默认合并两个数据 解决：设置为true myChart.setOption(option,true); ...
echarts数据更新没反应解决方案
html网页设计、web前后端网站制作、大学生网页设计作业、jQuery网站设计、uniapp小程序、vue网站设计、网页成品模板、期末大作业，各种源码应有尽有，持续更新中...
06-05 1607
【代码】echarts数据更新没反应解决方案。
关于数据更新或方法从新调用时echarts图表不更新不从新加载的解决办法
m0_64684712的博客
03-02 3208
// 在每次echarts挂载前先用dispose()把之前的实例销毁这样每次执行函数时图表就都会从新加载 this.$echarts.init(document.querySelector('.centerTop-body')).dispose()
Echarts 实现点击更新图表（图标联动）
忧天的杞人
06-28 2199
Echarts 实现点击更新图表（图标联动） 因为需要，领导要求做一个统计页面，要能点击图表实现数据更新 先上Demo 3.首先要在echarts 官网上下载最新的echarts,图中的圆角pie图和rose图就是最新版本的特性。 官网地址：Apache ECharts 4.html页面要加入三个div用来承载echarts的渲染，注意div一定要有高度，否则是渲染不出来的 <div style="width:100%" id="initBar"></div> 我这里没写高
echars中点击搜索或者切换条件，更新图表数据
lll19960406的博客
05-17 640
在开发时候，有很大的可能性碰到修改搜索条件，然后改变柱状图或者折线图 其实使用的时候很简单， let myChartss = this.$echarts.init(document.getElementById("myChart"), null); 中间的option定义我省略了，需要自己补上哈 myChartss.setOption(pie,true); 但是需要注意的是，你的数据如果是...
echarts+thinkphp+sql实现的筛选时间，分组，对应在日历中显示该月份的对应天数巡查次数。
qq_1521514763的博客
07-28 2090
1.数据库表： a)用户表 b)组表 c)巡查记录表 2.数据类型 1.前台生成： /** * 创建前十年 * */ function getYears(){var date = new Date(); var noewYear = date.getFullYear(); var mm = []; for(var i = 0 ; i < 10; i++)
echarts异步数据加载(在下拉框选择事件中异步更新数据)
weixin_34174132的博客
01-22 1302
接触echarts 大半年了,从不会到熟练也做过不少的图表，隔了一段时间没使用这玩意，好多东西真心容易忘了。在接触echarts这期间也没有总结什么东西，今天我就来总结一下如何在echart中异步加载数据，在实际的工作的中对数据的刷选非常常见，比如在下拉框中选择，时间选择等的一些事件中异步加载数据。一个很常见的筛选如图： 下面我就直接用代码来实现怎样...
vue3使用多选框切换echarts
最新发布
04-02
### Vue3 中通过多选框控制 ECharts 的显示与切换 在 Vue3 中实现通过多选框 (checkbox) 控制 ECharts 图表的显示与交互功能，可以通过监听多选框的状态变化来动态更新图表的数据或样式。以下是具体的实现方式： #### 实现逻辑说明 1. 使用 `ref` 或者 `reactive` 定义响应式的图表数据源。 2. 绑定多选框到一个数组变量上，该数组用于存储当前被勾选的选项。 3. 当多选框状态发生变化时，触发事件处理函数重新设置图表配置项并调用 `setOption` 方法刷新图表。 #### 示例代码 以下是一个完整的示例，展示如何利用 Vue3 和 ECharts 来实现这一需求： ```javascript <template> <div class="app"> <!-- 多选框 --> <label v-for="(item, index) in options" :key="index"> <input type="checkbox" :value="item.value" v-model="selectedOptions"> {{ item.label }} </label> <!-- ECharts 图表容器 --> <div ref="chartRef" style="width: 600px; height: 400px;"></div> </div> </template> <script setup> import { ref, onMounted, watch } from 'vue'; import * as echarts from 'echarts'; // 数据定义 const chartRef = ref(null); const myChart = ref(null); const options = [ { label: '类别A', value: 'A' }, { label: '类别B', value: 'B' }, { label: '类别C', value: 'C' } ]; const selectedOptions = ref(['A']); // 默认选中的选项 onMounted(() => { initChart(); }); watch(selectedOptions, () => { updateChart(); }); function initChart() { const chartDom = chartRef.value; if (!chartDom) return; myChart.value = echarts.init(chartDom); updateChart(); // 初始化完成后立即渲染一次图表 } function updateChart() { const dataMap = { A: ['苹果', 5], B: ['香蕉', 8], C: ['橙子', 7] }; const filteredData = Object.keys(dataMap).filter(key => selectedOptions.value.includes(key)) .map(key => dataMap[key]); const option = { tooltip: {}, xAxis: { type: 'category', data: filteredData.map(item => item[0]) }, yAxis: { type: 'value' }, series: [{ data: filteredData.map(item => item[1]), type: 'bar' // 设置为柱状图[^2] }] }; myChart.value.setOption(option); // 更新图表配置 } </script> <style scoped> .app { display: flex; flex-direction: column; align-items: center; } </style> ``` #### 关键点解析 - **多选框绑定**：使用 `v-model` 将多选框的状态同步至 `selectedOptions` 数组中。 - **动态过滤数据**：当多选框状态改变时，根据 `selectedOptions` 动态筛选出需要显示的数据。 - **ECharts 配置更新**：每次修改数据后都需要调用 `myChart.setOption()` 方法刷新图表[^1]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值