joey5628/smart-fin-chart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
feat-1.1.0
smart-fin-chart/docs/视觉与图表风格规范.md
T
R524809 a15b3f8027 feat: 修改主题
2026-09-18 19:03:32 +08:00

12 KiB
Raw Permalink Blame History

Smart Fin Chart 视觉与图表风格规范

用途：把本项目的页面和图表复刻成同一种视觉语言，或把本规范直接交给其他 AI 生成新页面、图表或 ECharts 配置。

本文以现有实现为准：css/style.css、js/theme.js 与各图表配置。它不替代数据口径或交互需求。

1. 风格定位

正式主题名：轻快消费（Light Consumer Finance）。它建立在“Joey 风格”的克制财经媒体底子上：

  • 页面：暖灰白底、白色内容卡、深棕作为品牌锚点，安静、清爽、有纸张感；
  • 图表：低饱和莫兰迪基础色，叠加清晰但不荧光的青绿、蓝、琥珀、珊瑚与紫；
  • 气质：专业、可亲近、信息密度高但不冰冷。更像编辑过的消费公司研究报告，而不是交易终端、科技 SaaS 或奢侈品画册；
  • 色彩策略：页面保持中性，数据才使用颜色；一张图只设置一个视觉主角。

不要把它误做成两种极端：不是厚重老钱/深棕复古风，也不是高饱和糖果色的消费品牌海报。

2. 设计令牌（直接复用）

页面基础色

角色 色值 用法
页面背景 #F5F4F1 大面积暖灰白，不用纯白铺满全页
内容表面 #FFFFFF 图表卡片、弹窗、选中态
主文字 #333333 标题、正文、坐标轴重点文字
次级文字 #8C8C8C 副标题、数据来源、脚注、弱提示
分隔/网格 #E8E8E8 卡片分割线、图表横向网格
坐标轴线 #D0D0D0 仅分类横轴等必要位置
品牌强调/交互 #6B4A2B 选中 Tab、主要按钮、hover 文字
品牌浅底 #F0E9E1 选中 Tab、筛选 chip、浅强调块

通用莫兰迪扩展色

用于非固定财务语义的分类图、桑基图或适量的次级系列。它们是备用色，不是要求一张图全用完。

色名 色值 视觉感觉
棕 #6B4A2B 温暖、稳定、品牌锚点
沙 #D5C7B4 最弱的暖中性色
珊瑚 #EC7B73 柔和警示或重点
绿 #2F8A5B 稳健正向
橙 #D98324 温暖重点
紫 #9B4FA8 指标/同比强调
蓝 #3B6EA5 常规数据类别
海军蓝 #1F4E79 深层级、强对比类别
红 #B8342A 显著负向/风险，慎用
鼠尾草绿 #8AAB7E 柔和的正向或过渡类别

3. 图表语义色（优先级高于通用色）

同一业务语义跨图必须保持一致；不要在单张图内重写近似颜色。

财务与经营指标

语义 色值 推荐图形角色
经营现金流/正向贡献 #36A28F 柱、瀑布正向项
投资现金流/基准值/现金 #4D83D1 柱、瀑布起点和终点
筹资现金流/负债 #EEA64F 柱
现金净增加/关键压力项/负向贡献 #D95567 高辨识度折线、瀑布负向项
核心/净利润 #F08B5A 主柱
同比、转化率等唯一强调指标 #8256B2 主折线

**瀑布图固定规则：**总计/基准 #4D83D1，正向 #36A28F，负向 #D95567。透明占位柱不着色。

渠道业务

语义 色值 推荐图形角色
零售店 #3F7FBE 堆叠柱、区域/渠道分类
线上 #E36D63 堆叠柱、渠道分类
机器人商店 #71AD81 堆叠柱、渠道分类
批发 #E4A349 堆叠柱、渠道分类
营收增速 #8256B2 柱线组合中的唯一折线

多类别 IP/占比图（10+ 类）

按色相顺序使用，残差项始终为中性灰：

#D64545 → #E8913C → #D9C043 → #7FA83C → #3E9E6E → #3FB6D0 → #2E5FA8 → #8E86E0 → #8A3FA8 → #D081C4 → #8C8C8C

规则：红—橙—金—橄榄—翡翠—青—蓝—紫的连续色相谱；冷色相邻时交替深浅；“其他”“外采”“未单列”等残差类别固定用灰。该谱只用于高类别数的占比/构成图，不应用于普通两三系列柱线图。

4. 页面样式语言

