1. 默认 ECharts 主题转 CSS 变量
前端开发工程师背景
团队正在重构数据大屏项目,需要将 ECharts 默认主题中的配色方案提取为全局 CSS 变量,以便在普通 HTML 元素中复用相同的颜色。
问题
手动复制 JSON 中的颜色数组并编写 CSS 变量非常繁琐,且容易出错。
如何使用
粘贴包含 color 数组和 textStyle 的 ECharts 主题 JSON,选择输出格式为“CSS 变量”,设置前缀为“chart”,开启“转换 命名/rgb → hex”选项,点击生成。
{
"color": ["#5470c6", "#91cc75", "#fac858"],
"backgroundColor": "rgb(255, 255, 255)",
"textStyle": { "fontSize": 12, "color": "#333333" }
}结果
自动生成了包含 --chart-color-1: #5470c6、--chart-background-color: #ffffff 等变量的 :root 样式块,并直接用于项目全局样式。