最近的項目中要使用echarts實現顯示風向以及風級的功能,在開發的過程中遇到了一點小問題,如何將單個symbol設置樣式呢?
需求
利用echarts組件實現出風級折線圖,顯示的值為風級,在每個拐點利用箭頭顯示當時風向。
要點
本次需要展示的有兩點:
1、風級
2、風向
風級在制作的過程中很簡單,就說在option中設置data的value值,在此就不多提。
風向的制作首先要了解拐點(symbol)的屬性,將拐點樣式設置為箭頭圖片(建議使用svg圖),再使風向旋轉對應的角度即可。
拐點(symbol)
拐點(symbol)是echarts里的一個配置項,顧名思義拐點就是折線圖曲線發生變化的點。
設置自定義圖片
ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
可以通過 'image://url' 設置為圖片,其中 URL 為圖片的鏈接,或者 dataURI。
URL 為圖片鏈接例如:'image://http://xxx.xxx.xxx/a/b.png'
在此,為了更清晰的顯示風向,我不建議使用ECharts提供的 'triangle'三角形,容易造成誤解。
使用自定義圖片的部分代碼如下:
if(this.airIndex == 'wdsp'){ //旋轉風向
var arr = [];
seriesItem.symbol = 'image://img/arrow.svg';
seriesItem.data = arr;
}else{
seriesItem.symbolSize = 8;
}
this.selectedDevData.push(seriesItem);
旋轉拐點
查詢了一番echarts文檔后,終于找到了這個屬性——symbolRotate,點我了解該屬性。
找到這個設置的我天真的以為立馬就能實現這個功能,但是在設置symbolRotate之后,我發現了一個問題。
這種方法只能設置整條折現拐點的旋轉角度(所有拐點旋轉角度相同),而我們的需求顯然需要對單個拐點進行旋轉。
在此特意說明下我的思路:
1、自定義圖片箭頭,指向默認朝上(北)
2、接口提供每個拐點需要的旋轉角度,如:東(angle:90)、南(angle:180)、東南(angle:135)
3、一共16個方向:南、北、東、西、東北、東南、西北、西南、東北偏北、東北偏東、西北偏西、西北偏北、西南偏西、西南偏南、東南偏東、東南偏南。
實現代碼:
var symbolRotateNum = [90,45,50,12,10,0,150];// 旋轉的度數
var valueNum = [820, 932, 901, 934, 1290, 1330, 1320];// 數值
var data = echarts.util.map(valueNum, function (item, index) {
return {
value: valueNum[index],
symbolRotate:symbolRotateNum[index]
};
});
我在Echarts Gallery上傳了實例,有現成代碼在上面,點我查看實例
排坑
雖然實現了功能,但是在開發的過程中還是踩到了坑的,在此特意分享給大家。
1、symbolRotate 的旋轉方向為逆時針旋轉,value為正數則逆時針旋轉,若為負數則順時針旋轉。此設定與我起初的思路相反,導致實現效果的時候發現旋轉角度與實際風向不對。
2、風向的指向為風的方向,而我起初以為北風箭頭應該指向北,實則應該指向南方
綜合上面兩點,為了使角度指對,應該使用360°減去接口提供的度數。
symbolRotate: 360-seriesItem.angle[index]
方向應該指向反向,所以需要再調整180°
symbolRotate:180-seriesItem.angle[index]
最終效果如下: