Vue使用Echarts在父子组件中传值问题

最新推荐文章于 2023-08-14 08:42:07 发布

达顿瓦珠

最新推荐文章于 2023-08-14 08:42:07 发布

阅读量867

点赞数 2

本文链接：https://blog.csdn.net/qq_45181637/article/details/117962482

版权

最近项目上需要使用到Echarts做数据可视化，在写项目过程中发现在子组件中通过Echarts点击事件传值给父组件不起作用，研究了一下，发现是作用域问题，解决方法如下：

原代码：

通过保存外部作用域this得以解决

修改后代码：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

达顿瓦珠

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

eCharts柱状图点击传值

Deku_Ln的博客

10-02

2383

以Angular为例，这里我将echarts封装成一个子组件，通过父子组件传值来将点击后的数据传给父组件来进行相关操作 // 子组件 @Output() titleName? = new EventEmitter() this.eCharts.init(this.bar_charts.nativeElement).on('click', params => { this.partsName = params.name // params作为参数记录当前

vue+echarts 父子组件传值及同页面使用一个组件绘制多个图表的案例（按需引入）

又青_CSDN的博客

04-29

992

vue+echarts 父子组件传值及同页面使用一个组件绘制多个图表的案例（按需引入）最终的效果图，还需要做一些视觉效果，只需要在子组件里面编写就可以子组件内容 v-bind:id就是绑定id，从父组件获得不同的id，不然id相同echarts画图时无法识别图表就显示不出来。ref绑定data用于同一个页面可以重复调用子组件，以便获得不同的data。  <template> <div class="echarts"> &l

1 条评论您还未登录，请先登录后发表或查看评论

vue echarts图标按钮给父组件传递值 this.$emit is not a function

最新发布

tenc1239的博客

08-14

540

2 父组件定义方法IsMultiChartEvent 监听emit 的updateIsMultiChart 事件 3 事件和监听方法绑定 -> 数据传递

echarts图表展示，父组件请求数据传递与子组件watch监听

Xiaoxiao_junjun的博客

02-25

768

echarts图表展示，父组件请求数据传递与子组件watch监听。要展示一个echarts图表，父组件请求后台数据传递到echarts组件，echarts图表显示不出来

vue中echarts爬坑笔记（二）父组件异步获取的数据给子组件，子组件报错或数据不更新

Cynthia_Yue27的博客

04-11

3043

父组件从后台请求的数据传给echarts所在的子组件遇到的问题： 1、父组件数据在没有设置初始值情况下，子组件接受到的数据报错：类似这种：data.count is not a function 在子组件的mounted里面打印父组件传递过来的数据，发现是空的。在给父组件赋初始值后，报错消失，说明父组件将初始值传给子组件更新视图是在父组件从后台获取数据之前，从而导致第二个问题 2、父组件有初始...

vue中echarts父子组件异步传值

weixin_52919504的博客

09-27

1537

vue中echarts父子组件异步传值

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

weixin_44706621的博客

04-13

403

对于echarts 一直都是云里雾里开发时候碰到一个问题一直在那儿倒腾，最后九牛二虎再加外圈刮，摸索出来了先上图看报错好家伙本以为一切都好了没想到控制台报错了。对于这个错一直蒙状态审视代码于是发现是数据问题，查阅了官网及各种资料发现，只需要加上两个细节点就可以。以图为证。 1.先加一个数据监听函数 2.再在父组件将数据过滤一遍，确保出过去的数据有值。 ...

解决vue一个页面中复用同一个echarts组件的问题

01-19

但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document....

Vue封装ECharts组件实现动态复用

qq_39064418的博客

03-31

1573

(ps: 给个✨star✨吧~~)

vue父子组件传值的一些坑（深浅拷贝）

MYNAMEL的博客

08-19

1706

本文章转载：https://www.yht7.com/news/116487 1.问题描述父组件传值给子组件，子组件改变传过来的值后，父组件的值也会跟着改变。这个问题比较冷门，平时如果对组件通信使用得比较简单，一般不会遇到。 2.原因剖析核心：双向绑定父子组件传值的时候涉及双向绑定，当传值为 object 类型时，传值之后数据源会被改变。深拷贝与浅拷贝下文详细讲。 3.解决方案我目前采用的解决办法是：传值的时候不要直接传数据源，而是通过拷贝或者定义新变量等方式传值。简单处理就 JSON.p

vue、uni-app组件封装引入及父子组件传值（保姆级教程）

兄弟连之一个前端小白的成长

05-20

734

uni-app之页面组件封装+父子组件传值保姆级教程-(适合新手小白）

Vue(4)：Vue兄弟组件传值在echarts点击事件中的使用

偉ing的博客

05-18

1370

前言最近在用Vue+echarts+d3做一个项目，网上大多数是零散的，我把项目中遇到的问题都总结起来，放在博客下，便于日后查看以及分享一下爬坑经验。我所遇到的困难在网上大多数可以找到，但比较零散，且不好找，这是Vue项目的第四篇博客，因为也是初次使用Vue，所以多详细记录一下。这篇博客主要分享的知识点是Vue中父组件传以及echarts鼠标事件中的父组件传值，还解决了一个在父组件传值的过程中div被加载了两次的问题。 1.Vue子组件向父组件传值二话不说，先上代码。子组件代码：

vue中父组件向子组件echarts传值问题

u012232730的博客

02-03

1202

问题：当父组件传值给子组件echarts时，发现子组件获取的props为空，刚开始以为是钩子函数放错了地方，后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常原因：后来经过排查，此处省略N字，发现echarts是在渲染的时候就传递数据解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染 //父组件 <div class="chart-wrapper"> <pie-chart v-if="flag"

vue里使用echarts 关于请求数据之后，父子组件传值，视图未更新问题

YBQyyds的博客

07-21

1025

vue里使用echarts 关于请求数据之后，父子组件传值，视图未更新问题，vue echarts饼状图的应用

Vue中父组件向子组件echarts传值问题

imkaifan的博客

03-17

1528

问题描述： vue中子组件是echarts图表，父组件向子组件利用props传值，值传递过去了，但是，echarts不渲染。问题现象再深一层次：数据没有驱动试图解决办法：用v-if进行一个渲染判断上代码：父组件 <template> <div class="putongradar_container"> <div class="container_left"> <div class="title">{{ zonghNengl

echart click事件

lily1324193的博客

11-28

445

echart 添加事件： echart组件里的点击事件通过props的形式让父组件获取 echart组件： props: { //这里的事件是饼图里写好的click事件，哪个组件需要就接收 onClick:{ type: Function, default: function(){} }, }, myChart.on(‘click’, function(params) { _this.onClic...

Vue中使用Echarts时在一个父组件中引用相同的子组件自适应问题

mao0523的博客

02-11

975

问题：在一个父组件中同事引用多个相同的子组件，配置了自适应后只有一个组件大小进行了变化。（组件1）（组件2）原因：原因是因为两个组件没有分别设置idName，所以只有最后一个组件进行了变化。解决方法： ①父组件中：引用子组件时分别设置不同的idName <PieChart :chartOption="chartOption1" :chartData="chartData1" idName='chart1'></PieChart> <PieChart .

[Vue五]：vue和echarts结合，echarts图表自适应问题