在数据驱动决策的时代，精准的可视化工具是解析数据规律的核心载体

什么是漏斗图？核心应用场景
漏斗图以 “顶部宽、底部窄” 的漏斗形态，直观展示流程各阶段的数据流变化，量化每个阶段的用户 / 项目数量递减趋势。在实际业务中，它是分析 “转化效率” 的核心工具，典型场景包括：

销售漏斗：追踪 “潜在客户→意向客户→报价客户→成交客户” 的转化路径，定位流失率高的环节；
网站访客转化：分析 “首页访问→产品页浏览→加入购物车→完成支付” 的用户行为，优化转化链路；
招聘流程：监控 “简历投递→初筛→面试→录用” 各阶段的人数变化，评估招聘效率。
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 版本的树状图不支持悬停动画功能，即鼠标悬浮在矩形上时，不会触发动态效果（如缩放、变色动画）。若业务对动画交互有强需求，可关注后续版本更新或通过自定义代码补充基础交互逻辑。