echarts事件中this指向

最新推荐文章于 2024-10-22 09:09:15 发布
原创 最新推荐文章于 2024-10-22 09:09:15 发布 · 658 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决在点击事件中打印码表数据时遇到的问题，即使用this.xxx发现打印结果为undefined的情况。通过将this赋值给一个变量that，在点击事件中使用that.xxx来成功获取并打印码表数据。

问题：想在点击事件中打印码表的数据使用this.xxx却发现打印出来为undefined
解决方案：在创建图表的时候，把this赋给一个变量在这里插入图片描述
在这里插入图片描述
使用that.xxx就可以了

在Echarts区域的任何位置精准触发事件
helloworldmyself的专栏
10-15 5094
需求背景：点击Echarts区域跳转页面，跳转的区域不包括grid的坐标及标签，翻看了Echarts官网，实现触发事件之的on方法，但是此方法只能在鼠标点击某个图形上会触发，这样并不能实现需求。通过百度和查看github issue后多用Echarts实例的getZr()方法监听到整个画布的 click 事件。 ​ 使用echartsInstance.getZr().on('click' , p...
前端面试项目总结+this指向总结
qiao_qiao_happy的博客
03-03 1718
1. 做过的工作比较有创意的地方或者亮点 2020.01-2020.12 AIZOO 可视化机器学习平台 项目介绍：实现用户自定义上传算法模型和数据资源，通过可视化界面拖拽组件构建模型，提交任务，使用 slurm 集群管理自动部署模型训练，查看训练结果以及分析图表等的一站式机器学习平台。 负责内容： (1) 前端开发：采用 Vue 框架+iview 组件库，基于 WebSocket 即时通讯和 Echarts 图表库绘制 动态折线图，通过 API 接口与 Java 后台交互。 (2) 可视化构建模型：使用
ECharts设置参数时this指向的改变
a666666000的博客
04-21 446
记录ECharts项目中this指向问题
echarts数据怎么赋值 vue_vue中使用echarts点击事件，怎么赋值到vue变量
weixin_29952601的博客
12-24 709
问题描述饼图已经画好道用确常端以效的，近从于，用开通果是这近，在饼图添加点击事件，需要获取index,在赋值给 this.index,可是打印出来还是空的。貌似在点击事件中，连读取this.areaEnergy,都没二，都过发宗发数前业很断屏击和公图使分近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，办法问题出现...
关于echarts中的formatter: this.loadData拿不到data中的数据深入解析
qq_52372698的博客
07-07 4821
知其然知其所以然，echarts踩坑的小伙伴看过来，formatter中拿不到data？我来帮拿！
vue中使用echarts
Alisane的博客
11-16 550
第一种：渐变曲线图且改变网格样式 <div id="myChart1" :style="{width: '100%', height: '330px'}"></div> this.myChart1 = this.$echarts.init(document.getElementById('myChart1')) this.option1 = { // 用于区域缩放 dataZoo..
echarts点击与高亮事件经验小结
m0_66697014的博客
02-19 5831
饼图的点击与高亮事件
echarts中tooltip的formatter获取不到this
01-08
在使用 ECharts 的过程中，当尝试通过 `formatter` 函数来自定义提示框内容时，可能会遇到 `this` 关键字指向不正确的问题。这通常发生在试图访问外部变量或方法的情况下。 为了确保 `this` 正确绑定，在初始化图表...
echarts中鼠标移动到图表中的on事件怎么设置、
最新发布
03-21
需要注意的常见问题包括：事件类型是否正确、是否正确引用图表实例、事件回调的作用域问题（比如使用箭头函数避免this指向错误）、以及事件频繁触发时的性能优化，比如防抖处理。 最后，可能需要给出一个完整的代码...
echarts legend点击事件调用vue中的方法
06-02
如果你想在 ECharts 的 legend 点击事件中调用 Vue 实例中的...注意，为了在回调函数中访问 Vue 实例的方法，需要使用 `bind(this)` 来绑定回调函数的 `this` 上下文，否则回调函数中的 `this` 指向的是 ECharts 实例。
Echarts 点击事件无法使用 this 或者 this绑定的数据无法获取
qq_40896145的博客
10-22 373
给echarts绑定自定义点击事件时，无法使用this，并且无法获取到this绑定的数据。增加：const _this = this;
Echarts 的点击事件 this指向问题
YZ_ZZZ24的博客
10-29 2159
myChart.on('click',function(params){ console.log(params); }); 这样写函数内的this指向会指向echarts实例 （获取不到data里面的数据，console.log（this.xxx）为undefind） 需要将该函数变为箭头函数 // 让其变为箭头函数，才能获取this（指向window） important!!! myChart.on('click',(params...
关于Echarts图表的基本操作
蒋小姐的博客
12-16 992
关于echarts图表的配置请参考官方文档： Documentation - Apache ECharts 1.步骤 步骤一：引入echarts.js文件 步骤二：准备一个echarts实例图表的盒子（div必须存在width,height） 步骤三：初始化echarts实例对象(参数，dom，决定图标最终呈现的位置) 步骤四：准备配置项 步骤五：将配置项设置给echarts实例对象 ！！注意：除了配置项会变化，其他代码都是基本固定的 2.通用的实现图表基本功能 <templat
vue echarts内部this指向问题
weixin_45915769的博客
04-07 470
报错Uncaught TypeError: Cannot read property 'getAttribute' of null 发现console.log('dom',document.getElementById('ChartDom'))打印结果是null，console.log(this)发现这里的this指向的不是vue实例，虽然打印this.reasonSortDialog结果确实是true，但是没有显示
echarts详细设置
qq_53808870的博客
03-21 790
position: 'inside' // 可选为'left'|'right'|'top'|'bottom'// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE。// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE。// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE。
vue中使用echarts图表自适应的解决方案
xybhua的博客
12-31 478
npm 导入eachart，并在main.js配置。把echarts挂载在 prototype上方便页面调用。为了实现自适应，所以在行内样式的width设置为100%。
Echarts 点击事件，this无法正确获取到对应的属性，this的指向问题
z772330927的博客
08-17 3952
Echarts 点击事件，this无法正确获取到对应的属性，this的指向问题 Echarts 点击事件 <template> <div class="radiopie"> <div ref="radiopieChart" class="radiopieChart"></div> </div> </template> <script> import { mapState, mapMutations } fr
使用echarts时，如何在formatter中使得this指向当前窗体对象
修仙程序员的博客
10-12 2497
对象中普通函数的this指向函数的调用者，下面是我在echarts使用过程出现的错误,我需要在function中拿到窗体this中的数据，但是未能成功 this.chart.setOption({ formatter: function (params) { console.log(this) //undefined } ...
echarts使用，一次实例的心得
往后余生的博客
08-01 2593
&lt;template&gt; &lt;div&gt; &lt;div class="charts" ref="charts" :style="{'height': height}"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script type="te
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值