Skip to content

粗野主义图表设计范式

BrutxUI 的图表能力采用「令牌映射 + 文档范式」交付:库内不引入 echarts 依赖、不封装图表组件,而是提供与设计令牌单一信源一致的 ECharts 主题 JSON 与本页视觉法则。消费方自行安装 echarts 后注册主题即可获得粗野主义观感。

色彩映射(零新增令牌)

图表序列直接复用现有语义色五族,主题预设与暗色切换自动生效:

序列语义令牌默认预设值
Series 1--brutal-primary#FF6B6B
Series 2--brutal-secondary#4ECDC4
Series 3--brutal-accent#FFE66D
Series 4--brutal-status-success#22c55e
Series 5--brutal-info#4A90D9

视觉三法则

法则一:网格背景

网格线为纯黑粗实线或高对比点阵,禁止柔和灰网格。坐标轴线宽 3px

法则二:Tooltip 实体卡片

悬浮卡片必须是不透明底 + 3px 硬边框 + 硬投影(box-shadow: 4px 4px 0 0 var(--brutal-border-color)),禁止模糊阴影与圆角。

法则三:柱体强边框与同心圆数据点

柱体带 2px 黑边框、零圆角;折线数据关键点使用黑白实心同心圆(外黑内彩),取消柔和渐变与模糊。

反模式

❌ 禁止原因
渐变填充柱体 / 面积图柔和透明渐变违背硬朗实体语言
模糊投影(shadowBlur破坏硬阴影体系
圆角柱体(borderRadius > 0粗野主义几何为零圆角
引入语义色之外的随机配色破坏 R6 单一信源

ECharts 主题接入

主题 JSON 由构建期脚本从 design-tokens.ts 派生生成(单一信源校验通过),下载后一行注册:

ts
import * as echarts from 'echarts'
// 从 https://<docs-domain>/echarts/brutxui-theme.json 获取主题文件
import brutxuiTheme from './brutxui-theme.json'

echarts.registerTheme('brutxui', brutxuiTheme)
const chart = echarts.init(el, 'brutxui')

主题 JSON 再生成

调整语义色后重新生成主题 JSON 并保持单一信源一致:

bash
pnpm --filter brutx-ui-vue generate:echarts-theme
# 校验磁盘产物与 design-tokens 派生结果一致:
pnpm --filter brutx-ui-vue exec tsx scripts/generate-echarts-theme.ts --check

蛮力铸就。