echarts父组件向子组件传值报错

最新推荐文章于 2023-02-07 08:46:39 发布
最新推荐文章于 2023-02-07 08:46:39 发布
阅读量390 收藏 1
点赞数
分类专栏： echarts 文章标签： vue.js 数据可视化 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44706621/article/details/115669000
版权

对于echarts 一直都是云里雾里

开发时候碰到一个问题一直在那儿倒腾，最后九牛二虎再加外圈刮，摸索出来了

先上图看报错
在这里插入图片描述

好家伙 本以为一切都好了 没想到控制台报错了。对于这个错一直蒙状态

审视代码于是发现是数据问题，查阅了官网及各种资料发现，只需要加上两个细节点就可以。以图为证。

1.先加一个数据监听函数

在这里插入图片描述

2.再在父组件将数据过滤一遍，确保出过去的数据有值。

在这里插入图片描述

↓↓↓ 个人写的一个公众号，还在完善中 ，欢迎加入↓↓↓ | ᴥ•́ )✧ ↓↓↓

在这里插入图片描述

@搬砖小能手
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Axure集成echarts图表组件.rplib
06-28
主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括...echarts Ax
微信小程序Echarts图表组件使用方法详解
10-16
主要介绍了微信小程序Echarts图表组件使用方法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，
Vue使用Echarts在父子组件中传值问题
达顿瓦珠
06-16 832
最近项目上需要使用到Echarts做数据可视化，在写项目过程中发现在子组件中通过Echarts点击事件传值给父组件不起作用的问题，研究了一下，发现是作用域问题，解决fang'fa
Vue解决报错11_父组件使用子组件的echarts折线图不能显示（父组件传值慢于子组件初始化导致）
xiaosi的博客
11-07 1360
一、问题描述 父组件发送请求获取数据，然后父组件传值给子组件的折线图，但是发现子组件显示空白，尽管在mounted()已经使用赋值了 // 填充数据 initData() { this.optionValue.series = this.value.series; this.optionValue.xAxis = this.value.xAxis; }, 使用log日志查看赋值并未生效 this.chartLine = echarts.init(document
vue父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
weixin_52936828的博客
12-03 1745
问题：一个业务场景，就是一个父组件之间多次调用同一个echarts组件，这样就会产生id同样的问题，导致只能渲染一个echarts组件。 解决方案： 之前的echarts初始化 <div id="echarts" /> echarts.init(document.getElementById('echarts')) 改成 <div ref="echarts" /> echarts.init(this.$refs.echarts) 将id获取元素 换成 ref获取元素。
父给组件传递数据时报错
m0_51495556的博客
04-21 354
父给传子组件传递数据时报错 父组件 子组件 情况一：如果父组件发送请求后服务器的数据没有返回来导致父组件中的数据为空，这时传给子组件时的数据就是undefind 解决方法：给当前父组件计算出新的属性 、 传入到子组件中再重新计算属性获取数组 最后通过计算出属性获取到响应的数据 ...
vue 父子组件互相传值容易出现的报错
liudanyang_21的博客
08-17 776
对于父子组件之间的互相传值，报错如下： [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "propTextTip" 大概意思是：避免直接更改一
vue 封装的 echarts 组件
03-05
vue 封装的 echarts 组件，主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用，数据被覆盖问题解决办法。
使用Vue开发动态刷新Echarts组件的教程详解
08-27
props 中定义了 id、width、height 和 option 等属性，这些属性将在父组件中传递。data 中定义了一个 chart 属性，用于存储 Echarts 实例。computed 中定义了一个 style 属性，用于计算组件的高度和宽度。methods 中...
vue 引入echart 图表使用
zhao142731的博客
11-08 524
第一步：安装echarts依赖 cnpm install echarts -S 第二步：在main.js中全局引入 import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts 第三步：在你的组件或页面中 a.vue <div id="myChart" :style="{width: '600px', height: '600px'}"></div> js部分代码： export defa
react-Echarts的React封装各种配置项可以写成子组件的形式
08-15
Echarts 的 React 封装，各种配置项可以写成子组件的形式
vue引入echarts遇到的报错问题
weixin_63102971的博客
08-11 2862
vue引入echarts遇到的报错问题：在浏览器一直报“reading init”；在浏览器报“reading ‘getAttribute’”
如何解决在ie下，Echarts多次使用setOption更改数据时，数据错乱问题
weixin_34248705的博客
02-28 939
一、问题描述 根据用户的操作，通过Ajax请求，获取某段时间内的某数据趋势折线图数据。用户切换数据项或更改时间段时，ie中渲染的折线图包含了上一次获取的数据，导致数据错乱，如下图所示： 二、代码 数据项1setOption代码： myChart3.setOption({ tooltip: { trigger: 'axis', ...
父组件的值传给子组件echarts
eternal_tc的博客
03-31 2597
案例为父组件的时间选择框传值给子组件。
父子组件当中，父组件调接口传值到子组件，初始情况下图表不显示（echarts）
一笔浓墨画佳人的博客
02-07 451
我初始化是只展示一部分，这时候我们给子组件里面展示数据的部分加一个定时器就好了。如果定时器写的一秒还是不行的话，就往大写几秒。
vue中echarts父子组件异步传值
weixin_52919504的博客
09-27 1519
vue中echarts父子组件异步传值
echart 绑定点击事件无效，原因是属性设置错误
Bright2017的博客
12-03 7838
最近做的项目需要联动两个图表，点击在折线图或者柱状图柱子上，触发事件。 正常做法就是给图表绑定上click事件即可，但这次绑定后却无效。 最终发现是属性设置问题 silent:true// 是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 改为true或者干脆不设置这个属性即可。 子组件中 this.$emit("loadedChart", this.charts); 在组件上绑定事件 @loadedChart="manufactorClick" manuf...
vue中echarts爬坑笔记（二） 父组件异步获取的数据给子组件，子组件报错或数据不更新
Cynthia_Yue27的博客
04-11 3017
父组件从后台请求的数据传给echarts所在的子组件遇到的问题： 1、父组件数据在没有设置初始值情况下，子组件接受到的数据报错： 类似这种：data.count is not a function 在子组件的mounted里面打印父组件传递过来的数据，发现是空的。 在给父组件赋初始值后，报错消失，说明父组件将初始值传给子组件更新视图是在父组件从后台获取数据之前，从而导致第二个问题 2、父组件有初始...
vue3父组件给echarts子组件传值
最新发布
09-25
以下是一个例子，演示了父组件给echarts子组件传值的过程： 组件： ``` <echarts-component :chartData="data"></echarts-component> import EchartsComponent from './EchartsComponent.vue'; export ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值