事先聲明:
本改動因官方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 />');*/ },
新聞熱點
疑難解答