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设置参数时this指向的改变
a666666000的博客
04-21 447
记录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 4824
知其然知其所以然，echarts踩坑的小伙伴看过来，formatter中拿不到data？我来帮拿！
vue中使用echarts
Alisane的博客
11-16 551
第一种：渐变曲线图且改变网格样式 <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 5833
饼图的点击与高亮事件
Echarts 点击事件无法使用 this 或者 this绑定的数据无法获取
qq_40896145的博客
10-22 373
给echarts绑定自定义点击事件时，无法使用this，并且无法获取到this绑定的数据。增加：const _this = this;
Echarts 的点击事件 this指向问题
YZ_ZZZ24的博客
10-29 2160
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图表自适应的解决方案
xybhua的博客
12-31 478
npm 导入eachart，并在main.js配置。把echarts挂载在 prototype上方便页面调用。为了实现自适应，所以在行内样式的width设置为100%。
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 791
position: 'inside' // 可选为'left'|'right'|'top'|'bottom'// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE。// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE。// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE。
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 } ...
vue+echarts this指向问题
qq_42383283的博客
05-21 1100
问题： vue中使用echarts，但是在echarts鼠标点击事件中，想要使用vue methods中定义的函数（使用this.函数名调用）,发现报函数未定义错误。 原因：此时this指向的是echarts 而非 vue 解决方法： 使用箭头函数。 (params) => { //函数体 } 参考文章 ...
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
ECharts 注意点
zhaofeiweb的博客
08-14 787
yAxis轴的数据和 series中的 yAxisIndex: 坐标值相对性 vue  https://www.npmjs.com/package/vue-echarts 解决销毁实例和内存泄露 beforeDestroy () { this.$refs['chart'].clear() this.$refs['chart'].dispose() } &lt;template&gt;...
Vue 中echarts的数据参数使用、X轴Y轴、柱状图、饼状图、x轴显示全
热门推荐
林中明月间丶
04-13 1万+
https://www.cnblogs.com/tugenhua0707/p/9380378.html https://blog.youkuaiyun.com/qq_28691187/article/details/112462859 https://blog.youkuaiyun.com/u012612399/article/details/53838326eCharts——柱状图中的柱体颜色渐变 https://blog.youkuaiyun.com/qq_36538012/article/details/115413879E...
Echarts 点击事件无法使用this 或者 this无法使用
zuichu_2001的博客
03-30 1532
如以下代码所示 this.chart.on('click',function (param) { this.module = param.name; } 获取不到this.module 无法给model赋值 说model找不到 这时我们要在此方法外面把this获取出来 const _this = this; this.chart.on('click',function (param) { _this.module = param.name; } 这时就能获取到了 ...
在vue文件引入echarts_vue中引入echarts渲染问题
weixin_30224993的博客
12-28 3012
1.通过以下命令安装echartsnpm install echarts –save2.在main.js文件里全局引入echartsimport echarts from ‘echarts’Vue.prototype.$echarts = echarts3.单页面引用echartsimport echarts from ‘echarts’// html代码123// js代码import echa...
echarts中tooltip的formatter获取不到this
最新发布
01-08
### ECharts Tooltip Formatter 中 `this` 未定义问题解决方案 在使用 ECharts 的过程中，当尝试通过 `formatter` 函数来自定义提示框内容时，可能会遇到 `this` 关键字指向不正确的问题。这通常发生在试图访问外部变量或方法的情况下。 为了确保 `this` 正确绑定，在初始化图表配置对象之前可以创建一个闭包来保存所需的上下文环境[^1]： ```javascript var chartInstance; // 假设 newInfo 和 allInfo 是全局变量或者是当前作用域内的局部变量 function initChart() { var self = this; // 将当前上下文赋给self option = { tooltip: { trigger: 'axis', formatter: function (params) { // 使用 self 来代替 this 访问外部变量 return `${params[0].axisValue}<br/>${params[0].marker}${params[0].seriesName}:${newInfo[params[0].dataIndex]}<br/> ${params[1].marker}${params[1].seriesName}:${allInfo[params[1].dataIndex]}`; } }, series: [ // ...其他系列配置... ] }; chartInstance = echarts.init(document.getElementById('main')); chartInstance.setOption(option); } ``` 另一种更现代的方法是利用箭头函数自动继承父级执行上下文的特点，从而避免显式地管理 `this` 绑定[^2]： ```javascript option = { tooltip: { trigger: 'axis', formatter: params => { // 使用箭头函数替代传统匿名函数表达方式 const paramItem = params.find(item => item.seriesType === 'bar'); if (!paramItem) return ''; let resultText = `<strong>${paramItem.axisValue}</strong><br>`; for (let i of params){ resultText += `${i.marker} ${i.seriesName}: ${(newInfo || {})[i.dataIndex] ?? ''}<br>`; } return resultText; } }, //...其余部分保持不变... }; ``` 这两种方法都能有效解决 `this` 不可预测的行为，并允许开发者更加灵活地处理数据和逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值