ECharts關于雷達圖的一些屬性設置

使用 series[i]-radar 可以設置 ECharts 雷達圖，雷達圖主要用于表現(xiàn)多變量的數(shù)據，例如球員的各個屬性分析，依賴 radar 組件。

下面是 AQI 數(shù)據用雷達圖表現(xiàn)的示例。

點擊編輯實例 》》

series[i]-radar.type

將 type 設置為 radar 以將圖表表現(xiàn)為雷達圖。

series[i]-radar.name

設置 ECharts 雷達圖的名稱，用于 tooltip 的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據和配置項時用于指定對應的系列。

series[i]-radar.radarIndex

雷達圖所使用的 radar 組件的 index，取值類型為 number。

series[i]-radar.symbol

設置用于在雷達圖中使用的標記圖形，默認為 circle。

ECharts 提供的標記類型包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'。

雷達圖的標記圖形可以通過 'image://url' 設置為圖片，其中 url 為圖片的鏈接，或者 dataURI，也可以通過 'path://' 將圖標設置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔心因為縮放而產生鋸齒或模糊，而且可以設置為任意顏色。路徑圖形會自適應調整為合適的大小。路徑的格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導出。

series[i]-radar.symbolSize

雷達圖標記的大小，可以設置成諸如 10 這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。

如果需要每個數(shù)據的圖形大小不一樣，還可以設置為如下格式的回調函數(shù)：

(value: Array|number, params: Object) => number|Array

其中第一個參數(shù) value 為 data 中的數(shù)據值。第二個參數(shù)params 是其它的數(shù)據項參數(shù)。

series[i]-radar.symbolRotate

雷達圖標記的旋轉角度。注意：在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設置為切線的角度。

series[i]-radar.symbolOffset

標記相對于原本位置的偏移。默認情況下，標記會居中置放在數(shù)據對應的位置，但是如果 symbol 是自定義的矢量路徑或者圖片，就有可能不希望 symbol 居中。這時候可以使用該配置項配置 symbol 相對于原本居中的偏移，可以是絕對的像素值，也可以是相對的百分比。

例如 [0, '50%'] 就是把自己向上移動了一半的位置，在 symbol 圖形是氣泡的時候可以讓圖形下端的箭頭對準數(shù)據點。

series[i]-radar.label

圖形上的文本標簽，可用于說明圖形的一些數(shù)據信息，比如值，名稱等，label選項在 ECharts 2.x 中放置于itemStyle.normal下，在 ECharts 3 中為了讓整個配置項結構更扁平合理，label 被拿出來跟 itemStyle 平級，并且跟 itemStyle 一樣擁有 normal, emphasis 兩個狀態(tài)。

series[i]-radar.itemStyle

折線拐點標志的樣式。

series[i]-radar.lineStyle

線條樣式。

series[i]-radar.areaStyle

區(qū)域填充樣式。

series[i]-radar.data[i]

雷達圖的數(shù)據是多變量（維度）的，如下示例：

data : [
    {
        value : [4300, 10000, 28000, 35000, 50000, 19000],
        name : '預算分配（Allocated Budget）'
    },
    {
        value : [5000, 14000, 28000, 31000, 42000, 21000],
        name : '實際開銷（Actual Spending）'
    }
]

其中的 value 項數(shù)組是具體的數(shù)據，每個值跟 radar.indicator 一一對應。

series[i]-radar.zlevel

雷達圖所有圖形的 zlevel 值，取值類型為 number，默認值為0。

zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的 zlevel。需要注意的是過多的 Canvas 會引起內存開銷的增大，在手機端上需要謹慎使用以防崩潰。

zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。

series[i]-radar.z 

雷達圖組件的所有圖形的 z 值，用于控制圖形的前后順序。z 值小的圖形會被 z 值大的圖形覆蓋。取值類型為 number，默認值為2。

z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。

series[i]-radar.silent

圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。

series[i]-radar.animation

是否開啟動畫，取值類型為 boolean，默認值為 true。

series[i]-radar.animationThreshold

是否開啟動畫的閾值，當單個系列顯示的圖形數(shù)量大于這個閾值時會關閉動畫。取值類型為 number，默認值為 2000。

series[i]-radar.animationDuration 

初始動畫的時長，取值類型為 number，默認值為 1000。支持回調函數(shù)，可以通過每個數(shù)據返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：

animationDuration: function (idx) {
    // 越往后的數(shù)據延遲越大
    return idx * 100;
}

series[i]-radar.animationEasing

初始動畫的緩動效果，默認值為 cubicOut。不同的緩動效果可以參考 緩動示例。

series[i]-radar.animationDelay

初始動畫的延遲，支持回調函數(shù)，可以通過每個數(shù)據返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的數(shù)據延遲越大
    return idx * 100;
}
也可以看該示例

series[i]-radar.animationDurationUpdate

數(shù)據更新動畫的時長，支持 number 類型，默認值為 300。

數(shù)據更新動畫的時長還支持回調函數(shù)，可以通過每個數(shù)據返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果：

animationDurationUpdate: function (idx) {
    // 越往后的數(shù)據延遲越大
    return idx * 100;
}

series[i]-radar.animationEasingUpdate

數(shù)據更新動畫的緩動效果，默認值為 cubicOut。

series[i]-radar.animationDelayUpdate

數(shù)據更新動畫的延遲，支持回調函數(shù)，可以通過每個數(shù)據返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的數(shù)據延遲越大
    return idx * 100;
}

也可以看該示例

series[i]-radar.tooltip

本系列特定的 tooltip 設定。