关于Echars组件传值刷新问题

最新推荐文章于 2024-08-27 15:45:31 发布
最新推荐文章于 2024-08-27 15:45:31 发布
阅读量250 收藏
点赞数
文章标签： html 前端 javascript echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asgfcsdn/article/details/130763639
版权
当封装的组件在值变化时不刷新时，可能是因为缺少了canvas的刷新机制。文章提出了三种解决方案：1)使用v-if根据cityData长度判断组件生成；2)通过:value监听formData变化控制刷新；3)添加key绑定city以监控下拉表变量。如果在组件上绑定无效，可以尝试绑定到父盒子上。
摘要由CSDN通过智能技术生成

目标效果：

 当自己封装组件传值没有传声变化是应该是没有写原生的canvas刷新，但是无妨，以下操作会解决你的问题

1. 通过v-if判断组件是否生成

v-if="cityData.length"

2. 通过value监听数据变化控制组件是否刷新

:value="formData"

3.当然通过上面的效果是因为x轴数据与y轴都有值，但是x轴数组中的数据都为0，等于没有值，这是就算数组中的值改变，组件还是没刷新，这时我们给组件添加下拉表中的变量进行监控即可

:key="city"

以上方法绑定若在组件身上没有生效的话，绑定在其父盒子上一样生效

