使用vue-echarts绘图更新option视图不更新问题

最新推荐文章于 2024-06-20 17:18:58 发布
最新推荐文章于 2024-06-20 17:18:58 发布
阅读量3.1k 收藏 2
点赞数 2
分类专栏： ts 文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao_a_fighting/article/details/128537715
版权

在更新echarts视图的配置项时，在对echarts图本身的配置项进行修改的时候，删除新增的图表配置，视图并不会更新，查看原因之后可以发现是因为对于echarts来说，为了提升效率，会自动将图表的option与之前的option进行合并， 但是当图表，根据传进来的option变化的时候，比如折线图当传进来两列数据的时候绘制一条线，传进一列数据时就绘制一条线。如果直接通过修改数据配置项，当添加一条折线时是正常的，如果删除一条折线，就会因为option的自动合并特性导致删除失败，这个时候只要利用:update-options=“{ notMerge: true }” 不让数据自动进行合并就可以解决这一问题

MonsterQy
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts option常用属性配置文档
2401_84093019的博客
05-05 864
定义在选中范围中的视觉元素。color: 图元的颜色。min: 3, // 设置组件的允许的最小值max: 99, // 设置组件的允许的最大值calculable: true, // 设置手柄能拖拽realtime: true, // 拖拽时实时更新precision: 1, // 小数精度itemWidth: 20, // 图形宽度itemHeight: 150, // 图形高度inRange: { // 设置图元的颜色},
vue3.0与echarts5.0
m0_73265535的博客
05-17 581
数据可视化这一概念自1987年正式提出，经过30余年的发展，逐渐形成3个分支：科学计算可视化(scientific visualization)、信息可视化(information visualization)和可视分析(visual analytics)。近些年来，这3个子领域出现了逐渐融合的趋势。我们统称为“数据可视化”。什么是数据可视化？顾名思义，数据可视化就是将数据转换成图或表等，以一种更直观的方式展现和呈现数据。
vue-echarts：动态赋值series，更新options
ansheng02的博客
09-13 4078
这个是为了记录下解决的bug，问题场景： 初次请求数据：国家参数为 5 个，这个时候，筛选国家列表数据， 当筛选的数据少于 5 个时，比如筛选了2个国家，则多出来的3条线会重合最后一条数据的线上，在点击图例“不显示该条数据”的时候，还是会显示剩余的三条线； 当筛选的数据多于 5 个，这个时候，筛选国家，会出现最少两个数据 的 折线和图例对不上，出现互换的情况。 解析： 出现这样的问题原本的猜测是 颜色设置有问题，考虑的解决方案是： 1. 在动态赋值 serie...
echart的数据渲染，option不刷新问题
Coco_998的博客
03-03 3909
解决echart的不自动刷新图表数据的问题
处理ECharts收到的数据,动态option
最新发布
m0_63450672的博客
06-20 384
因为 ECharts 中 option 需要的数据不同 例如 series 柱状图中 series 是数组类的值 这时候我们就需要将data的数据处理成 {name:xxxx1, type: 'bar', data:[15,12]} 这种格式。
vue3 中使用echarts数据不更新问题
qq_41978004的博客
04-11 1017
折腾一下午，naive-ui中使用echarts数据不更新，不说那么多，直接上代码。子组件中BarChart.vue。父组件index.vue。
Vue-echarts 更改配置options没有触发视图更新问题解决——配置notMerge:true
japlus的博客
07-22 7538
前提 echart@5.1.2 vue-echarts@6.0.0-rc.6 vue-echarts是个将echarts封装为vue组件的包 引入后，代码中可以使用<v-chart :option="chartOption"/>来绘制表格 现象 this.chartOption更改后，如果内容比原来多，则会触发更新，反之不会。 例如点击按钮后将this.chartOption设置为空对象{}，发现图表并未更新。 this.chartOption输出发现已改变。 调查 根据官.
笔记：echarts更新数据的方法，更新配置
简析的博客
07-19 1724
//初始创建 var myChart = echarts.init(document.getElementById('main')); var option = {........} myChart.setOption(option); function refreshData(data){ //刷新数据 var option = myChart.getOption()...
vue 图表组件_基于Vue.js中可用的JUI图表的Vue组件
cuk5239的博客
07-24 1384
vue 图表组件 可视图 (vue-graph) A vue component library based on the JUI charts available in vuejs. 基于vuejs中可用的JUI图表的vue组件库。 View demo 查看演示 Download Source 下载源 安装 (Installation) NPM (NPM) npm install --...
ECharts---一个非常炫酷好用的图表库。发现自己写的好详细。怪不得当时弄那么久。
FOR 的博客
11-24 3266
ECharts_study 对于渲染可视化图标的库有许多，因为项目需要，我学习了 Echarts 。完整叫 Apache ECharts 很多图在基本的准备部分不会详细说明，因此初学一定要看基本准备的部分 另外 ，图表真的很多 ， 官网 什么是 Echarts ECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观
echarts的option
04-21
echarts的option
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
01-21
1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新； 2.解决办法： 数据更新时以为drawLine()函数在updated()里面执行（这种情况之前碰到过），后来发现热更新之后视图更新了，所以跟周期函数没有关系；参考了一下网上的一些资料，发现可以用vue中的watch()函数来监听数据的更新，一旦数据更新了，那么就在watch()函数中调用drawLine()函数，发现视图更新了，完美解决。 补充知识：vue echarts line动态刷新数据组件 我就废话不多说了，大家还是直接看代码吧~ <template> <div class=
ECharts查看option更新了，但是图不更新
qq_20842829的博客
08-23 235
更新前先清空chart.clear();
Echars图表插件-图标options更新，但图表不更新
weixin_33701251的博客
11-16 504
描述：每次根据不同条筛选时，之前不需要展示的图标数据同样存在，这是echarts内部封装的，原理是你在根据条件进行筛选时，新数据与旧数据会合并，并不是重新进行渲染。 解决方式：在调用图标数据是，加true条件 myChart.setOption(option,true); 转载于:https://www.cnblogs.com/jiangze-blog/p/7844779.html...
Echarts 图表数据更新 但是页面不更新
A_sky_的博客
11-23 303
将新数据赋值给图表数据之前，先清空或删除原数据，之后再重新渲染，就会监听到数据更新，然后更新图表。
echarts数据更新了图表没更新
song_Web的博客
11-15 2213
做折线图图表时遇到如下多选框选中值变化，数据更新，但是图表没更新的问题
echarts更新数据的方法
weixin_30439067的博客
06-27 812
//初始创建 var myChart = echarts.init(document.getElementById('main')); var option = {........} myChart.setOption(option); function refreshData(data){ //刷新数据 var option = myChart....
Vue-ECharts的使用
delmarks的博客
02-06 218
Vue-ECharts是一款基于Apache ECharts 5的Vue.js组件。它同时支持 Vue.js 2/3。可以使您快速的制作出线形图、柱状图、饼状图等各种漂亮的图表。
echarts遇到数据更新，视图未更新两种解决方法
KMINLIKE的博客
03-01 1623
方法二： setOption有3个属性，setOption(option,notMerge,lazyUpdate);第二个notMerge默认为false,即默认合并数据，设置成true之后就不合并数据，从而实现刷新页面的效果。方法一：添加 trendcharts.clear() 是清空当前实例，会移除实例中所有的组件和图表。
vue2中使用vue-echarts
10-15
要在Vue2中使用vue-echarts，需要先安装vue-echarts和echarts： 1. 安装vue-echarts和echarts： ``` npm install vue-echarts echarts --save ``` 2. 在main.js中引入vue-echarts和echarts： ```javascript import Vue from 'vue' import ECharts from 'vue-echarts/components/ECharts.vue' import 'echarts/lib/chart/bar' import 'echarts/lib/component/tooltip' Vue.component('v-chart', ECharts) ``` 3. 在组件中使用v-chart标签，并传入options属性： ```html <template> <v-chart :options="chartOptions"></v-chart> </template> <script> export default { data() { return { chartOptions: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'bar' }] } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值