设计系统
专业的数据可视化规范
基于 AntV 体系，为 26 种图表建立统一、精确、可扩展的设计语言。
设计原则
准确
忠实反映数据，不歪曲、不误导。用户对数据的信任是可视化的基石。
有效
克制而精准，遵循 Data-ink Ratio。去除冗余装饰，让数据成为主角。
清晰
表现方式条理分明，通过合理的视觉层级引导用户快速获取关键见解。
美观
在功能性的基础上追求视觉美感。好的图表是数据与审美的平衡。
设计哲学
响应式分离设计
移动端和 PC 端是两套独立方案。移动端需要更大的触控区域、更精简的信息层级、更紧凑的内边距。
边界完整性
图表的每一个元素都应完整显示在视口内。坐标轴标签不截断、数据点不溢出、图例不换行。
场景化适配
同一图表在不同场景下需要不同呈现。数据报告中配合洞察结论，仪表盘中注重信息密度。
可读性优先
移动端 10-11px 是标签安全下限，坐标轴标签宁可省略也不要重叠。数值格式化符合业务语境。
色彩语义化
绿色代表增长，红色代表下降，蓝色是中性信息色。保持语义一致，用户无需学习即可理解。
系统性一致
26 种图表使用统一的色板、字号层级、间距规范和交互模式。用户在任何页面都感受到熟悉。
色彩体系
字体规范
参数规范
📱 移动端
- fontSize10-11px
- pointSize3-4px
- lineWidth2px
- padding[25,10,35,35]
🖥 PC 端
- fontSize11-12px
- pointSize4-5px
- lineWidth2px
- padding[40,20,50,50]
📊 图表专项
- columnWidth0.5-0.6
- pieRadius0.85-0.9
- innerRadius0.55-0.6
- fillOpacity0.25-0.3
多指标图表规则
Ant Charts 双轴限制
双轴图不支持同时使用两个柱状图，只能一个柱状图 + 一个其他图（如折线图）。两个柱状图只支持分组柱状图（共用 Y 轴）。
数字格式类型
系统支持三种格式：currency（货币）、number(int)（整数）、percentage（百分比）。
两者有其二规则
当只有两种格式时：currency 优先柱状图，其次 number(int)，剩下的用折线图。例如：销售额（currency）用柱状图，销售量（number）用折线图。
三者都有规则
当三种格式都存在时：currency 和 number(int) 都用柱状图（分组柱状图，共用左侧 Y 轴），percentage 用折线图（右侧 Y 轴）。
判断逻辑
判断顺序：currency、percentage、其他（其他都扔到一个逻辑里面去）。点击图例可隐藏系列，Y 轴会自动适配。