项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

主题配色 ​

图表默认跟随宿主主题:渲染时从 --ev-* 令牌取色,换主色、切暗色、换肤都自动重绘。需要锁死视觉时用内置色系——options.palette 填一个色系 id,整图系列色立即固定:之后宿主改样式变量、换主色都不再影响这张图;明暗两套色值由色系自带,随暗色模式换挡。

一键试色 ​

点按钮即切色系,「跟随主题」恢复默认的令牌取色。五个系列正好看到色系前五槽的搭配。

当前跟随主题:系列色实时读取令牌,随宿主换肤与暗色自动变化。

选中色系后这张图的配色就固定了——去主题接入里换主色试试,选了色系的图不会跟着变。

色系总览 ​

七套色系按叙事场景选:科技产品选极光,消费营销选落日,人文报告选莫兰迪,健康环保选林间,金融年报选墨蓝,活动大屏选糖果。

经典 · classic当前缺省色板的固化版,品牌蓝锚定;想保住默认观感不随换肤时用
极光 · aurora科技 SaaS / 数据产品——冷调现代,蓝绿紫主打的仪表盘观感
落日 · sunset消费零售 / 生活方式 / 营销复盘——暖橙珊瑚主导,热情有温度
莫兰迪 · morandi人文 / 咨询报告 / 印刷排版——低饱和灰调,长文配图不抢字
林间 · forest健康 / 环保 / 农业供应链——自然绿主导,ESG 与可持续叙事
墨蓝 · ink金融 / 政企 / 严肃年报——克制深稳,深蓝为骨、暖色点缀
糖果 · candy营销活动 / 年轻品牌 / 大屏展示——高饱和明快,视觉抓人

优先级与固定边界 ​

  • 取色优先级:theme.colors(手工数组,最高)> palette(内置色系,固定)> 令牌跟随(默认);
  • palette 固定的是数据系列色:网格线、轴文字、标题等结构色仍随宿主明暗,保证任何背景下可读;个别元素要钉死可用 theme 显式覆写;
  • 每套色系自带浅 / 暗两组(暗色同色相提亮),换挡由图表内部完成,不依赖宿主变量;
  • 用 AI 生成时,需求里写明「固定配色 / 不随主题变化」即会带上色系选项。

API ​

主题配色

参数说明类型默认值
palette内置色系 id,整图固定该色系的系列色(classic / aurora / sunset / morandi / forest / ink / candy);生效后不再读取 --ev-color-* 令牌,与 theme.colors 同设时以 theme.colors 为准string—
CHART_PALETTES色系注册表:[{ id, name, scene, light[8], dark[8] }],宿主可据此生成换色菜单Palette[]—
resolveChartPalette按 id 与明暗态取 8 槽色值:resolveChartPalette(id, isDark),未知 id 返回 null(id, isDark) => string[] | null—

相关 ​