xCharts 漏斗图 opts.extra.funnel

以下是在 xCharts 中配置漏斗图 opts.extra.funnel 的属性列表：

属性名	类型	默认值	说明
type	String	funnel	漏斗图类型，可选值：funnel、triangle、pyramid
activeOpacity	Number	0.3	点击高亮时透明度
activeWidth	Number	10	点击高亮时宽度
border	Boolean	true	是否绘制类别分割线
borderWidth	Number	2	分割线宽度
borderColor	Color	#FFFFFF	分割线颜色
fillOpacity	Number	1	漏斗主体透明度
minSize	Number	0	最小值的最小宽度
labelAlign	String	right	数据标签显示位置，可选值：right、left
linearType	String	none	渐变类型，可选值：none、custom
customColor	Array	-	自定义渐变颜色

新版项目中的实际写法

xcharts/funnel/funnel.uvue:12 默认通过接口获取示例数据，但本地配置文件 xcharts/funnel/index.uts 依然完整保留，文档里更适合直接使用本地配置示例。

本地配置示例

xcharts/funnel/index.uts:1 第一组“标准漏斗图”配置如下：

export default [
	{
		name: '标准漏斗图',
		option: {
			animation: true,
			dataLabel: true,
			extra: {
				funnel: {
					activeOpacity: 0.3,
					activeWidth: 10,
					border: true,
					borderColor: '#FFFFFF',
					borderWidth: 2,
					fillOpacity: 1,
					labelAlign: 'right'
				},
				tooltip: {}
			},
			series: [
				{ name: '一班', data: [{ centerText: '50', value: 50 }] },
				{ name: '二班', data: [{ centerText: '30', value: 30 }] },
				{ name: '三班', data: [{ centerText: '20', value: 20 }] },
				{ name: '四班', data: [{ centerText: '18', value: 18 }] },
				{ name: '五班', data: [{ centerText: '8', value: 8 }] }
			],
			type: 'funnel'
		}
	}
]

页面初始化示例

import opts from './index.uts'

function initFinished(e : ITuiCharts) {
	charts = e
	opts.forEach((item : UTSJSONObject, index : number) => {
		const chart = e.add(index, item.getJSON('option')!)
		chart.setCoordinates({ height: 287, xOffset: 0, yOffset: itemH * index })
		chart.draw()
	})
}

常见用法归纳

结合 xcharts/funnel/index.uts，当前漏斗图主要覆盖这些场景：

• 标准漏斗图
• 渐变色 + 自定义标签
• 倒三角漏斗图
• 金字塔漏斗图

关键配置通常包括：

• extra.funnel.type
• extra.funnel.labelAlign
• extra.funnel.activeOpacity
• extra.funnel.activeWidth
• extra.funnel.minSize
• series[].data[].centerText

动态更新示例

xcharts/funnel/funnel.uvue:33 演示了初始化后的数据更新：

function updatearcbar() {
	const char = charts!
	const bar = char.getDrawCharts(0)!
	bar.update({
		series: [
			{ name: '目标值', data: [{ value: 50 }, { value: 60 }, { value: 55 }, { value: 65 }, { value: 45 }, { value: 70 }] },
			{ name: '完成量', data: [{ value: 10 }, { value: 20 }, { value: 15 }, { value: 25 }, { value: 5 }, { value: 30 }] }
		]
	})
}

适合转化率分析、流程漏斗、阶段流失率、销售管道等场景。