Evidence 交互式销售分析仪表板实战：用 SQL + Markdown 构建可过滤的数据可视化

数据分析数据可视化前端【免费下载链接】evidenceBusiness intelligence as code: build fast, interactive data visualizations in SQL and markdown项目地址https://gitcode.com/gh_mirrors/ev/evidence点击查看免费下载本文以 Evidence 仓库内的cli/test-environment/pages/test.md页面为核心样例逐段拆解一个完整销售分析仪表板的写法——从下拉筛选器、KPI 卡片、趋势折线图到透视表、迷你趋势线与同比对比覆盖 Evidence 核心组件的真实用法。读完本文你将掌握如何仅用一个 Markdown 文件 少量组件语法组合出具备交互筛选能力的业务报表并理解这些组件背后的查询与渲染机制。一、先认识 test.md一个可运行的全功能示例页在 Evidence 中一个*.md文件就是一张页面。仓库 cli/test-environment/pages/test.md 是 CLI 开发期用来验证组件能力的组件测试页其页面标题为Sales Analytics Dashboard销售分析仪表板实际演示了以下能力的组合交互筛选dropdown下拉框button_group按钮组option选项KPI 卡片big_value大数字指标卡 内嵌sparkline迷你趋势图趋势可视化line_chart折线图series分组系列date_grain时间粒度表格体系tabledimension维度/pivot透视/measure度量支持vizbar、vizcolor、vizsparkline三种单元格可视化周期对比date_range时间窗口comparison对比vizdelta增量角标这份页面依赖两张示例数据表demo_daily_orders每日订单事实表含date、category、total_sales、transactions、avg_transaction_value等字段与demo_items商品表含category、item_name、base_price。与同目录的 order-analysis.md订单分析和 home.mdCLI 导航首页相比test.md 的定位更偏向组件能力覆盖测试——每一类组件都安排了至少一个典型场景。该目录的定位在 cli/test-environment/README.md 中有说明这是 CLI 开发时用于验证命令的本地 Evidence 工程CLI dev playground。因此test.md既可作为入门学习模板也可作为你新建项目页面的起点。二、如何运行这份页面要在本地把 test.md 渲染出来只需要在仓库根目录执行# 默认针对 cli/test-environment 目录执行 CLI 命令 pnpm evd help pnpm evd query --sql select 1 # 启动开发服务器底层走 vite dev无需编译二进制 pnpm evd dev依据 cli/test-environment/README.md 的说明这些脚本并不会cd进该目录而是通过--project cli/test-environment把项目路径传给 CLI从而保证process.cwd()语义正确想指向其他项目时追加--project ./other/path即可。validate、docs等命令走 SvelteKit HTTP 层依赖 vite-only 结构需要先执行pnpm cli:build编译或保持开发服务器运行。需要连接真实数仓时在该目录下放置一个connection.yaml已被 gitignore指向你的开发数仓示例查询便会从该数据源取数。三、搭建页面筛选器dropdown 与 button_group一个交互式报表的第一步通常是定义用户能按什么维度筛。test.md 的## Filters小节演示了两种筛选器3.1 下拉筛选从数据列取值{% dropdown idcategory_filter datademo_daily_orders value_columncategory titleCategory initial_valueAll /%}要点id筛选器唯一标识后续所有图表通过filters[category_filter]引用它datavalue_column指定从哪张表、哪一列去枚举下拉选项去重后的 distinct 值title显示在下拉框上方的标题文本initial_valueAll初始选中值。当数据中恰好存在All这个值时它代表全量语义在 test.md 中它与图表的联动方式是filters属性而非where字符串当选中All时相当于不过滤。依据 docs/components/dropdown.mdx 的属性定义dropdown还支持label_column选项标签列、order排序如category desc、multiple多选、default_top_n多选时预选前 N 项、search选项搜索默认true、where自定义 WHERE 条件等进阶参数。两个下拉框若互相把id放进对方的filters数组即可形成级联筛选Cascading Dropdowns。3.2 按钮组固定选项的粒度切换{% button_group idtime_grain titleTime Grain %} {% option valuemonth labelMonthly /%} {% option valuequarter labelQuarterly /%} {% option valueyear labelYearly /%} {% /button_group %}button_group适合选项数量少且含义固定的场景这里用来切换时间聚合粒度。与dropdown从数据列取值不同它的选项由内部option子组件静态声明value是实际传给图表的取值label是用户看到的文本。结合 docs/components/button_group.mdx 的文档它还支持orientationvertical纵向排列、initial_value与multiple等属性若改为从数据列取值也可以像 dropdown 一样使用datavalue_column组合。3.3 筛选值如何被引用这两种筛选器在 test.md 中有两种被消费的方式声明式filters属性test.md 的主力用法图表与big_value直接写filters[category_filter]由 Evidence 自动把选中值拼进查询{{id}}模板变量如date_grain{{time_grain}}把按钮组的选中值month/quarter/year作为字符串注入图表属性实现粒度动态切换。从源码结构看这类变量插值由 core/src/filter-variables/VariableProcessor.ts 与 core/src/Filter.svelte.ts 组成的筛选子系统处理。dropdown筛选值还暴露多种属性如{{category_filter.filter}}返回可直接用于 WHERE 的 SQL 片段、{{category_filter.selected}}返回带引号的值、{{category_filter.literal}}返回原始值、{{category_filter.label}}返回显示标签详见 docs/components/dropdown.mdx 的 Using the Filter Variable 一节——这意味着你既可以让组件自动过滤也可以把筛选值手写进 SQL 或where属性中。四、KPI 卡片区big_value sparkline## Key Metrics小节用{% row %}栅格包裹三张 KPI 卡{% row %} {% big_value datademo_daily_orders valuesum(total_sales) titleTotal Sales fmtusd1m filters[category_filter] sparkline{ typearea xdate } /%} {% big_value datademo_daily_orders valuesum(transactions) titleTotal Transactions fmtnum0 filters[category_filter] sparkline{ typebar xdate } /%} {% big_value datademo_daily_orders valueavg(avg_transaction_value) titleAvg Transaction Value fmtusd2 filters[category_filter] /%} {% /row %}三个卡片展示了 KPI 卡的核心参数组合参数作用示例data查询的数据表demo_daily_ordersvalue要展示的 SQL 聚合表达式sum(total_sales)、count(*)、avg(...)title卡片标题Total Salesfmt数值格式化代码usd1m百万美元/1 位小数、num0整数、usd2美元/2 位小数filters绑定的筛选器 id 数组[category_filter]sparkline迷你趋势图对象type可选area/bar/linex指定时间轴列{ typearea xdate }fmt体系是 Evidence 数值格式化的核心完整格式定义见 docs/core-concepts/value-formatting.mdx 及 core/src/user-components/formatValue.tsusd系处理货币与单位换算usd1m表示以百万为单位、保留 1 位小数num0表示千分位整数pct系为百分比。关于 sparkline 的实现细节迷你趋势图本质是查询时按x列聚合出的系列数据。从 core/src/connectors/normalize-sparkline-rows.ts 的源码可以看到各数仓方言生成 sparkline 列的方式不同——ClickHouse 用groupArray((x, y))、Snowflake 用ARRAY_AGG(ARRAY_CONSTRUCT(x, y))而 BigQuery 输出的是 JSON 字符串需由normalizeSparklineRows在结果侧统一JSON.parse成[[x, y], ...]的元组数组后再交给图表渲染。这说明 sparkline 不是重查一遍而是与主查询共用一次取数、在列级别追加聚合代价极低。五、趋势分析line_chart 的四种组合5.1 分组面积折线 动态粒度{% line_chart datademo_daily_orders xdate ysum(total_sales) seriescategory date_grain{{time_grain}} y_fmtusd titleSales Over Time by Category subtitleInteractive: select a category above to filter filters[category_filter] /%}这是整页最典型的趋势图seriescategory按品类拆分多条折线date_grain{{time_grain}}用按钮组的取值动态切换月/季/年聚合y_fmtusd格式化 Y 轴filters让折线图随下拉框即时重查。依据 docs/components/line_chart.mdxdate_grain的合法取值非常丰富除了month/quarter/year还包括day of week一周内按星期几聚合、month of year一年内按月聚合、quarter of year、week of year、day of month等——它们正是下方季节性与周期性小节用到的核心能力。5.2 三图并排同一数据源的多种指标视角{% row %} {% line_chart datademo_daily_orders xdate ysum(transactions) date_grain{{time_grain}} y_fmtnum0 titleTransaction Volume filters[category_filter] /%} {% line_chart datademo_daily_orders xdate yavg(avg_transaction_value) date_grain{{time_grain}} y_fmtusd2 titleAverage Transaction Value filters[category_filter] /%} {% /row %}row组件把多个图表按栅格等宽并排保持视觉对齐。这里演示了同一张明细表如何从单量num0与客单价usd2两个角度分别刻画趋势且都共享同一筛选上下文。5.3 季节性与周期性分析{% row %} {% line_chart datademo_daily_orders xdate ysum(total_sales) y_fmtusd date_grainday of week titleSales by Day of Week filters[category_filter] /%} {% line_chart datademo_daily_orders xdate ysum(total_sales) y_fmtusd date_grainmonth of year titleSeasonality (Month of Year) filters[category_filter] /%} {% /row %}date_grainday of week与date_grainmonth of year是 Evidence 处理周期性规律的快捷方式前者自动把时间轴折叠为周一到周日 7 个桶后者折叠为 1–12 月 12 个桶无需手写extract(dow from date)。这是从明细日期列直接生成周期洞察的低成本写法docs/components/line_chart.mdx 中另有quarter of year、week of year、day of month等粒度可进一步扩展。六、表格体系dimension / pivot / measure 与单元格可视化test.md 后半段全部围绕table组件展开展示了该组件的四种典型形态。6.1 透视表维度 × 年份列 × 多度量{% table datademo_daily_orders filters[category_filter] %} {% dimension valuecategory /%} {% pivot valuedate date_grainyear /%} {% measure valuesum(total_sales) titleTotal Sales fmtusd1m vizbar bar_options{ bar_color#3b82f6 } /%} {% measure valuesum(transactions) titleTransactions fmtnum0 vizcolor /%} {% measure valuesum(total_sales) / sum(transactions) as avg_order titleAvg Order Value fmtusd2 /%} {% /table %}这里的结构是dimension定义行维度categorypivot把date按年转置为列date_grainyear三个measure分别定义数值单元格。值得注意的进阶能力度量即表达式第三个度量直接写了带别名的新聚合sum(total_sales) / sum(transactions) as avg_order说明measure的value支持任意 SQL 表达式而不限于单个聚合单元格可视化vizbar在单元格内画迷你条形bar_options.bar_color指定#3b82f6蓝色条vizcolor用背景色深浅表示数值高低两者都不改表格布局。依据 docs/components/table.mdxmeasure还支持date_range列级时间窗口、comparison列级对比、sparkline_options迷你趋势列等配置pivot除date_grain外也可按普通维度列转置。6.2 带迷你趋势的明细表{% table datademo_daily_orders filters[category_filter] %} {% dimension valuecategory /%} {% measure valuesum(total_sales) titleTotal Sales fmtusd1m /%} {% measure valuesum(total_sales) titleSales Trend vizsparkline sparkline_options{ xdate typearea } /%} {% measure valuesum(transactions) titleTransactions fmtnum0 /%} {% measure valuesum(transactions) titleTransaction Trend vizsparkline sparkline_options{ xdate typebar } /%} {% /table %}这段代码展示了数值 趋势并列的经典打法对同一指标声明两条measure——一条显示汇总值另一条用vizsparklinesparkline_options{ xdate typearea }显示该维度随时间的变化曲线与big_value的sparkline参数同构。数据底层同样由normalizeSparklineRows这类方言适配层统一成[[x, y], ...]结构无需额外请求。6.3 同比对比表date_range comparison delta{% table datademo_daily_orders filters[category_filter] %} {% dimension valuecategory /%} {% measure valuesum(total_sales) titleSales (Last 12 Months) fmtusd1m date_range{ rangelast 12 months datedate } comparison{ compare_vsprior year } vizdelta /%} {% measure valuesum(transactions) titleTransactions (Last 12 Months) fmtnum0 date_range{ rangelast 12 months datedate } comparison{ compare_vsprior year } vizdelta /%} {% /table %}这是同比分析的标准模板三个参数缺一不可参数作用date_range限定统计窗口range取值如last 12 months、month to date、last 30 days、自定义区间2020-01-01 to 2023-03-01或开区间from .../until ...date指定表内用于过滤的日期列多日期列时必须显式给出comparison对比基准compare_vsprior year表示与去年同期上一自然年同期窗口比较另有prior quarter、target与固定目标值比较等选项vizdelta把当前值 vs 对比值渲染为带向上/向下箭头的增量角标配合fmt显示绝对值与变化方向date_range与comparison同样可用在big_value与delta组件上见 docs/components/big_value.mdx 与 docs/components/delta.mdx使近 12 个月销售额 vs 上年这类 KPI 可以一句话写出。6.4 商品目录表多维度 条件条形{% table datademo_items %} {% dimension valuecategory /%} {% dimension valueitem_name titleProduct /%} {% measure valuemax(base_price) titlePrice fmtusd2 vizbar bar_options{ bar_color#10b981 } /%} {% /table %}这里换用了第二张数据表demo_items演示两点一是table允许多个dimension构成多级行分组品类 → 商品名titleProduct可覆盖列标题二是vizbar的单元格条形与big_value场景无关是独立于 KPI 卡的通用能力此处换成绿色#10b981以区分页面内其他图表的配色。七、从示例页到真实项目改造清单把 test.md 改造成你自己的分析页面核心步骤是换表、换列、换参数确认数据源在connection.yaml中配置数仓连接确认目标表的字段名与 test.md 使用的date/category/total_sales/transactions等一致或做相应替换替换数据表与字段所有组件里的data、value_column、value、x、series、pivot value、date_range.date逐一映射到你的真实字段调整筛选器dropdown的value_column换成你想让用户筛选的维度列button_group的option换成符合业务语义的粒度统一格式化按指标含义选fmt金额用usd系、数量用num0系、比例用pct系本地验证运行pnpm evd dev后通过浏览器观察筛选器联动、粒度切换与同比角标是否符合预期控制台会输出对应的查询执行日志cli/test-environment/README.md 明确提到Check the console for query execution logs。若你的团队需要按 SQL 文件组织查询可参照 docs/features/sql-files.mdx 把指标查询沉淀为独立 SQL需要语义指标复用则可使用metric属性如{% big_value metricrevenue /%}其定义与约束见 docs/core-concepts/metrics.mdx。八、小结test.md用不到 260 行 Markdown 覆盖了 Evidence 交互式报表的绝大多数高频组件与参数组合dropdown/button_group负责输入big_value/line_chart/table负责呈现date_grain处理时间粒度与周期洞察date_rangecomparisondelta完成同比分析sparkline与单元格viz在不增加查询次数的前提下补齐趋势细节。它既是 CLI 团队验证组件的测试页也是一份可以直接对照学习的组件速查模板——把其中的数据表与字段替换成你自己的数据一个具备完整交互能力、用 SQL 和 Markdown 编写的销售分析仪表板就能在本地跑起来。赞分享数据分析数据可视化前端【免费下载链接】evidenceBusiness intelligence as code: build fast, interactive data visualizations in SQL and markdown项目地址https://gitcode.com/gh_mirrors/ev/evidence点击查看免费下载相关推荐Metabase仪表板开发交互式数据可视化实战Metabase仪表板开发交互式数据可视化实战 本文详细介绍了Metabase仪表板开发的四个核心方面仪表板布局设计与组件配置、过滤器联动与交互功能实现、多数据分析数据可视化后端数据库客户端企业应用RATH仪表板构建指南创建交互式数据可视化看板RATH仪表板构建指南创建交互式数据可视化看板 RATH是一个开源的增强分析平台能够自动化数据探索和可视化过程帮助用户快速构建专业的交互式数据仪表板。数据分析数据可视化BI机器学习DataEase交互式仪表板实战从零构建动态数据可视化系统DataEase交互式仪表板实战从零构建动态数据可视化系统 DataEase作为一款开源BI工具让数据可视化和交互式分析变得简单易用。通过模块化设计方法即数据分析数据可视化后端前端上一篇90DaysOfDevOps 开源贡献工作流实战从 Fork 到 Pull Request 的完整指南Day 41下一篇Nub架构深度剖析Rust如何通过Node的5大公开扩展面增强原版运行时创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考