建站
咨詢
售后
建站咨詢
新聞中心
ECharts漏斗圖
在 ECharts 系列中，漏斗圖使用 series[i]-funnel 表示。漏斗圖適用于業(yè)務(wù)流程比較規(guī)范、周期長(zhǎng)、環(huán)節(jié)多的流程分析，通過(guò)漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較，能夠直觀地發(fā)現(xiàn)和說(shuō)明問(wèn)題所在。
示例：
點(diǎn)擊編輯實(shí)例 》》
ECharts漏斗圖屬性
type在漏斗圖中，type 值為 funnel。
name系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。
min指定的數(shù)據(jù)最小值，不設(shè)置時(shí)為 0。
max指定的數(shù)據(jù)最大值，默認(rèn)為 100。
minSize數(shù)據(jù)最小值 min 映射的寬度，默認(rèn)為0%。
可以是絕對(duì)的像素大小，也可以是相對(duì)布局寬度的百分比，如果需要最小值的圖形并不是尖端三角，可通過(guò)設(shè)置該屬性實(shí)現(xiàn)。
maxSize數(shù)據(jù)最大值 max 映射的寬度，默認(rèn)為 100%。
可以是絕對(duì)的像素大小，也可以是相對(duì)布局寬度的百分比。
sort數(shù)據(jù)排序， 可以取 'ascending'，'descending'（默認(rèn)值），'none'（表示按 data 順序），或者一個(gè)函數(shù)（即 Array.prototype.sort(function (a, b) { ... })）。
gap數(shù)據(jù)圖形間距。
legendHoverLink是否啟用圖例 hover 時(shí)的聯(lián)動(dòng)高亮，默認(rèn)為 true。
funnelAlign水平方向?qū)R布局類型，默認(rèn)居中對(duì)齊，可用選項(xiàng)還有：'left'、'right'、'center'（默認(rèn)值）
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)。
labelLine標(biāo)簽的視覺(jué)引導(dǎo)線樣式，在 label 位置設(shè)置為'left'或者'right'的時(shí)候會(huì)顯示視覺(jué)引導(dǎo)線。
itemStyle圖形樣式，有 normal 和 emphasis 兩個(gè)狀態(tài)。normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r。
data[i]系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項(xiàng)可以為單個(gè)數(shù)值，如：
[12, 34, 56, 10, 23]如果需要在數(shù)據(jù)中加入其它維度給 visualMap 組件用來(lái)映射到顏色等其它圖形屬性。每個(gè)數(shù)據(jù)項(xiàng)也可以是數(shù)組，如：
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]這時(shí)候可以將每項(xiàng)數(shù)組中的第二個(gè)值指定給 visualMap 組件。
更多時(shí)候我們需要指定每個(gè)數(shù)據(jù)項(xiàng)的名稱，這時(shí)候需要每個(gè)項(xiàng)為一個(gè)對(duì)象：
[{
// 數(shù)據(jù)項(xiàng)的名稱
name: '數(shù)據(jù)1',
// 數(shù)據(jù)項(xiàng)值8
value: 10
}, {
name: '數(shù)據(jù)2',
value: 20
}]需要對(duì)個(gè)別內(nèi)容指定進(jìn)行個(gè)性化定義時(shí)：
[{
name: '數(shù)據(jù)1',
value: 10
}, {
// 數(shù)據(jù)項(xiàng)名稱
name: '數(shù)據(jù)2',
value : 56,
//自定義特殊 tooltip，僅對(duì)該數(shù)據(jù)項(xiàng)有效
tooltip:{},
//自定義特殊itemStyle，僅對(duì)該item有效
itemStyle:{}
}]markPoint設(shè)置漏斗圖的圖表標(biāo)注。
markLine設(shè)置漏斗圖的圖表標(biāo)線。
markArea圖表標(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是否開啟動(dòng)畫，默認(rèn)為 true。
animationThreshold是否開啟動(dòng)畫的閾值，默認(rèn)為2000，當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫。
animationDuration初始動(dòng)畫的時(shí)長(zhǎng)，默認(rèn)為1000，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果：
animationDuration: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}animationEasing初始動(dòng)畫的緩動(dòng)效果。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。
animationDelay初始動(dòng)畫的延遲，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
animationDurationUpdate數(shù)據(jù)更新動(dòng)畫的時(shí)長(zhǎng)，默認(rèn) 300。
支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果：
animationDurationUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}animationEasingUpdate數(shù)據(jù)更新動(dòng)畫的緩動(dòng)效果。
animationDelayUpdate數(shù)據(jù)更新動(dòng)畫的延遲，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果。
如下示例：
animationDelayUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
tooltip本系列特定的 tooltip 設(shè)定。
本文標(biāo)題：創(chuàng)新互聯(lián)ECharts教程：ECharts漏斗圖屬性與實(shí)例介紹
網(wǎng)站路徑：http://m.fisionsoft.com.cn/article/dpdjego.html
