ECharts儀表盤(pán)屬性與使用

series[i]-gauge 用于表示ECharts儀表盤(pán)，當(dāng)您要使用ECharts儀表盤(pán)的時(shí)候，需要將series中的type屬性設(shè)置為“ 'gauge' ”，本節(jié)介紹了ECharts儀表盤(pán)的一些通用屬性，其中，您可以通過(guò)data屬性來(lái)設(shè)置指針的指示方向。本節(jié)以一個(gè)簡(jiǎn)單的儀表盤(pán)實(shí)例開(kāi)始，如下所示：

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

ECharts儀表盤(pán)屬性

type

type 屬性的值應(yīng)該設(shè)置為：'gauge'

name

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

radius

儀表盤(pán)半徑，可以是相對(duì)于容器高寬中較小的一項(xiàng)的一半的百分比，也可以是絕對(duì)的數(shù)值，默認(rèn)的值為 75%。

{{ use partial-legend-hover-link }}

startAngle

儀表盤(pán)起始角度，默認(rèn)為 225。圓心 正右手側(cè)為0度，正上方為90度，正左手側(cè)為180度。

endAngle

儀表盤(pán)結(jié)束角度，默認(rèn)情況下為 -45。

clockwise

儀表盤(pán)刻度是否是順時(shí)針增長(zhǎng)，默認(rèn)為 true。

min

最小的數(shù)據(jù)值，默認(rèn)為0，映射到 minAngle。

max

最大的數(shù)據(jù)值，默認(rèn)為100，映射到 maxAngle。

splitNumber

儀表盤(pán)刻度的分割段數(shù)，默認(rèn)分割為10段。

axisLine

儀表盤(pán)軸線(xiàn)相關(guān)配置。

splitLine

儀表盤(pán)分隔線(xiàn)樣式。

axisTick

儀表盤(pán)中刻度的樣式。

axisLabel

設(shè)置儀表盤(pán)的刻度標(biāo)簽。

pointer

儀表盤(pán)指針。

itemStyle

儀表盤(pán)指針樣式。

title

儀表盤(pán)標(biāo)題。

detail

儀表盤(pán)詳情，用于顯示數(shù)據(jù)。

markPoint

儀表盤(pán)圖表的標(biāo)注。

markLine

儀表盤(pán)圖表的標(biāo)線(xiàn)。

markArea

儀表盤(pán)圖表標(biāo)域，常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù)，例如標(biāo)出某段時(shí)間投放了廣告。

silent

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

animation

儀表盤(pán)是否開(kāi)啟動(dòng)畫(huà)，默認(rèn)為true。

animationThreshold

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

animationDuration

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

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

animationEasing

初始動(dòng)畫(huà)的緩動(dòng)效果。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。

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;
}

也可以看該示例

animationDurationUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的時(shí)長(zhǎng)。默認(rèn)情況下為 300。

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

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

animationEasingUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的緩動(dòng)效果。

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;
}

也可以看該示例

tooltip

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

更多ECharts儀表盤(pán)實(shí)例

模擬汽車(chē)儀表盤(pán)：點(diǎn)擊查看汽車(chē)儀表盤(pán)實(shí)例