Ashindn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue 封装的 Echarts 组件 如何添加点击事件
qq_42058976的博客
09-23 2879
前言： 接手vue封装的Echarts组件不知到如何添加点击事件，通过阅读Echarts api文档解决了bug。 首先在下面代码中 在mounted钩子执行时挂载函数 mounted() { this.$nextTick(() => { this.initChart(); }); }, 带有参数是可以获取图标参数 箭头函数指向全局，普通函数指向Echarts methods: { initChart() { this.chart = ec
将echarts 封装为vue组件 动态加载数据——以饼状图为例
04-23 4108
基本原理： 1、创建一个用于展示图形的vue组件，保留接收数据的接口，作为子组件使用。 2、在父组件中引用上述子组件，同时传递数据给子组件。 本文在main.js中全局引入echarts，代码为： import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts 子组件echartscom.vue： <template> <div class="echartsCommon"> <div sty
vue echarts 饼图 代码全_vue多个图表组件 动态刷新数据的问题
weixin_39924307的博客
11-25 678
数据大屏 关于多个图表组件 动态刷新数据的问题通过深度监听 实现 参照：Vue封装Echarts子组件 动态更新图表展示​www.jianshu.com使用Vue开发动态刷新Echarts组件的教程详解_vue.js_脚本之家​www.jb51.net实现代码<template> <div class="GABox"> <div id="GA"...
封装echarts组件动态数据，内容更新
T23332的博客
04-23 398
更改数值之后，记得将舒适化方法放在this.$nextTick（）回调中，1.父子组件传值，监听收到的值，然后调用初始化方法。确保在数据更新完成后再进行图表渲染。2.绑定ref,调用初始化方法。
echarts无法更新显示内容
当然是最帅气的茶茶丸了！哇耶~
02-03 287
【代码】echarts无法更新显示内容。
vue3 父组件向echarts图表组件传值问题
好好学习，好好生活
02-25 506
1、问题：当echarts图表的数据是由父组件传过来时，echarts图表不显示，发现子组件获取的props为空。3、解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染。2、原因：发现echarts是在渲染的时候就传递数据。
在vue项目中echarts父子组件异步传值，解决数据更新，echarts页面不更新问题
qq_41920758的博客
06-27 1692
echarts图表是作为子组件进行展示的，需要父组件发送请求并获取到返回数据后再传给子组件进行数据展示，但是由于子组件比父组件先渲染，所以就会导致子组件获取不到父组件传递的数据。// 源IP地址echarts 渲染的echarts在组件种渲染 接口数组由父组件传入。在子组件中，通过props接收父组件的数据，并通过watch监听。// 检测是否已经存在echarts实例，如果不存在，则不再去初始化。// 监测父组件传过来的数据进行处理成柱形echarts需要的格式。首先，在父组件中引入子组件并注册。
vue封装echarts传值实时刷新
06-09
为了实现Vue中封装Echarts并实现实时刷新，可以按照以下步骤进行： 1. 在Vue的组件中引入Echarts依赖： ...这样，每当父组件中的数据更新时，调用子组件的方法更新Echarts图表，从而实现了Echarts的实时刷新。
echars vue 添加数据没更新_解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)...
weixin_39520979的博客
12-22 701
1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新；2.解决办法：数据更新时以为drawLine()函数在updated()里面执行(这种情况之前碰到过)，后来发现热更新之后视图更新了，所以跟周期函数没有关系；参考了一下网上的一些资料，发现可以用vue中的watch()函数来监听数据的更新，一旦数据更新了，那么就在watch()函数中调用drawLi...
Vue(ElementUI)使用Echarts(三)——Ajax异步获取数据赋值给Echarts
m0_61820867的博客
07-15 2603
介绍了Ajax异步获取数据如何赋值给Echarts
vue动态渲染echarts,以及多次调用组件数据更新时组件无法同步刷新详解
weixin_44283589的博客
07-21 2417
数据在vue中是被灵活操作的 当遇到如图这种echarts的数据需要通过接口获取,并且进行相应的删除和添加操作时,echarts的数量与数据要与数据同步刷新 想要独立的echarts动态渲染,我想到通过封装echarts组件通过props传递接口数据来实现 import yearCom from "./yearCom.vue";//在父组件中引入封装好的echarts组件 export default { components: { yearCom },//注册组件 data() {} } 我
在子组件中使用Echarts图表无法刷新显示的问题（解决：子组件刷新）
黑胡子大叔的博客
04-12 2110
场景问题 在项目中，子组件中使用了Echarts的图表，图表的数据需要从父组件传入Id来进行查询，墒情仪与气象站相同的结构，当切换设备时，图表无法回显，父子组件传值正常。 解决心路历程 1、我将两种设备传值的Id分开传递，处理无果 2、给子组件赋key，每次点击设备标识 key++，修订成功 <template v-if="instrumentValue == 0 && facilityId != ''"> <Soil
echarts 数据重置图表刷新，带动画效果刷新
一碗老面的博客
12-10 1万+
1.数据源更新，图表刷新，带动画 constmyChart=this.$echarts.init(_id); myChart.clear(); myChart.setOption(option,true); 2.监听窗口变化，重置echarts表格 window.onresize = function () { mycharts.resize(); };
Echarts图表及数据刷新问题
weixin_43844440的博客
02-19 1万+
1.Echarts切换数据后，原数据还在图表上 可以详见ECharts官网对setOption的解释：https://echarts.apache.org/zh/api.html#echartsInstance.setOption 官方举例： chart.setOption(option, notMerge, lazyUpdate); 1.notMerge: boolean 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true，表示所有组件都会被删除，然后根
echarts 刷新数据问题
aa326026508的博客
06-08 6103
echarts刷新数据时，出现了一点问题，当暂无数据的气泡出来后，再刷新数据，那些气泡不会消失，导致新数据被遮住，如图。解决办法是重新初始化echarts，调用代码： require([ 'echarts',       'echarts/chart/bar', 'echarts/chart/line' ], function(ec) {       myChart = ec.ini
echarts更新数据的方法，更新配置
热门推荐
前端小狮的博客
01-30 6万+
//初始创建 var myChart = echarts.init(document.getElementById('main')); var option = {........} myChart.setOption(option); function refreshData(data){ //刷新数据 var option = myChart.getOption();...
刷新当前ECharts数据
qq_39884760的博客
01-17 3734
首先在绿色部分是获取当前ECharts的所有值，用一个对象接收。 然后在黄色圈圈中重新给option赋值，即可做到刷新EChart。
30分钟从零开始入门拿下 HTML
最新发布
Y_1215的博客
08-27 1130
HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.类似⻜书⽂档,Word⽂档如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"我是⼀级标题我是⼆级标题
vue3父组件给echarts子组件传值
09-25
在Vue3中，父组件给子组件传值可以通过props进行实现。首先，在父组件中定义需要传递给子组件的数据，然后在子组件中通过props接收这些数据。确保在父组件中使用子组件时，将需要传递的数据作为props的属性值传递给子组件即可。 以下是一个例子，演示了父组件给echarts子组件传值的过程： 组件： ``` <template> <div> <echarts-component :chartData="data"></echarts-component> </div> </template> <script> import EchartsComponent from './EchartsComponent.vue'; export default { components: { EchartsComponent }, data() { return { data: '这是传递给子组件的数据' }; } }; </script> ``` 子组件： ``` <template> <div> <p>{{ chartData }}</p> </div> </template> <script> export default { props: ['chartData'] }; </script> ``` 在这个例子中，父组件中定义了一个名为data的数据，然后将这个数据传递给子组件EchartsComponent的chartData属性。在子组件中，使用props来接收并显示这个数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Ashindn

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

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

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

打赏作者

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

抵扣说明：

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

余额充值