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

问题描述

最近写项目的可视化部分,需求是写一个水球图展示服务器硬盘使用率。鼠标移上去会显示其它相关的信息。
一般是通过option中tooltip下的formatter来定义显示的信息,打印参数:
在这里插入图片描述

可以看到官方提供的参数只能显示当前水球图相关的信息,data中只存入了当前水球图的数据,这里需要拿到option外面的数据,在里面使用this会发现无法获取,如下:
在这里插入图片描述

在这里插入图片描述

解决办法

这里this没有获取到数据,说明this的指向性改变了。目前我想到的解决办法就是修改this指向和fomatter函数重载两种方法,我用的是后者,这里讲解一下,有其它办法的欢迎留言~‘

直接在method的中定义同名的formatter函数,在里面写好自己需要用的形式:

在这里插入图片描述
原来option中的formatter函数里面空着就行,
然后在echarts图表生成的函数中,写一个方法重载,覆盖原来的formatter

this.option.tooltip.formatter=this.formatter

这样的话就能成功达到想要的效果:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45745641/article/details/122567439