怎样自定义echarts主题

在 Apache ECharts 中，自定义主题（Theme）通常有三种常见方式：

一、使用 echarts.init(dom, themeName) + 注册主题

1️⃣ 定义主题对象

主题本质上是一个 JSON 配置对象，示例如下：

const myTheme = {
  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
  backgroundColor: '#f5f5f5',
  title: {
    textStyle: {
      color: '#333'
    }
  },
  legend: {
    textStyle: {
      color: '#666'
    }
  },
  tooltip: {
    backgroundColor: '#fff',
    borderColor: '#ccc'
  }
};

2️⃣ 注册主题

echarts.registerTheme('myTheme', myTheme);

3️⃣ 使用主题

const chart = echarts.init(
  document.getElementById('main'),
  'myTheme'
);

二、通过主题 JSON 文件（推荐大型项目）

1️⃣ 创建 theme.json

{
  "color": ["#5470c6", "#91cc75"],
  "backgroundColor": "#ffffff",
  "textStyle": {}
}

2️⃣ 引入并注册

fetch('theme.json')
  .then(res => res.json())
  .then(theme => {
    echarts.registerTheme('custom', theme);
    const chart = echarts.init(
      document.getElementById('main'),
      'custom'
    );
  });

三、使用 ECharts 官方主题编辑器（最简单）

✅ 官方地址：
https://echarts.apache.org/zh/theme-builder.html

操作步骤：

1. 在线调整颜色、字体、背景
2. 导出 JS / JSON
3. 项目中引入并 registerTheme

四、常见可自定义项（重点）

五、注意事项

• 主题 只影响初始化时
• 修改主题需重新 init
• 可结合 setOption(option, true) 强制覆盖

如果你有 具体场景（如：暗黑主题、企业蓝、移动端），我可以直接帮你写一套完整主题配置。