Chart.js 系列课程
第 15 课:实战案例
把前面学过的图表知识拼起来,做一个简单的业务看板页面。
本课你会学到什么
真实业务页面通常不只一张图,而是“指标卡片 + 多张图表”的组合。
本课会用柱形图、折线图、环形图拼一个简化的业务看板。
你要重点观察:不同图表是如何分工协作讲故事的。
图表示例
渠道线索来源
用柱形图比较各渠道带来的线索量。
近 7 天成交趋势
用折线图看趋势和波动。
客户类型占比
用环形图看整体构成。
如何自定义成你自己的图表
如果你要做自己的看板,先想清楚“这张图回答什么问题”,再决定图表类型。
柱形图通常回答“谁更多”,折线图通常回答“最近怎么变了”,环形图通常回答“整体由什么组成”。
如果你的项目有品牌色,优先统一所有图表的主色和辅助色。
实战页最重要的不只是配置参数,而是每张图承担的业务叙事角色。
课后练习建议
把卡片数据改成你自己的业务指标。
把其中一张图替换成雷达图或散点图,看是否更适合你的场景。
尝试给看板增加一个日期筛选器,配合第 14 课的 update 思路。
课程导航
上一课
返回首页
完成本系列