echarts 不支持直接使用 css 变量，需通过 getcomputedstyle 手动读取并注入配置；主题切换须手动重绘，且需注意兼容性与 ssr 限制。
直接结论：ECharts 本身不读取 CSS 变量，必须手动将 CSS 变量值提取后注入 setOption 配置项中；否则主题不会同步，改了 :root 里的 --primary-color，图表颜色纹丝不动。
为什么不能直接在 ECharts 配置里写 var(--primary-color)
ECharts 的 color、textStyle.color、itemStyle.color 等字段只接受 CSS 颜色字符串（如 '#1890ff'、'rgb(24,144,255)'），不支持 CSS 变量语法。浏览器渲染引擎不会在 JS 对象里解析 var(--x)，它只是普通字符串，ECharts 会原样传给 Canvas/SVG 渲染层，最终报错或降级为默认色。
常见错误现象：
- 配置中写
color: 'var(--primary-color)'→ 图表系列全黑或无色 - 用
getComputedStyle(document.documentElement).getPropertyValue('--primary-color')但没 trim() → 值带空格或换行，解析失败 - 在
init后立即读取变量，但 CSS 文件还没加载完 → 返回空字符串
如何安全读取并注入 CSS 变量到 ECharts 配置
关键在于「时机」和「容错」：确保 CSS 已就绪，且对读取结果做标准化处理。
- 用
window.getComputedStyle读取，目标是document.documentElement（即:root） - 对返回值调用
.trim()，消除可能的空格或分号残留 - 建议封装成函数，避免重复逻辑：
function getCssVar(name) { const val = getComputedStyle(document.documentElement).getPropertyValue(name).trim(); return val || '#ccc'; // fallback} - 在
setOption前调用，例如：myChart.setOption({ color: [getCssVar('--primary-color'), getCssVar('--secondary-color')], textStyle: { color: getCssVar('--text-color') }, series: [{ itemStyle: { color: getCssVar('--fill-color') } }] });
动态响应 CSS 变量变化（比如主题切换）
ECharts 不监听 CSS 变量变更，所以改了 :root 后必须手动触发重绘。
- 监听
storage或自定义事件（如'theme-change'）比监听 CSS 更可靠 - 不要用
MutationObserver监听<style></style>标签 —— 开销大且无法捕获外部 CSS 注入 - 推荐做法：主题切换时，重新调用
setOption，复用同一份配置对象，只替换颜色相关字段 - 注意性能：避免高频触发（如 resize 时反复读取），加防抖或节流
容易被忽略的兼容性与边界点
CSS 变量不是万能胶，几个硬限制得提前踩坑：
-
echarts.init的theme参数和 CSS 变量无关，它是独立的主题注册机制，二者不互通 - 渐变色（
linearGradient）无法用 CSS 变量替代，必须手动拼接{ x: 0, y: 0, x2: 1, y2: 1, colorStops: [...] } - 移动端 WebView（尤其旧版 Android）对
getComputedStyle(...).getPropertyValue支持不稳定，建议加 try/catch 并设默认色 - SSR 场景下，
document不存在，该方案完全失效，需服务端预计算主题值并注入 window.__THEME__
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
