[echarts] tooltip formatter的写法使用this

最新推荐文章于 2024-11-27 09:55:03 发布

原创

最新推荐文章于 2024-11-27 09:55:03 发布 · 910 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

这篇博客探讨了JavaScript中tooltip formatter函数中使用`this`关键字的不同情况。在箭头函数中，`this`保持其在定义时的作用域，而在普通函数中，`this`根据调用方式动态绑定。这一差异对于理解和解决有关事件处理、回调函数和对象方法中的`this`指向问题至关重要。

tooltip: {
   
   
   trigger: 'axis',
   formatter: (params) => {
   
   
   	// 可以访问this
   }

tooltip: {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

533_

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

echarts水球图图表中formatter读取不到外面的值，formatter自定义鼠标悬浮显示（案例说明）

weixin_45745641的博客

01-18

2344

问题描述最近写项目的可视化部分，需求是写一个水球图展示服务器硬盘使用率。鼠标移上去会显示其它相关的信息。一般是通过option中tooltip下的formatter来定义显示的信息，打印参数：可以看到官方提供的参数只能显示当前水球图相关的信息，data中只存入了当前水球图的数据，这里需要拿到option外面的数据，在里面使用this会发现无法获取，如下：解决办法这里this没有获取到数据，说明this的指向性改变了。目前我想到的解决办法就是修改this指向和fomatter函数重载两种方法，

echarts 之 tooltip 位置的放置以及设置echarts的宽高与 formatter格式化文本

weixin_47409897的博客

01-27

2009

echarts 之 tooltip 控制在容器内展示与 formatter格式化文本就是给左右上下，做一个限制的函数转载：链接: link. option: { color: this.lineChartColor, tooltip: { //鼠标滑过显示一组数据当前拐点的数据 trigger: "axis", position: function (point, params,

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

使用echarts时，如何在formatter中使得this指向当前窗体对象

修仙程序员的博客

10-12

2496

对象中普通函数的this指向函数的调用者，下面是我在echarts使用过程出现的错误,我需要在function中拿到窗体this中的数据，但是未能成功 this.chart.setOption({ formatter: function (params) { console.log(this) //undefined } ...

关于echarts中的formatter: this.loadData拿不到data中的数据深入解析

qq_52372698的博客

07-07

4817

知其然知其所以然，echarts踩坑的小伙伴看过来，formatter中拿不到data？我来帮拿！

用echart的tooltip属性解释箭头函数this指向问题

qq_43371287的博客

04-30

839

formatter:(params)=>{ //this指向vue，this.lineDateData为vue的data中的值 } formatter:function(params)=>{ //this指向tooltip，this.lineDateData为underfined } tooltip: { trigger: 'axis', ...

echarts中的formatter无法获取外部变量(全局变量)，解决办法

qq_36539696的博客

12-28

3885

先贴上初始代码 axisLabel: { textStyle: { color: "#999", //坐标轴字颜色 }, formatter: function (params) { console.log(params,"params") return `${params}` + this.xDw;

uniapp 如何使用echarts 以及解决tooltip自定义不生效；dataZoom报错问题

GongWei_的博客

01-12

4342

uniapp如何使用echarts并且如何自定义tooltip，以及echarts层级太高怎么办

echarts的tooltip旋转方案

一粒程序米

05-26

1571

当echarts横屏的时候，tooltip还是原来的角度，没有跟着旋转过来，官网说可以使用extraCssText来旋转，但是我测过了无效。 extraCssText: 'transform:rotate(270deg)', 详细看了一下官网，发现可以返回HTML 使用方式大概如下： tooltip: { trigger: 'item', formatter: (params) => { // 提示框浮层内容格式器以函数的形式修改 return this.tipFo

echarts tooltip 请求接口展示动态数据

热门推荐

acknowledged的博客

09-23

2万+

echarts 的图表配置非常的灵活自由，但是不熟悉的时候容易不知道怎么配置。最近遇到一处需要自定义tooltip的内容，小小的踩了个坑，特此记录一下解决过程。 tooltip是什么有的同学可能不清楚tooltip是什么，它实际上就是鼠标移到图表上后展示的类似数据点详情的一个说明，就是我图片上框出来的那个在options配置项处于第一级目录，与series，xAxis，yAxis同级 fo...

echart里的this指向问题

weixin_43588661的博客

11-27

322

echart里的this指向问题

echarts-自定义toolbox.feature

lianlian_eva的博客

09-14

2176

feature支持自定义以my开头即可可设置 title,iconStyle,icon,onclick title一般是指鼠标悬浮到具体的工具之后的提示 iconStyle:可以设置工具栏图标的样式，比如说颜色之类的（svg图标可支持设置） icon:支持引入自定的图标，比如说svg,img,对于svg仅仅只需要去阿里矢量图网站下载，引用阿里图标svg代码中的path onclick；点击具体的工具栏的回调事件 myAlarm: { title:`aaaa`,

vue+echarts this指向问题

qq_42383283的博客

05-21

1099

问题： vue中使用echarts，但是在echarts鼠标点击事件中，想要使用vue methods中定义的函数（使用this.函数名调用）,发现报函数未定义错误。原因：此时this指向的是echarts 而非 vue 解决方法：使用箭头函数。 (params) => { //函数体 } 参考文章 ...

uview2.0使用u-calendar 的formatter属性，在formatter方法里无法访问this的bug，解决办法！！！！

柑橘乌云_

07-20

1592

还有第二种方法就是修改u-calendar 源码，为了不影响其他使用日历组件的模块，最后将该组件里面代码提出来，自己封装一个组件。自己写了个demo 父给子传值v-bind传一个函数，然后在这个函数里面打印this，this是子组件的实例，但是不知道为什么formatter里会打印undefined。解决办法就是在外部定义一个变量，然后在调用日历组件的父级的onload里面给这个变量赋值this，然后formatter里面就可以打印出来父级的this，进而访问父级变量。uview 版本2.0.36。

七、Echart图表之 toolbox工具栏组件配置项大全

weixin_55181759的博客

05-26

1万+

🍓 作者主页：💖仙女不下凡💖 🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！ 🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！ 👉推荐相关文章：Echart图表之基本使用及配置项 👉推荐相关文章：Echart图表之 title配置项大全 👉推荐相关文章：Echart图表之颜色color配置项大全 👉推荐相关文章：Echart图表之 X轴（xAxis）与 Y轴（yAxis）配置项大全 👉推荐相关文章：Echart图表之

echarts 自定义样式 formatter

zcy_csdn123的博客

09-23

1万+

echart 提供了很多样式比如lineStyle 这种对象可以让你配置相关的一些属性，但是如果给的东西不能满足所有的条件可以使用formatter 这个属性 formatter 该属性可以接收一个字符串或者一个方法用来自定义返回的样式 formatter: function (params) { return ' ' } // ES6写法为了使用全局变量this formatter:...

echarts 折线图设置y轴最小刻度_手把手教你玩转Echarts ！

weixin_39778668的博客

11-20

5204

茫茫人海中与你相遇相信未来的你不会很差作者：婷酱Yaaa来源：https://juejin.im/post/5ef7426fe51d45349e254124前言一直想写一篇关于echarts的文章，因为之前接触的echarts也不多，几乎没怎么用过。之前写过移动端用过一两次echarts, 不过都是看官方文档配置硬凑出来的，比较花时间。这次也是因为换新工作了，公司要求三天出一个大屏可视化...

[echarts] tooltip formatter的写法 使用this

[echarts] tooltip formatter的写法使用this