漏斗图
title: API
說明: required 標簽代表生成圖表的必選配置項,optional 標簽代表生成圖表的可選配置項。
data: collection
required
數據源為對象集合,例如:[{ action: '瀏覽網站', pv: 50000 }, { action: '放入購物車', pv: 35000 }, { action: '生成訂單', pv: 25000 }]。
xField: string
required
漏斗條目對應的數據字段名,一般對應一個分類字段。
yField: string
required
漏斗數值對應的數據字段名,一般對應一個離散字段。
dynamicHeight: boolean
設置漏斗數值映射關系。false 數值大小映射到漏斗形狀寬度,視覺上呈現為定高度變角度的漏斗圖。true 數值大小映射到漏斗圖形高度,視覺上呈現為定角度變高度的漏斗圖。
默認為 false。
| dynamicHeight: false | dynamicHeight: true |
transpose: boolean
optional
設置布局方式,false 為垂直布局,true 為水平布局,默認為 false。
| transpose: false | transpose: true |
compareField: string
optional
對比漏斗圖必選。
數據集中的對比字段名,一般對應一個分類字段。
通過該字段值,漏斗圖將會被分成兩組,通過左右鏡像位置區分,視覺上呈現為對比漏斗圖。
注意,由于對比漏斗圖左右圖形對稱布局,數值大小只能映射在漏斗形狀寬度,所以啟動 compareField 時 dynamicHeight 設置 true 將無效。
例如 代碼演示 中以 quarter 作為對比字段進行兩個季度數據的比較。
compareText
optional
配置對比漏斗圖位于側方的分類文案樣式及顯示。
visible: boolean: 是否顯示分類文案
offsetX: number: 分類文案相對漏斗圖形左側沿 x 方向的偏移量,僅在水平布局有效
offsetY: number: 分類文案相對漏斗圖形上側沿 y 方向的偏移量,僅在垂直布局有效
style: object: 分類文案樣式
percentage
optional
配置轉化率樣式及內容。在漏斗圖中,轉化率展示由 固定線段、固定文案、數值文案 3 個部分組成,樣式及內容可以分別通過 percentage.line、percentage.text、percentage.value 配置。
visible: boolean 是否顯示轉化率
line.visible: boolean 是否顯示固定線段
line.style: object 固定線段樣式
text.visible: boolean 是否顯示固定文案
text.style: object 固定文案樣式
text.content: string 固定文案內容
value.visible: boolean 是否顯示數值文案
value.style: object 數值文案樣式
value.formatter: (yValueUpper, yValueLower) => string 數值文案內容
offsetX: number? 在當前位置基礎上再往 x 方向的偏移量
offsetY: number? 在當前位置基礎上再往 Y 方向的偏移量
spacing: number 固定線段、固定文本、數值文案之間的間隔
funnelStyle: object | function
optional
配置漏斗單個圖形樣式。
總結
- 上一篇: Angular项目中使用echarts中
- 下一篇: Echarts中国地图的显示