ECharts漏斗圖屬性與實例介紹

ECharts漏斗圖

在 ECharts 系列中，漏斗圖使用 series[i]-funnel 表示。漏斗圖適用于業(yè)務(wù)流程比較規(guī)范、周期長、環(huán)節(jié)多的流程分析，通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較，能夠直觀地發(fā)現(xiàn)和說明問題所在。

示例：

點擊編輯實例 》》

ECharts漏斗圖屬性

type

在漏斗圖中，type 值為 funnel。

name

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

min

指定的數(shù)據(jù)最小值，不設(shè)置時為 0。

max

指定的數(shù)據(jù)最大值，默認(rèn)為 100。

minSize

數(shù)據(jù)最小值 min 映射的寬度，默認(rèn)為0%。

可以是絕對的像素大小，也可以是相對布局寬度的百分比，如果需要最小值的圖形并不是尖端三角，可通過設(shè)置該屬性實現(xiàn)。

maxSize

數(shù)據(jù)最大值 max 映射的寬度，默認(rèn)為 100%。

可以是絕對的像素大小，也可以是相對布局寬度的百分比。

sort

數(shù)據(jù)排序， 可以取 'ascending'，'descending'（默認(rèn)值），'none'（表示按 data 順序），或者一個函數(shù)（即 Array.prototype.sort(function (a, b) { ... })）。

gap

數(shù)據(jù)圖形間距。

legendHoverLink

是否啟用圖例 hover 時的聯(lián)動高亮，默認(rèn)為 true。

funnelAlign

水平方向?qū)R布局類型，默認(rèn)居中對齊，可用選項還有：'left'、'right'、'center'（默認(rèn)值）

label

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

labelLine

標(biāo)簽的視覺引導(dǎo)線樣式，在 label 位置設(shè)置為'left'或者'right'的時候會顯示視覺引導(dǎo)線。

itemStyle

圖形樣式，有 normal 和 emphasis 兩個狀態(tài)。normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標(biāo)懸浮或者圖例聯(lián)動高亮?xí)r。

data[i]

系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項可以為單個數(shù)值，如：

[12, 34, 56, 10, 23]

如果需要在數(shù)據(jù)中加入其它維度給 visualMap 組件用來映射到顏色等其它圖形屬性。每個數(shù)據(jù)項也可以是數(shù)組，如：

[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]

這時候可以將每項數(shù)組中的第二個值指定給 visualMap 組件。

更多時候我們需要指定每個數(shù)據(jù)項的名稱，這時候需要每個項為一個對象：

[{
    // 數(shù)據(jù)項的名稱
    name: '數(shù)據(jù)1',
    // 數(shù)據(jù)項值8
    value: 10
}, {
    name: '數(shù)據(jù)2',
    value: 20
}]

需要對個別內(nèi)容指定進(jìn)行個性化定義時：

[{
    name: '數(shù)據(jù)1',
    value: 10
}, {
    // 數(shù)據(jù)項名稱
    name: '數(shù)據(jù)2',
    value : 56,
    //自定義特殊 tooltip，僅對該數(shù)據(jù)項有效
    tooltip:{},
    //自定義特殊itemStyle，僅對該item有效
    itemStyle:{}
}]

markPoint

設(shè)置漏斗圖的圖表標(biāo)注。

markLine

設(shè)置漏斗圖的圖表標(biāo)線。

markArea

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

silent

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

animation

是否開啟動畫，默認(rèn)為 true。

animationThreshold

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

animationDuration

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

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

animationEasing

初始動畫的緩動效果。不同的緩動效果可以參考 緩動示例。

animationDelay

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

如下示例：

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

也可以看該示例

animationDurationUpdate

數(shù)據(jù)更新動畫的時長，默認(rèn) 300。

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

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

animationEasingUpdate

數(shù)據(jù)更新動畫的緩動效果。

animationDelayUpdate

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

如下示例：

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

也可以看該示例

tooltip

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