企业官网建设流程全解析

DAC 是一款 dashboard-as-code 工具，用 YAML 或 JSX 定义交互式仪表盘，内置语义层，让 AI Agent 也能生成标准化、可评审的数据看板。本文带你实战 DAC 的21 种图表类型——从折线图、柱状图到漏斗图、桑基图，教你为每种数据故事选对图表。

上面是dac serve打开后的看板列表界面：每个 YAML 文件就是一个看板，图表、筛选器、数据连接全部写在代码里，可以进 Git 做评审和版本管理。

快速上手：一条命令预览全部图表

DAC 的图表通过 widget 的chart字段声明，类型枚举定义在 schemas/dac/dashboard/v1/schema.json。想亲眼看看全部效果，直接跑仓库自带的示例项目：

dac serve --dir examples/basic-yaml

浏览器打开后，示例里的漏斗图、仪表盘、树图等都会即时渲染。示例运行方式和项目说明见 examples/README.md。

DAC 21 种图表类型速查表

这是 DAC 官方文档首页列出的 21 种内置图表（出处：docs/index.md），按"讲什么故事"分组速查：

完整字段说明见官方文档 docs/dashboards/widgets.md。

按数据故事选图：5 类场景实战

讲趋势：line / area / sparkline

趋势类图表的精髓是x用日期列 +y用指标列。实验读出的经典用法是给折线加上yMin/yMax置信带和"无效应"参考线，一眼判断效应是否显著：

- name: Line + CI band type: chart chart: line x: { field: day } y: { field: effect } yMin: lo # 置信区间下界列 yMax: hi # 置信区间上界列

这套"置信带 + 森林图 + 误差棒"的完整实验看板可直接参考 examples/basic-yaml/dashboards/experiment-charts.yml。

讲转化与流向：funnel / sankey / waterfall

漏斗图自动算出每阶段占顶层的比例和逐级转化率，数据只需label+value两列，且行顺序即漏斗顺序（顶层在前）：

- name: Onboarding Funnel type: chart chart: funnel label: stage value: { field: users }

营销漏斗的完整示例（含分渠道对比、横向布局、SQL 版漏斗）见 examples/basic-yaml/dashboards/marketing-funnel.yml。桑基图则把"来源 → 去向"的流量画成丝带，source/target/value三列即可；瀑布图按行累计出收支桥梁，两者都不需要额外配置。

讲占比与目标：pie / treemap / gauge

• 分类少（≤6）用pie，分类多改用treemap，矩形面积更省空间；
• gauge是"KPI vs 目标"神器：查出一行current和target，半圆仪表直接显示完成百分比。

gauge、treemap、radar、candlestick 四种新图表的验证示例在 examples/basic-yaml/dashboards/new-charts.yml，例如仪表盘写法：

- name: Revenue vs Target type: chart chart: gauge sql: | SELECT SUM(amount)::INTEGER AS current, 15000000 AS target FROM sales value: { field: current } target: target

讲分布与离散：histogram / boxplot / scatter / heatmap

• histogram客户端自动分箱，bins默认 10；
• boxplot客户端算四分位，适合"每个区域的价格分布"；
• scatter看两变量相关，加size列升级为bubble；
• heatmap适合"渠道 × 区域"这类交叉矩阵，showValues: true可在格子内直接显示数值，colorScale可把默认蓝色分档换成红白绿连续色带（钉住range后零值正好落在中性色，不同筛选视图之间颜色可比）。

讲对比：bar / dumbbell / radar / candlestick

• 多列y.field自动渲染为分组柱状图；加color+stacked: true变堆叠，normalized: true变百分比堆叠；
• dumbbell用两个 y 列画"起点—终点"哑铃，前后对比一目了然；
• radar把多个维度摊到极坐标上做多维画像；
• candlestick需要open/high/low/close四列，是金融场景标配。

两个隐藏高手：forest 与 vega-lite

除了官方 21 种，schema 里还有两个进阶类型值得知道：

1. forest森林图：每个类别一个点估计 + 置信区间，区间跨过 0 时自动变灰（表示不显著），是 A/B 实验多指标总览的最佳搭档。
2. chart: vega-lite：当内置图表满足不了构图需求（分层、分面、拼接、变换）时，直接把 Vega-Lite 规范写进spec，DAC 查询结果作为名为dac的数据集注入。官方示例 examples/basic-yaml/dashboards/vega-lite.yml 用曲线丝带画了一个"桑基风"客户旅程，还包含置信区间分层、双轴、棒棒糖图。

写图表不踩坑的 4 条规则 📌

来自 docs/dashboards/widgets.md 的编码规范：

1. 字段必须包在对象里：x: { field: month }有效，x: month无效——这是最常见的校验报错来源。
2. 格式交给 format：金额写"$,.0f"，百分比写".0%"，日期写"%b %Y"，省略时自动用紧凑格式（如1.2M）。
3. 双轴用 y2：金额（美元）和转化率（%）量纲不同，把转化率列放进y2.field即可共享一张图，但y2不能与stacked/horizontal/color混用。
4. 稀疏折线记得锚零：趋势图设置beginAtZero: true，避免自动缩放夸大波动。

小结：一张图讲清一个故事

21 种图表本质上只回答 6 个问题：怎么变的（line/area/sparkline）、谁多谁少（bar/pie/treemap/gauge）、流向哪里（funnel/sankey/waterfall）、分布如何（histogram/boxplot/scatter/heatmap/calendar）、稳不稳定（xmr）、前后差多少（dumbbell/radar/candlestick）。

选对图表只是第一步——在 DAC 里，这些图表都是 YAML 代码，可以提交评审、让 AI Agent 按规范批量生成、随数据源变化自动重跑。数据故事的"讲清楚"，从此有了可复制的写法。