颜色主题配置

颜色主题配置

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

内置主题

ECharts 内置了多种主题，直接引入即可使用：

// 引入主题文件
import * as echarts from 'echarts';
import 'echarts/theme/dark';  // 深色主题
import 'echarts/theme/macarons';  // 马卡龙主题

// 使用主题
const chart = echarts.init(document.getElementById('main'), 'dark');

常用内置主题包括：

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

自定义主题

通过 echarts.registerTheme 方法注册自定义主题：

// 定义主题对象
const myTheme = {
  color: ['#c12e34', '#e6b600', '#0098d9', '#2b821d'],
  backgroundColor: '#f5f5f5',
  textStyle: {
    color: '#333'
  },
  // 更多配置...
};

// 注册主题
echarts.registerTheme('myTheme', myTheme);

// 使用自定义主题
const chart = echarts.init(document.getElementById('main'), 'myTheme');

主题配置项详解

完整的主题配置包含以下核心部分：

颜色调色板

color: [
  '#c23531', '#2f4554', '#61a0a8', '#d48265', 
  '#91c7ae', '#749f83', '#ca8622', '#bda29a'
]

这是系列自动分配的颜色列表，当系列数量超过调色板长度时，会循环使用这些颜色。

背景色配置

backgroundColor: {
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.5,
  colorStops: [
    { offset: 0, color: 'rgba(0, 0, 0, 0.8)' },
    { offset: 1, color: 'rgba(0, 0, 0, 0.9)' }
  ]
}

支持纯色、线性渐变和径向渐变三种形式。

文本样式

textStyle: {
  color: '#333',
  fontStyle: 'normal',
  fontWeight: 'normal',
  fontFamily: 'sans-serif',
  fontSize: 12
}

轴线样式

axisLine: {
  lineStyle: {
    color: '#ccc',
    width: 1,
    type: 'solid'
  }
}

区域样式

areaStyle: {
  color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
}

动态切换主题

实现运行时主题切换的完整示例：

// 主题切换函数
function changeTheme(themeName) {
  // 销毁旧实例
  const container = document.getElementById('main');
  const oldChart = echarts.getInstanceByDom(container);
  if (oldChart) {
    oldChart.dispose();
  }
  
  // 使用新主题初始化
  const newChart = echarts.init(container, themeName);
  
  // 重新设置选项
  newChart.setOption({
    // 图表配置...
    series: [{
      type: 'pie',
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' }
      ]
    }]
  });
}

// 主题切换按钮事件
document.getElementById('theme-dark').addEventListener('click', () => {
  changeTheme('dark');
});

document.getElementById('theme-light').addEventListener('click', () => {
  changeTheme('light');
});

响应式颜色配置

结合媒体查询实现响应式颜色变化：

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

function updateChartTheme() {
  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const theme = isDarkMode ? 'dark' : 'light';
  
  // 重新初始化图表
  chart.dispose();
  chart = echarts.init(document.getElementById('main'), theme);
  chart.setOption(option);
}

// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addListener(updateChartTheme);

高级颜色映射

对于热力图等需要颜色映射的场景，可以配置视觉映射组件：

visualMap: {
  min: 0,
  max: 100,
  calculable: true,
  inRange: {
    color: ['#50a3ba', '#eac736', '#d94e5d']
  },
  textStyle: {
    color: '#fff'
  }
}

状态颜色配置

为元素的不同状态设置颜色：

series: [{
  type: 'bar',
  itemStyle: {
    color: '#4adbc8',
    // 鼠标悬停颜色
    emphasis: {
      color: '#23b7e5'
    },
    // 选中状态颜色
    selected: {
      color: '#3ba0ff'
    },
    // 淡出状态颜色
    blur: {
      color: 'rgba(74,219,200,0.2)'
    }
  },
  data: [12, 34, 56, 78, 90]
}]

多级样式继承

ECharts 的颜色配置支持多级继承关系：

option = {
  color: ['#c23531', '#2f4554'], // 一级颜色
  series: [{
    type: 'line',
    color: ['#61a0a8', '#d48265'], // 二级颜色（覆盖一级）
    data: [820, 932, 901, 934, 1290],
    lineStyle: {
      color: '#91c7ae', // 三级颜色
      width: 3
    }
  }]
}

调色板生成工具

使用第三方库动态生成调色板：

import { interpolateCubehelixLong } from 'd3-scale-chromatic';

function generatePalette(count) {
  const palette = [];
  for (let i = 0; i < count; i++) {
    const t = i / Math.max(1, count - 1);
    palette.push(interpolateCubehelixLong(t));
  }
  return palette;
}

const chart = echarts.init(document.getElementById('main'));
chart.setOption({
  color: generatePalette(8),
  series: [{
    type: 'pie',
    data: [
      { value: 335, name: 'A' },
      { value: 310, name: 'B' },
      // ...更多数据
    ]
  }]
});

无障碍颜色配置

考虑色盲用户的可访问性配置：

// 色盲友好调色板
const colorBlindSafe = [
  '#0173b2', '#de8f05', '#029e73', 
  '#d55e00', '#cc78bc', '#ca9161'
];

const option = {
  color: colorBlindSafe,
  series: [{
    type: 'bar',
    data: [12, 23, 45, 56, 78, 89],
    itemStyle: {
      // 添加图案区分
      color: {
        image: (params) => {
          const pattern = [
            'diamond', 'circle', 'rect',
            'triangle', 'star', 'pin'
          ][params.dataIndex % 6];
          return {
            image: `path://${pattern}`,
            color: colorBlindSafe[params.dataIndex % 6]
          };
        }
      }
    }
  }]
};