1. 程式人生 > >echarts3.0版本radar圖tooltip實現顯示單軸資料

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連結:

改動之後的結果如圖所示:


(圖中的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 />');*/ },