echarts3.0版本radar圖tooltip實現顯示單軸資料
阿新 • • 發佈:2019-01-24
事先宣告:
本改動因官方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 />');*/
},