在数据驱动决策的时代，精准的可视化工具是解析数据规律的核心载体。作为前端表格与数据可视化领域的专业控件，SpreadJS 始终以用户需求为导向，在 V18.2 版本中，DataCharts 模块迎来重磅更新 ------ 新增漏斗图 与树状图两种高频图表类型，覆盖流程分析、层级数据对比等关键场景，进一步降低复杂数据的解读门槛。
一、漏斗图：直观追踪流程转化，定位数据流失节点
![]()
- 什么是漏斗图？核心应用场景
漏斗图以 "顶部宽、底部窄" 的漏斗形态，直观展示流程各阶段的数据流变化，量化每个阶段的用户 / 项目数量递减趋势。在实际业务中，它是分析 "转化效率" 的核心工具，典型场景包括：
- 销售漏斗：追踪 "潜在客户→意向客户→报价客户→成交客户" 的转化路径，定位流失率高的环节；
- 网站访客转化：分析 "首页访问→产品页浏览→加入购物车→完成支付" 的用户行为，优化转化链路；
- 招聘流程：监控 "简历投递→初筛→面试→录用" 各阶段的人数变化，评估招聘效率。
2.多维度自定义：代码与可视化操作双支持
SpreadJS 为漏斗图提供了丰富的属性配置能力，开发者与设计师可根据需求灵活调整视觉效果与数据展示逻辑，所有配置既支持代码编程实现，也可在 SpreadJS 设计器的 "检查器（Inspector）" 选项卡中可视化操作，无需复杂编码。
可自定义的核心属性包括：
| 配置维度 |
具体属性示例 |
作用说明 |
| 基础样式 |
漏斗类型、调色板、图形透明度 |
定义漏斗整体视觉风格，适配业务 UI |
| 结构参数 |
顶部宽度、底部宽度、颈部高度 |
调整漏斗形态，优化数据展示比例 |
| 布局与方向 |
方向（横向 / 纵向）、是否反转 |
适配不同展示场景（如报表横向排版） |
示例操作：若需突出销售漏斗各阶段的区分度，可在设计器中选择 "调色板" 为 "渐变蓝"，并将 "图形透明度" 设为 0.7；若通过代码配置，可参考以下片段：
// 获取图表实例
let chart = spread.getActiveSheet().charts.get("funnelChart");
// 设置漏斗图属性
chart.chartType(GC.Spread.Sheets.Charts.ChartType.funnel);
chart.options().funnelOptions = {
topWidth: 0.8, // 顶部宽度占比
bottomWidth: 0.2, // 底部宽度占比
transparency: 0.7, // 图形透明度
direction: GC.Spread.Sheets.Charts.FunnelDirection.vertical // 纵向展示
};
3.两种数据绑定模式：适配不同数据结构
漏斗图支持两种数据绑定模式，可根据业务数据的组织形式灵活选择，满足不同分析需求：
（1）类别 - 值绑定（Category-Value Binding）
- 核心逻辑：将 "流程阶段" 等分类数据映射为漏斗分段，"阶段数量" 等数值数据映射为分段大小；
- 视觉特点 ：分段大小由 "顶部宽度" 决定，漏斗侧边呈现非平滑效果，适合快速对比各阶段的数量差异；
- 适用场景：数据结构简单（仅含 "阶段 - 数量" 两维度），如 "招聘流程各阶段人数统计"。
（2）详情 - 值绑定（Detail-Value Binding）
- 核心逻辑：在 "数值数据" 基础上，额外绑定 "子阶段指标" 等详细数据字段，丰富分段的属性维度；
- 视觉特点 ：分段大小由 "高度" 决定，漏斗整体形态由 "顶部宽度、底部宽度" 共同控制，侧边呈现平滑效果；
- 适用场景：数据包含多层维度（如 "销售漏斗 + 各阶段转化率"），需更精细的视觉呈现。
二、树状图：清晰展示层级数据，快速对比元素占比
![]()
![]()
- 什么是树状图？核心应用场景
树状图以 "嵌套矩形" 的形式展示层级结构数据，每个矩形代表一个类别或子类别，矩形大小与指定数值（如数量、占比）成比例，颜色可区分不同层级或类别，帮助用户快速识别：
- 层级关系：如 "公司组织架构（总部→部门→小组）""产品分类（大类→子类→SKU）"；
- 数值占比：如 "各产品线销售额占比""各区域用户数量分布"。
2.灵活自定义：从样式到交互的全维度配置
与漏斗图一致，SpreadJS 树状图支持通过代码或设计器 "检查器" 选项卡调整属性，覆盖视觉样式、背景、交互提示等维度，核心可配置属性包括：
- 视觉样式：调色板、图形不透明度、边框样式（颜色、粗细、线型）；
- 背景与内边距：图表背景色、图表边框（是否显示、样式）、绘图区内边距；
- 交互提示：提示框（tooltip）样式（背景色、字体、边框），鼠标悬浮时显示数据详情。
实用场景：若需展示 "电商平台商品分类销售额"，可将 "一级类目" 设为外层矩形，"二级类目" 设为内层矩形，通过调色板区分不同一级类目，矩形大小对应销售额，鼠标悬浮时显示 "类目名称 + 销售额 + 占比"，让数据对比更直观。
3.注意事项：不支持悬停动画（Hover Animation）
需特别说明的是，当前 SpreadJS V18.2 版本的树状图不支持悬停动画功能，即鼠标悬浮在矩形上时，不会触发动态效果（如缩放、变色动画）。若业务对动画交互有强需求，可关注后续版本更新或通过自定义代码补充基础交互逻辑。
三、总结：SpreadJS V18.2 数据可视化能力再升级
此次 SpreadJS V18.2 新增的漏斗图与树状图，精准覆盖了 "流程转化分析" 与 "层级数据对比" 两大高频场景，不仅提供了丰富的自定义配置能力，还兼顾了开发者（代码编程）与设计师（可视化操作）的使用习惯，降低了复杂数据可视化的实现门槛。
无论是销售、运营、HR 等业务场景的数据分析，还是企业报表、BI 系统的开发，漏斗图与树状图都能帮助用户更高效地解读数据、定位问题、支撑决策。未来，SpreadJS 还将持续优化数据可视化模块，带来更多贴合业务需求的图表类型与功能，助力前端开发更高效、数据展示更精准。
若你想体验漏斗图与树状图的实际效果，可前往 SpreadJS 官方文档 查看 demo 与教程，或下载试用版直接上手开发！
