颜色主题配置

颜色主题配置

ECharts 提供了灵活的颜色主题配置机制，可以通过预定义主题或自定义主题来统一控制图表的视觉风格。颜色主题不仅影响系列颜色，还包括背景色、文字色、网格线颜色等全局样式。

内置主题

ECharts 内置了多种主题，直接通过名称即可使用：

// 使用内置的'dark'主题
var chart = echarts.init(dom, 'dark');

常用内置主题包括：

• light：浅色默认主题
• dark：深色主题
• vintage：复古风格
• macarons：马卡龙配色
• infographic：信息图风格

自定义主题

通过主题注册器创建

1. 访问 ECharts 主题构建工具
2. 可视化调整各组件颜色
3. 下载生成的主题 JSON 文件
4. 在项目中注册主题：

// 注册主题
echarts.registerTheme('myTheme', {
  color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'],
  backgroundColor: '#f5f5f5',
  textStyle: {
    fontFamily: 'Arial'
  }
});

// 使用自定义主题
var chart = echarts.init(dom, 'myTheme');

手动定义主题对象

完整主题配置示例：

var myTheme = {
  // 调色盘
  color: [
    '#dd6b66','#759aa0','#e69d87','#8dc1a9',
    '#ea7e53','#eedd78','#73a373','#73b9bc',
    '#7289ab','#91ca8c','#f49f42'
  ],
  
  // 背景色
  backgroundColor: '#fff',
  
  // 全局文本样式
  textStyle: {
    color: '#333',
    fontFamily: 'PingFang SC, Microsoft YaHei'
  },
  
  // 标题样式
  title: {
    textStyle: {
      color: '#666',
      fontSize: 18
    },
    subtextStyle: {
      color: '#999'
    }
  },
  
  // 图例样式
  legend: {
    textStyle: {
      color: '#666'
    }
  },
  
  // 工具箱样式
  toolbox: {
    iconStyle: {
      borderColor: '#999'
    }
  },
  
  // 提示框样式
  tooltip: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    textStyle: {
      color: '#fff'
    }
  },
  
  // 坐标轴样式
  axis: {
    axisLine: {
      lineStyle: {
        color: '#ccc'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#666'
      }
    },
    splitLine: {
      lineStyle: {
        color: ['#eee']
      }
    }
  }
};

动态切换主题

实现运行时主题切换的完整方案：

// 存储当前主题
var currentTheme = 'light';

// 主题切换函数
function changeTheme(themeName) {
  currentTheme = themeName;
  chart.dispose(); // 销毁旧实例
  chart = echarts.init(document.getElementById('main'), themeName);
  chart.setOption(option); // 重新应用配置
}

// 响应按钮点击
document.getElementById('themeBtn').addEventListener('click', function() {
  changeTheme(currentTheme === 'light' ? 'dark' : 'light');
});

高级颜色配置

渐变颜色

series: [{
  type: 'bar',
  itemStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#83bff6' },
      { offset: 0.5, color: '#188df0' },
      { offset: 1, color: '#188df0' }
    ])
  }
}]

按数据值着色

series: [{
  type: 'scatter',
  data: [
    { value: [10, 20], itemStyle: { color: '#ff0000' } },
    { value: [15, 25], itemStyle: { color: '#00ff00' } }
  ]
}]

调色盘扩展配置

option = {
  color: ['#c23531','#2f4554','#61a0a8'],
  series: [
    {
      type: 'pie',
      // 覆盖全局调色盘
      color: ['#dd6b66','#759aa0','#e69d87'],
      data: [...]
    }
  ]
}

主题继承与覆盖

ECharts 支持主题继承机制：

// 基础主题
var baseTheme = {
  color: ['#c23531','#2f4554'],
  textStyle: {
    fontFamily: 'Arial'
  }
};

// 扩展主题
var extendTheme = $.extend(true, {}, baseTheme, {
  color: ['#c23531','#2f4554','#61a0a8'], // 扩展调色盘
  backgroundColor: '#f0f0f0' // 新增背景色
});

echarts.registerTheme('extendTheme', extendTheme);

响应式颜色配置

根据屏幕尺寸动态调整颜色：

function getColorScheme() {
  return window.innerWidth < 768 
    ? ['#c23531','#2f4554'] // 移动端精简配色
    : ['#c23531','#2f4554','#61a0a8','#d48265']; // PC端完整配色
}

var option = {
  color: getColorScheme(),
  // 其他配置...
};

window.addEventListener('resize', function() {
  chart.setOption({
    color: getColorScheme()
  });
});

无障碍颜色配置

考虑色盲用户的可视化方案：

// 色盲友好调色盘
var colorBlindSafe = [
  '#377eb8', '#4daf4a', '#984ea3', 
  '#ff7f00', '#ffff33', '#a65628'
];

option = {
  color: colorBlindSafe,
  // 使用图案区分系列
  series: [{
    type: 'bar',
    itemStyle: {
      // 使用图案填充
      color: {
        image: 'path/to/pattern1.png',
        repeat: 'repeat'
      }
    }
  }]
};

主题导出与共享

将自定义主题导出为独立文件：

1. 创建 my-theme.js：

;(function(global) {
  global.myTheme = {
    color: ['#c23531','#2f4554'],
    // 完整主题配置...
  };
})(this);

2. 在HTML中引入：

<script src="my-theme.js"></script>
<script>
  echarts.registerTheme('mySharedTheme', myTheme);
</script>

性能优化建议

1. 避免频繁切换主题：

// 不推荐
function animateTheme() {
  setInterval(() => {
    chart.setOption({ color: [getRandomColor()] });
  }, 100);
}

// 推荐：批量更新
function updateTheme(colors) {
  chart.setOption({
    color: colors,
    series: [{
      itemStyle: { color: colors[0] }
    }]
  }, true); // 使用notMerge参数
}

2. 使用CSS变量集成：

:root {
  --echarts-color-1: #c23531;
  --echarts-color-2: #2f4554;
}

option = {
  color: [
    getComputedStyle(document.documentElement)
      .getPropertyValue('--echarts-color-1'),
    // 其他颜色...
  ]
}

多主题管理系统

企业级主题管理方案示例：

class ThemeManager {
  constructor() {
    this.themes = {
      'corporate': corporateTheme,
      'presentation': presentationTheme
    };
  }
  
  applyTheme(chart, themeName) {
    if (!this.themes[themeName]) return;
    
    // 保存当前配置
    const currentOption = chart.getOption();
    
    // 合并主题配置
    const newOption = deepMerge(
      this.themes[themeName],
      { series: currentOption.series }
    );
    
    chart.setOption(newOption, true);
  }
}

// 使用示例
const themeManager = new ThemeManager();
themeManager.applyTheme(myChart, 'corporate');