主题接入

图表的颜色在渲染时从宿主页面的 --ev-* 令牌取值(document.documentElement 上读取)。改这些令牌就是改图表主题,不需要给图表传任何颜色配置。

令牌清单

图表按槽位读取以下令牌,未定义的槽位逐槽回落到内置成套色板:

令牌组令牌用途
系列色--ev-color-series-1--ev-color-series-8数据系列专用色板(与状态语义色解耦;槽 1 未定义时回读 --ev-color-primary
表面--ev-bg-color--ev-bg-color-overlay--ev-app-card-border画布底、浮层底、边框
文字--ev-text-color-primary / -secondary / -danger标题、轴标签、图例文字
边线--ev-border-color / -light / -dark轴线、网格线
填充--ev-fill-color-light / -dark背景 band、悬停带
主色 RGB--ev-color-primary-rgb高亮、十字准线等需要透明度叠加的场景

宿主只需要定义用到的组;一个令牌都不定义时图表整体使用内置色板,开箱即可用。

暗色模式

暗色跟随约定:在 html.dark 选择器下重映射上述令牌。图表内部监听 <html>class 变化,暗色类挂上时自动取新值重绘,本站顶栏的暗色开关就是这个机制——切换后所有演示图即时跟随。

与 evoke-ui 同用时,其主题系统已带 html.dark 令牌重映射,图表自动跟随,无需额外代码。

运行时换肤

宿主在运行时改令牌(品牌换色、预设主题切换)后,图表在下一次绘制时取到新值。与 evoke-business-ui 同用时,其换肤流程会派发 ev-theme-change 事件,图表收到事件立即重绘,换肤过程无感跟随。

相关