最近的項目中要使用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]

最終效果如下：

最終效果