Appearance
漏斗图
3D 漏斗图通过逐层递减的立体图形展示数据流转过程,适用于转化率分析、销售漏斗、流程分析等场景。
快速开始
最简单的漏斗图只需提供每个阶段的数值和名称:
vue
<template>
<RayFunnel :option="chartOption" />
</template>
<script setup>
import { ref } from 'vue';
import { RayFunnel } from 'raychart';
const chartOption = ref({
series: [
{
type: 'funnel3D',
data: [
{ value: 100, name: '展示' },
{ value: 80, name: '点击' },
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
],
},
],
});
</script>智能默认值
自动配置圆锥形状、降序排序、居中对齐和光照效果,开箱即用。
核心配置
数据配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
series.data | Array<{value: number, name: string}> | - | 漏斗图数据(必填) |
series.sort | 'descending' | 'ascending' | 'none' | 'descending' | 排序方式 |
排序说明
descending: 降序排列(默认),数值从大到小ascending: 升序排列,数值从小到大none: 按数据原始顺序,不排序
形状配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
series.shape | 'cone' | 'pyramid' | 'cone' | 漏斗形状 |
series.width | number | 24 | 漏斗宽度 |
series.height | number | 24 | 漏斗高度 |
series.gap | number | 0.5 | 层间间隙 |
形状选择
cone: 圆锥形漏斗,适合展示平滑的转化过程pyramid: 四棱锥形漏斗,适合展示阶梯式的转化过程
布局配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
series.funnelAlign | 'center' | 'left' | 'right' | 'center' | 对齐方式 |
series.minSize | number | 0 | 最小层尺寸(0-1) |
标签配置(可选)
通过 series.label 配置标签样式:
javascript
label: {
show: true,
position: 'outside', // 'inside'(默认) | 'outside' | 'right' | 'left'
fontSize: 14,
color: '#333',
leaderLine: { // 引导线（position 为 'outside' 或 'right' 时显示）
show: true,
length: [3, 5], // [第一段, 第二段] 长度
lineStyle: {
color: '#999',
width: 1,
type: 'solid',
opacity: 0.8
}
}
}引导线说明
引导线仅在 position: 'outside' 或 'right' 时显示，相机旋转时引导线会动态跟随标签位置。
材质配置(进阶)
通过 series.itemStyle 配置材质效果:
javascript
itemStyle: {
transmission: 0, // 透光度(0-1)
opacity: 0.9, // 不透明度(0-1)
transparent: true, // 启用透明
roughness: 0.8, // 粗糙度(0-1)
metalness: 0, // 金属度(0-1)
}常见场景
基础漏斗图
展示标准的转化漏斗流程:
vue
<template>
<RayFunnel :option="chartOption" />
</template>
<script setup>
import { ref } from 'vue';
import { RayFunnel } from 'raychart';
const chartOption = ref({
series: [
{
type: 'funnel3D',
data: [
{ value: 100, name: '展示' },
{ value: 80, name: '点击' },
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
],
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
label: {
show: true,
position: 'inside',
fontSize: 14,
color: '#fff',
},
},
],
});
</script>四棱锥形状
使用四棱锥形状展示更具棱角的转化过程:
vue
<script setup>
const chartOption = ref({
series: [
{
type: 'funnel3D',
data: [
{ value: 100, name: '展示' },
{ value: 80, name: '点击' },
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
],
shape: 'pyramid', // 四棱锥形状
width: 24,
height: 24,
gap: 0.5,
},
],
});
</script>升序漏斗图
反向展示流程,从小到大排列:
vue
<script setup>
const chartOption = ref({
series: [
{
type: 'funnel3D',
data: [
{ value: 20, name: '订单' },
{ value: 40, name: '咨询' },
{ value: 60, name: '访问' },
{ value: 80, name: '点击' },
{ value: 100, name: '展示' },
],
sort: 'ascending', // 升序排列
shape: 'cone',
label: {
show: true,
position: 'inside',
fontSize: 14,
},
},
],
});
</script>外部标签引导线
使用引导线将标签放置在漏斗外部:
vue
<script setup>
const chartOption = ref({
series: [
{
type: 'funnel3D',
data: [
{ value: 100, name: '展示' },
{ value: 80, name: '点击' },
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
],
label: {
show: true,
position: 'outside', // 外部标签
fontSize: 14,
color: '#333',
leaderLine: {
// 引导线配置
show: true,
length: [3, 5],
lineStyle: {
color: '#999',
width: 1,
type: 'solid',
opacity: 0.8,
},
},
},
},
],
});
</script>组件属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
option | RayChartOption | - | 图表配置对象(必填) |
width | string | number | '100%' | 图表宽度 |
height | string | number | '600px' | 图表高度 |