---
url: /guide/design.md
---
# 设计规范

EvChart 的默认视觉遵循一套克制的规范：结构元素（网格、轴、图例）退到背景，墨水留给数据。理解这套规范，能更容易配置出干净专业的图表。

## 设计原则

1. **数据墨水比优先**——网格与轴退到视觉背景，颜色和粗细留给数据本身；
2. **克制**——一张图只保留一个视觉焦点，默认无数据点、无装饰性阴影；
3. **一致性**——同层级元素字号字色完全一致，系列色成套取用；
4. **可读性优先**——任何装饰不得降低数据与背景的对比度。

## 色彩

### 系列色板

数据系列按以下顺序取色（与状态语义色解耦的专用色板），品牌蓝打头：

| # | 令牌 | 浅色 | 暗色 |
| --- | --- | --- | --- |
| 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 向每档 ≥ 24px，x 向可 `interval` 控制。

## 留白

| 边 | 默认 |
| --- | --- |
| top | 18（标题/顶部图例另加） |
| right | 24 |
| bottom | 46（隐藏 x 轴 → 12；底部图例/dataZoom 另加） |
| left | 按 y 刻度标签宽度自适应（40–140） |

`options.padding` 可覆写任意边；长条监控带推荐 `{ top: 6, right: 8, bottom: 6 }`（left 交 y 刻度标签自适应）。

## 文字排版

| 元素 | 字号 / 字重 | 颜色 |
| --- | --- | --- |
| 标题 | 13px / 600，左对齐 | 主文字色 |
| 副标题 | 11px / 400 | 次要色 |
| 图例 / 轴标签 | 12px / 400 | 次要色 |
| tooltip 数值 | 13px / 600 | 主文字色 |

## 动效

* 默认补间 1200ms 五次缓出（easeOut），数值插值而非闪屏重绘；
* **实时流场景必须关闭**：`animation: { enabled: false }`，数据点即划即走；
* 悬浮反馈（准线 / 圆环 / tooltip）即时响应，不带动画。

## 相关

* 令牌契约与暗色约定：[主题接入](/guide/theme)
* 组件库内嵌说明：[内嵌于组件库](/guide/integration)