布局和容器

  • 外层是暖灰白画布，内容居中，桌面端采用“窄侧栏 + 主内容 + 窄目录”的研究报告式三栏；
  • 白色图表卡片圆角 10px，仅有极浅阴影 0 1px 3px rgba(0,0,0,.06)，不使用厚重浮层；
  • 卡片之间留出约 28px 空白。卡片顶部工具栏高度约 52px，下方用 #E8E8E8 细线分隔；
  • 侧栏和 Tab 容器为半透明白（约 58%–60%），一像素浅边框、9–10px 圆角；移动端转为贴顶的半透明暖灰条，并带轻微 backdrop blur；
  • 主操作按钮为深棕底白字；次操作为白底浅灰边框，hover 时变深棕字/边。选中态使用深棕字加 #F0E9E1 浅底，不要大面积实色块。

字体与文字层级

  • 字体：PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif；
  • 页面卡片标题：14px / 600；侧栏标题：12px / 600；来源文件：11px 等宽字体；
  • 图表主标题：居中、19px / bold、#333333；副标题：13px、#8C8C8C、line-height: 20px；
  • 图例：14px、#333333；坐标轴文字：重点分类 14px，数值刻度 13px；数据标签通常 11–13px；脚注 12px、灰色；
  • 文案不使用全大写、超粗黑体或夸张字号。层级靠字重、灰度、间距建立，不靠多种彩色文字。

5. 所有图表共享的画法

留白、坐标轴与网格

  • 图表白底；标题顶边距约 18px，图例在约 85px，绘图区从约 145px 开始，形成稳定的“标题 → 副标题 → 图例 → 数据”节奏；
  • 数值轴隐藏轴线和刻度，仅保留 #E8E8E8、1px 的浅色横向网格；分类横轴可保留 #D0D0D0 细轴线，但不显示刻度；
  • 不做渐变背景、斑马条纹（矩阵/热力图除外）、3D、强阴影或粗黑边框；
  • 图表不依赖 hover 才展示关键数据：数据标签默认可见；密集处通过上下错位、外置、白色描边和避让解决。

图例、标签与 tooltip

  • 图例优先置于副标题和绘图区之间，横排居中，项目间距约 28px；让图表库按类型生成图例图标：柱=矩形，线=短线+空心圆；
  • 折线：不平滑（直线），线宽通常 3px；白心圆点，直径 9px，彩色描边 2.5px；标签同线色，必要时加 3px 白描边；
  • 柱：无渐变、无厚边框、圆角克制或不加；主图中柱宽按密度保持适中；柱顶 11px 深灰数值标签。很矮的柱也尽量显示标签；
  • 堆叠占比：足够宽的段内白字/深字；过窄段把标签置于右侧，文字变深灰并加白描边；
  • tooltip 使用系统默认浅底即可，字体遵循中文无衬线；指示器用 shadow/cross，不渲染为夸张的彩色悬浮卡；
  • 每张图底部保留灰色脚注，解释口径与来源。背景可铺低干扰水印：深暖灰 rgba(120,100,80,.10)、20px bold、约 20° 斜向、300×200px 网格重复。

6. 关键图表配方

图形 推荐结构 色彩与样式规则
现金流/利润 + 同比 多柱 + 单条双轴折线 柱用固定财务色；只保留一条紫色或珊瑚色重点折线；折线置顶，白心圆点、3px 线、显示标签
渠道收入结构 + 增速 堆叠柱 + 单条折线 渠道色按零售蓝、线上珊瑚、机器人绿、批发琥珀固定；增速只用紫线；不要再引入第二条抢眼折线
瀑布图/同比拆解 蓝色起终点 + 绿/红贡献柱 正负值同时显示 +/- 标签；透明占位列；分类横轴可斜 32°，其余保持克制
多条经营比率线 4 条以内为宜 选深青、芥黄、茄紫、玫红等明度与色相均有区分的低饱和色；靠实/虚线、线宽、标签上下位置进一步区分
IP 占比饼图 非环图 + 两侧外标签 + 右侧纵向图例 扇区之间 2px 白边；名称按扇区同色，数值灰色；右侧图例使用“名称 + 次行数值/占比”；hover 阴影轻微
100% 堆叠/区域份额 归一化堆叠柱 颜色固定映射业务类别，不能随年份换色；小段标签外置并避让；不要因标签多删去数据
热力图 低增长蓝 → 暖白 → 高增长珊瑚 色阶为 #9CC4D0 → #F3EEE6 → #EC7B73；格中深灰数值；水平色尺说明高低；缺失值留白
桑基图 低饱和节点 + 平滑渐变流向 节点取主题分类色，连线取源到目标的渐变；文字深灰、重点节点可用珊瑚/绿色，避免彩虹化

