ECharts關(guān)于雷達(dá)圖的一些屬性設(shè)置

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

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

點(diǎn)擊編輯實(shí)例 》》

series[i]-radar.type

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

series[i]-radar.name

設(shè)置 ECharts 雷達(dá)圖的名稱，用于 tooltip 的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。

series[i]-radar.radarIndex

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

series[i]-radar.symbol

設(shè)置用于在雷達(dá)圖中使用的標(biāo)記圖形，默認(rèn)為 circle。

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

雷達(dá)圖的標(biāo)記圖形可以通過(guò) 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接，或者 dataURI，也可以通過(guò) 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見(jiàn) SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導(dǎo)出。

series[i]-radar.symbolSize

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

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

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

其中第一個(gè)參數(shù) value 為 data 中的數(shù)據(jù)值。第二個(gè)參數(shù)params 是其它的數(shù)據(jù)項(xiàng)參數(shù)。

series[i]-radar.symbolRotate

雷達(dá)圖標(biāo)記的旋轉(zhuǎn)角度。注意：在 markLine 中當(dāng) symbol 為 'arrow' 時(shí)會(huì)忽略 symbolRotate 強(qiáng)制設(shè)置為切線的角度。

series[i]-radar.symbolOffset

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

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

series[i]-radar.label

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

series[i]-radar.itemStyle

折線拐點(diǎn)標(biāo)志的樣式。

series[i]-radar.lineStyle

線條樣式。

series[i]-radar.areaStyle

區(qū)域填充樣式。

series[i]-radar.data[i]

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

data : [
    {
        value : [4300, 10000, 28000, 35000, 50000, 19000],
        name : '預(yù)算分配（Allocated Budget）'
    },
    {
        value : [5000, 14000, 28000, 31000, 42000, 21000],
        name : '實(shí)際開(kāi)銷（Actual Spending）'
    }
]

其中的 value 項(xiàng)數(shù)組是具體的數(shù)據(jù)，每個(gè)值跟 radar.indicator 一一對(duì)應(yīng)。

series[i]-radar.zlevel

雷達(dá)圖所有圖形的 zlevel 值，取值類型為 number，默認(rèn)值為0。

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

zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。

series[i]-radar.z 

雷達(dá)圖組件的所有圖形的 z 值，用于控制圖形的前后順序。z 值小的圖形會(huì)被 z 值大的圖形覆蓋。取值類型為 number，默認(rèn)值為2。

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

series[i]-radar.silent

圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，默認(rèn)為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。

series[i]-radar.animation

是否開(kāi)啟動(dòng)畫(huà)，取值類型為 boolean，默認(rèn)值為 true。

series[i]-radar.animationThreshold

是否開(kāi)啟動(dòng)畫(huà)的閾值，當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫(huà)。取值類型為 number，默認(rèn)值為 2000。

series[i]-radar.animationDuration 

初始動(dòng)畫(huà)的時(shí)長(zhǎng)，取值類型為 number，默認(rèn)值為 1000。支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫(huà)效果：

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

series[i]-radar.animationEasing

初始動(dòng)畫(huà)的緩動(dòng)效果，默認(rèn)值為 cubicOut。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。

series[i]-radar.animationDelay

初始動(dòng)畫(huà)的延遲，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫(huà)效果。

如下示例：

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

series[i]-radar.animationDurationUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的時(shí)長(zhǎng)，支持 number 類型，默認(rèn)值為 300。

數(shù)據(jù)更新動(dòng)畫(huà)的時(shí)長(zhǎng)還支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫(huà)效果：

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

series[i]-radar.animationEasingUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的緩動(dòng)效果，默認(rèn)值為 cubicOut。

series[i]-radar.animationDelayUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的延遲，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫(huà)效果。

如下示例：

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

也可以看該示例

series[i]-radar.tooltip

本系列特定的 tooltip 設(shè)定。