echarts折線圖實現風向功能(旋轉單個symbol)

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

最終效果如下:


最終效果
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 最近用echarts做了一個血壓心率的折線圖,記錄下項目中遇到的問題: 如圖,當某一點的血壓或者心率異常,需要將該...
    呦呦呦呦呦呵閱讀 10,239評論 0 1
  • 之前自學的時候也使用過echarts來制作柱狀圖,折線圖,地圖,現在想想那時候做的簡直是太LOW了,就是簡單的在官...
    _信仰zmh閱讀 82,249評論 23 66
  • 那天,市法院民事廳的女法官剛上班就接到任務,要做離婚調節。 來法院申請離婚的是一對二十多歲的男女。男的面黃肌瘦,女...
    一腔孤勇啊閱讀 522評論 1 1
  • 〈一〉 做人做事須才能 成鬼成仙看德行 人海茫茫聚學問 眾生蕓蕓學做人 學歷得就大樹茂 修養才是樹之根 德才兼備是...
    卓君務閱讀 304評論 0 2
  • 愛 文/王新 清洗,剁塊,出水 這是生活的主題 我把雞塊撈起 鹽,花椒,生姜,靈芝片,辣椒殼 這些富有情趣的...
    瑪托娃閱讀 391評論 0 3