1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > echarts雷达图鼠标悬浮显示单轴数据

echarts雷达图鼠标悬浮显示单轴数据

时间:2019-01-24 22:25:40

相关推荐

echarts雷达图鼠标悬浮显示单轴数据

雷达图效果展示

雷达图默认只能展示一圈的数据,而不能展示一个轴向的数据,具体图片效果如下

问题描述

在雷达图的tooltip中的 formatter: function (params){}打印出params参数的数据只有每一圈的数据,params的数据并不能区分鼠标放在了哪一个单轴的科目里面。所以没法区分鼠标停在哪一个科目。

问题解决

打开echars源码文件找到,_showTooltipContent方法在this._ticket = e,c = h(n, a,o, e, d)这段代码里面加上a,o两个参数,将鼠标的坐标进行传入。

在代码中,增加x,y入参数,

可实现鼠标坐标的打印。

有了坐标信息就很好解决位置悬停在哪一个轴向的问题,对于具体判断是哪一个轴向的问题,可以利用角度计算,位置判断一系列的方法来解决。我是采用简单的判断来实现的。具体代码如下:

tooltip: {textStyle:{align:'left' // 左对齐},formatter: function (params,x,y) {console.log(params,"悬停事件触发!");console.log(x,"x触发!");console.log(y,"y触发!");if(x > 270 && x < 279 && y < 252 && y > 70){let score = "";for (item in valueed){score = score + (valueed[item].name) + ":" + (valueed[item].value[1]) + "<br>";}return "政治理论<br/>" + score ;}}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。