7. 配色决策规则

  1. 先判断语义：财务、渠道、瀑布先使用固定语义色；只有无固定业务含义的分类才从扩展色选。
  2. 一图只有一个主角：柱负责区分类别，折线只留一个高辨识度强调色。避免红、橙、紫同时作为抢眼元素。
  3. 颜色不是唯一编码：折线还用线宽、实虚线、白心圆点、标签优先级区分；不要仅依赖色差。
  4. 2–4 个系列人工挑色即可；5–9 个系列保证相邻/同图的色相与明度明显不同；10+ 类使用预设色相谱。不要为全页所有图强制颜色互不重复。
  5. “其他、未披露、残差、外采”优先灰色/沙色；负向或风险优先珊瑚红，普通分类不要随意占用红色。

8. 可直接交给 AI 的提示词

将方括号内容替换成具体业务。若目标 AI 能生成代码，也可要求它输出 CSS 变量和 ECharts/图表库配置。

请设计一个中文消费公司财报数据页面，视觉风格为“轻快消费（Light Consumer Finance）”：
以克制财经媒体/编辑研究报告为底子，而非交易终端或科技 SaaS。页面用暖灰白 #F5F4F1 背景、白色 #FFFFFF 图表卡片、10px 圆角、极浅阴影；主文字 #333333，辅助文字 #8C8C8C，细分隔和网格 #E8E8E8。品牌和选中态只使用深棕 #6B4A2B，浅强调底 #F0E9E1。

中文字体使用 PingFang SC / Hiragino Sans GB / Microsoft YaHei。图表标题居中、19px bold；副标题 13px 灰；图例 14px；数值轴浅灰横网格、弱化轴线和刻度。保留充足留白，画面安静、专业、可亲近。

为 [图表主题] 生成 [图表类型]。关键数据默认显示，不依赖 hover：柱顶显示深灰数字；折线是直线、3px、9px 白心彩边圆点，并显示同色标签（必要时白色描边）。图例放在副标题和绘图区之间，柱图例为矩形、线图例为短线加空心圆。

按固定业务语义配色：[在此选择财务色或渠道色]。一张图只保留一个视觉主角；柱承载分类，最多一条高辨识度折线。禁止霓虹色、渐变填充、3D 图表、粗黑边框、厚阴影、深色背景、过多鲜艳色和无意义装饰。

卡片底部添加简短灰色脚注说明数据口径和来源；可选地铺很淡的 20° 斜向暖灰水印，但绝不影响读数。

财务色替换段

财务语义固定为：经营现金流/正向贡献 #36A28F，投资现金流/基准/现金 #4D83D1，筹资现金流/负债 #EEA64F，现金净增加/关键压力/负向贡献 #D95567，净利润 #F08B5A，同比或转化率的唯一强调折线 #8256B2。瀑布图总计蓝、正向青绿、负向珊瑚红。

渠道色替换段

渠道语义固定为：零售店 #3F7FBE，线上 #E36D63，机器人商店 #71AD81，批发 #E4A349；若有营收增速，仅用一条 #8256B2 紫色折线。跨年度或跨图保持同一渠道不换色。

9. 实施检查清单

  • 页面背景不是纯白，卡片是白色且阴影很淡。
  • 主文字/次文字/网格分别使用深灰、灰色、浅灰，品牌深棕没有滥用。
  • 图表使用业务语义色，且同一语义跨图一致。
  • 一张图没有多个同时抢眼的红橙紫强调系列。
  • 折线为直线、白心圆点；柱和折线的图例图标能区分。
  • 网格以浅色横线为主，轴线、边框和阴影都很轻。
  • 标签、图例、脚注不重叠；很小的堆叠段有可读的外置标签。
  • 视觉表达是“轻快、克制的消费公司研究报告”，不是金融终端或营销海报。

10. 来源与维护

  • 页面令牌：css/style.css
  • 通用色板、字体、坐标轴、图例、系列样式、水印：js/theme.js
  • 正式方向与使用规则：CLAUDE.md 的“配色”部分、docs/交接说明_2026-08-28.md
  • 关键图表示例：js/charts/ppmt_cashflow_composition.js、ppmt_core_profit.js、ppmt_bridge.js、ppmt_ip_share.js、ppmt_region_channel_yoy_timeseries.js

如果修改正式色板，应同步更新 js/theme.js 与本文，并以语义映射的稳定性优先于单张图的局部好看。

Reference in New Issue View Git Blame Copy Permalink