echarts3.0版本radar图tooltip实现显示单轴数据

事先声明:

本改动因官方3.0版本雷达图TOOLTIPS不能通过配置项显示单轴数据,本次改动基于echarts.js(3.0版本)

本人自娱自乐想完成自己的小功能

(注:此js文件也已经对chinaMap显示样式做了一定修改)

若有任何疑问请联系我qq525254223.或者微信(Jerry_agax)大写J

------------------------------------------------------------------------------

方法是自己改动了echarts.js(版本3.0官网下载),暂时未发现改动造成其他程序bug。

主要改动:

在echarts.js中对radar图tooltips进行格式化的时候,通过计算鼠标位置与Y轴正半轴之间的角度(0-360),确定此位置停留时应该显示的数据的index,最后取得相应数据显示。

首先附上echarts.js链接:

修改后的echarts

改动之后的结果如图所示:


(图中的360/7/2是由于此图有7项数据,例如在鼠标停留位置与Y轴正半轴成(360/7*2 ± 360/7/2)角度时应显示“物资”相关数据)


下面是计算角度并获得index的代码片段:

 //@wangjx
	    //compute the anti-clockwise angle of mousePos-coordinate -- Y-line. 
	    var getAngle = function(mx,my,px,py){
        	var x = Math.abs(px-mx);
        	var y = Math.abs(py-my);
        	var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
        	var cos = y/z;
        	var radina = Math.acos(cos);
        	var angle = Math.floor(180/(Math.PI/radina));
        	if(mx>px && my>py){
        		angle = 180-angle;
        	}
        	if(mx==px && my>py){
        		angle = 180;
        	}
        	if(mx>px && my==py){
        		angle = 90;
        	}
        	if(mx<px && my>py){
        		angle = 180+angle;
        	}
        	if(mx<px && my==py){
        		angle = 270;
        	}
        	if(mx<px && my<py){
        		angle = 360-angle;
        	}
        	//the Echarts radar turns anti-clockwise.
        	return 360-angle;
        };
        
        //@wangjx
        //get index by angle;
        var getIndexToDisplay = function(num,angle){
        	var filterIndex =0;
        	for(var i=0; i<num; i++){
        		if(angle>(360/num*i-360/num/2) && angle<(360/num*i+360/num/2)){
        			filterIndex = i;
        			break;
        		}
        	}
        	return filterIndex;
        };

然后在formatter里根据index取得需显示的内容代码:详见 链接echarts.js(L31586)

formatTooltip: function (dataIndex,e) {
	            var value = this.getRawValue(dataIndex);
	            var coordSys = this.coordinateSystem;
	            //get index by position of mouse.
	            var index = getIndexToDisplay(value.length,getAngle(e.offsetX,e.offsetY,coordSys.cx,coordSys.cy));
	            var indicatorAxes = coordSys.getIndicatorAxes();
	            return indicatorAxes[index].name+ ' : ' + value[index]; //wangjx
	            
	            //region code, display all data of this series.
	            /*return (this._data.getName(dataIndex) == '' ? this.name : this._data.getName(dataIndex)) + '<br/>'
	                + zrUtil.map(indicatorAxes, function (axis, idx) {
	                    return axis.name + ' : ' + value[idx];
	                }).join('<br />');*/
	        },


  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值