设计规范
EvChart 的默认视觉遵循一套克制的规范:结构元素(网格、轴、图例)退到背景,墨水留给数据。理解这套规范,能更容易配置出干净专业的图表。
设计原则
- 数据墨水比优先——网格与轴退到视觉背景,颜色和粗细留给数据本身;
- 克制——一张图只保留一个视觉焦点,默认无数据点、无装饰性阴影;
- 一致性——同层级元素字号字色完全一致,系列色成套取用;
- 可读性优先——任何装饰不得降低数据与背景的对比度。
色彩
系列色板
数据系列按以下顺序取色(与状态语义色解耦的专用色板),品牌蓝打头:
| # | 令牌 | 浅色 | 暗色 |
|---|---|---|---|
| 1 | --ev-color-series-1(缺省回读 --ev-color-primary) | #175DFF | #4d8bff |
| 2 | --ev-color-series-2 | #5AD8A6 | #5ad8a6 |
| 3 | --ev-color-series-3 | #F6BD16 | #f6bd16 |
| 4 | --ev-color-series-4 | #6DC8EC | #6dc8ec |
| 5 | --ev-color-series-5 | #E8684A | #f08568 |
| 6 | --ev-color-series-6 | #9270CA | #a585e8 |
| 7 | --ev-color-series-7 | #FF9D4D | #ff9d4d |
| 8 | --ev-color-series-8 | #5D7092 | #8da3bf |
未定义的槽位逐槽回落上表;相邻取色的色相差 ≥ 30°,多系列同图不撞色。
配色方案切换
数据色板整体可切换:写一组槽位令牌(浅色 + 暗色各一份,随暗色自动换挡)并广播 ev-theme-change,页面上的全部图表即时跟随。以下预设即此机制的现场效果:
接入方调用内置的 applySeriesPalette / clearSeriesPalette 即可复现这一效果(本页演示即由它驱动),无需自行处理令牌写入与事件广播。
状态语义色边界
success / warning / danger / info 是状态语义色,不再默认进入数据色板;只有当数据本身承载该状态含义(如「告警数」)时,才通过 series[].color 显式指定。
线条与数据点
| 项 | 规范 |
|---|---|
| 线宽 | 默认 1.5;监控小图 1.25;单系列主图 2 |
| 数据点 | 默认不绘制(纯线条观感),showSymbol: true 打开 |
| 悬浮反馈 | 空心圆环 + 十字准线 + tooltip |
| 平滑 | smooth: true 单调三次插值,过点无过冲 |
坐标轴与网格
- 只保留横向网格,1px 极淡实线;无纵向网格;
- y 刻度为「标签 + 短横」式,标签右对齐、次要色;
- 隐藏 x 轴(
xAxis.show: false)时底部轴位自动回收为 12px,小图高度不被挤占; - 刻度密度 y 向约每 26px 一档,x 向可
interval控制。
留白
| 边 | 默认 |
|---|---|
| top | 18(标题/顶部图例另加) |
| right | 24 |
| bottom | 46(隐藏 x 轴 → 12;底部图例/dataZoom 另加) |
| left | 按 y 刻度标签宽度自适应(40–140) |
options.padding 可覆写任意边;长条监控带推荐 { top: 6, right: 8, bottom: 6, left: 34 }。
文字排版
| 元素 | 字号 / 字重 | 颜色 |
|---|---|---|
| 标题 | 13px / 600,左对齐 | 主文字色 |
| 副标题 | 11px / 400 | 次要色 |
| 图例 / 轴标签 | 12px / 400 | 次要色 |
| tooltip 数值 | 13px / 600 | 主文字色 |
动效
- 默认补间 1200ms 指数缓出,数值插值而非闪屏重绘;
- 实时流场景必须关闭:
animation: { enabled: false },数据点即划即走; - 悬浮反馈(准线 / 圆环 / tooltip)即时响应,不带动画。