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