Color theme configuration

Color Theme Configuration

ECharts provides a flexible color theme configuration mechanism, allowing unified control of chart visual styles through predefined themes or custom themes. Color themes affect not only series colors but also global styles such as background color, text color, and gridline color.

Built-in Themes

ECharts comes with multiple built-in themes that can be used directly by name:

// Use the built-in 'dark' theme
var chart = echarts.init(dom, 'dark');

Common built-in themes include:

• light: Default light theme
• dark: Dark theme
• vintage: Vintage style
• macarons: Macaron color scheme
• infographic: Infographic style

Custom Themes

Creating via Theme Builder

1. Visit the ECharts Theme Builder
2. Visually adjust component colors
3. Download the generated theme JSON file
4. Register the theme in your project:

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

// Use the custom theme
var chart = echarts.init(dom, 'myTheme');

Manually Defining Theme Objects

Complete theme configuration example:

var myTheme = {
  // Color palette
  color: [
    '#dd6b66','#759aa0','#e69d87','#8dc1a9',
    '#ea7e53','#eedd78','#73a373','#73b9bc',
    '#7289ab','#91ca8c','#f49f42'
  ],
  
  // Background color
  backgroundColor: '#fff',
  
  // Global text style
  textStyle: {
    color: '#333',
    fontFamily: 'PingFang SC, Microsoft YaHei'
  },
  
  // Title style
  title: {
    textStyle: {
      color: '#666',
      fontSize: 18
    },
    subtextStyle: {
      color: '#999'
    }
  },
  
  // Legend style
  legend: {
    textStyle: {
      color: '#666'
    }
  },
  
  // Toolbox style
  toolbox: {
    iconStyle: {
      borderColor: '#999'
    }
  },
  
  // Tooltip style
  tooltip: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    textStyle: {
      color: '#fff'
    }
  },
  
  // Axis style
  axis: {
    axisLine: {
      lineStyle: {
        color: '#ccc'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#666'
      }
    },
    splitLine: {
      lineStyle: {
        color: ['#eee']
      }
    }
  }
};

Dynamic Theme Switching

Complete solution for runtime theme switching:

// Store the current theme
var currentTheme = 'light';

// Theme switching function
function changeTheme(themeName) {
  currentTheme = themeName;
  chart.dispose(); // Destroy the old instance
  chart = echarts.init(document.getElementById('main'), themeName);
  chart.setOption(option); // Reapply the configuration
}

// Respond to button clicks
document.getElementById('themeBtn').addEventListener('click', function() {
  changeTheme(currentTheme === 'light' ? 'dark' : 'light');
});

Advanced Color Configuration

Gradient Colors

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' }
    ])
  }
}]

Coloring by Data Value

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

Extended Color Palette Configuration

option = {
  color: ['#c23531','#2f4554','#61a0a8'],
  series: [
    {
      type: 'pie',
      // Override the global color palette
      color: ['#dd6b66','#759aa0','#e69d87'],
      data: [...]
    }
  ]
}

Theme Inheritance and Overrides

ECharts supports theme inheritance:

// Base theme
var baseTheme = {
  color: ['#c23531','#2f4554'],
  textStyle: {
    fontFamily: 'Arial'
  }
};

// Extended theme
var extendTheme = $.extend(true, {}, baseTheme, {
  color: ['#c23531','#2f4554','#61a0a8'], // Extend the color palette
  backgroundColor: '#f0f0f0' // Add background color
});

echarts.registerTheme('extendTheme', extendTheme);

Responsive Color Configuration

Dynamically adjust colors based on screen size:

function getColorScheme() {
  return window.innerWidth < 768 
    ? ['#c23531','#2f4554'] // Simplified color scheme for mobile
    : ['#c23531','#2f4554','#61a0a8','#d48265']; // Full color scheme for PC
}

var option = {
  color: getColorScheme(),
  // Other configurations...
};

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

Accessible Color Configuration

Color schemes for color-blind users:

// Color-blind-friendly palette
var colorBlindSafe = [
  '#377eb8', '#4daf4a', '#984ea3', 
  '#ff7f00', '#ffff33', '#a65628'
];

option = {
  color: colorBlindSafe,
  // Use patterns to distinguish series
  series: [{
    type: 'bar',
    itemStyle: {
      // Use pattern fill
      color: {
        image: 'path/to/pattern1.png',
        repeat: 'repeat'
      }
    }
  }]
};

Theme Export and Sharing

Export custom themes as standalone files:

1. Create my-theme.js:

;(function(global) {
  global.myTheme = {
    color: ['#c23531','#2f4554'],
    // Complete theme configuration...
  };
})(this);

2. Include in HTML:

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

Performance Optimization Tips

1. Avoid frequent theme switching:

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

// Recommended: Batch updates
function updateTheme(colors) {
  chart.setOption({
    color: colors,
    series: [{
      itemStyle: { color: colors[0] }
    }]
  }, true); // Use notMerge parameter
}

2. Integrate with CSS variables:

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

option = {
  color: [
    getComputedStyle(document.documentElement)
      .getPropertyValue('--echarts-color-1'),
    // Other colors...
  ]
}

Multi-Theme Management System

Enterprise-level theme management example:

class ThemeManager {
  constructor() {
    this.themes = {
      'corporate': corporateTheme,
      'presentation': presentationTheme
    };
  }
  
  applyTheme(chart, themeName) {
    if (!this.themes[themeName]) return;
    
    // Save current configuration
    const currentOption = chart.getOption();
    
    // Merge theme configuration
    const newOption = deepMerge(
      this.themes[themeName],
      { series: currentOption.series }
    );
    
    chart.setOption(newOption, true);
  }
}

// Usage example
const themeManager = new ThemeManager();
themeManager.applyTheme(myChart, 'corporate');