ECharts漏斗圖

在 ECharts 系列中，漏斗圖使用 series[i]-funnel 表示。漏斗圖適用于業務流程比較規范、周期長、環節多的流程分析，通過漏斗各環節業務數據的比較，能夠直觀地發現和說明問題所在。

示例：

ECharts漏斗圖屬性type

在漏斗圖中，type 值為 funnel。name

系列名稱，用于tooltip的顯示，legend?的圖例篩選，在?setOption?更新數據和配置項時用于指定對應的系列。min

指定的數據最小值，不設置時為 0。max

指定的數據最大值，默認為 100。minSize

數據最小值?min?映射的寬度，默認為0%。

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

數據最大值?max?映射的寬度，默認為 100%。

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

數據排序， 可以取?'ascending'，'descending'(默認值)，'none'(表示按 data 順序)，或者一個函數(即?Array.prototype.sort(function (a, b) { ... }))。gap

數據圖形間距。legendHoverLink

是否啟用圖例?hover 時的聯動高亮，默認為 true。funnelAlign

水平方向對齊布局類型，默認居中對齊，可用選項還有：'left'、'right'、'center'(默認值)label

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

標簽的視覺引導線樣式，在?label 位置設置為'left'或者'right'的時候會顯示視覺引導線。itemStyle

圖形樣式，有?normal?和?emphasis?兩個狀態。normal?是圖形在默認狀態下的樣式；emphasis?是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。data[i]

系列中的數據內容數組。數組項可以為單個數值，如：[12, 34, 56, 10, 23]

如果需要在數據中加入其它維度給?visualMap?組件用來映射到顏色等其它圖形屬性。每個數據項也可以是數組，如：[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]

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

更多時候我們需要指定每個數據項的名稱，這時候需要每個項為一個對象：[{

// 數據項的名稱

name: '數據1',

// 數據項值8

value: 10

}, {

name: '數據2',

value: 20

}]

需要對個別內容指定進行個性化定義時：[{

name: '數據1',

value: 10

}, {

// 數據項名稱

name: '數據2',

value : 56,

//自定義特殊 tooltip，僅對該數據項有效

tooltip:{},

//自定義特殊itemStyle，僅對該item有效

itemStyle:{}

}]markPoint

設置漏斗圖的圖表標注。markLine

設置漏斗圖的圖表標線。markArea

圖表標域，常用于標記圖表中某個范圍的數據，例如標出某段時間投放了廣告。silent

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

是否開啟動畫，默認為 true。animationThreshold

是否開啟動畫的閾值，默認為2000，當單個系列顯示的圖形數量大于這個閾值時會關閉動畫。animationDuration

初始動畫的時長，默認為1000，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果：animationDuration: function (idx) {

// 越往后的數據延遲越大

return idx * 100;

}animationEasing

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

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

如下示例：animationDelay: function (idx) {

// 越往后的數據延遲越大

return idx * 100;

}

也可以看該示例animationDurationUpdate

數據更新動畫的時長，默認 300。

支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果：animationDurationUpdate: function (idx) {

// 越往后的數據延遲越大

return idx * 100;

}animationEasingUpdate

數據更新動畫的緩動效果。animationDelayUpdate

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

如下示例：animationDelayUpdate: function (idx) {

// 越往后的數據延遲越大

return idx * 100;

}

也可以看該示例tooltip

本系列特定的 tooltip 設定。

總結

以上是生活随笔為你收集整理的charts漏斗图表_ECharts漏斗图属性与实例介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。