Theme customization and usage

ECharts, as a powerful data visualization library, offers extensive theme customization capabilities, allowing users to quickly adapt to different visual requirements through preset themes or custom themes. From built-in theme switching and online tool generation to JSON file configuration, theme functionality runs through the entire chart lifecycle, significantly improving development efficiency and visual consistency.

How to Use Built-in Themes

ECharts provides two default base themes, light and dark, which can be switched with simple configurations. In practice, themes can be specified directly during initialization:

// Initialize the chart with the dark theme
const chart = echarts.init(document.getElementById('chart'), 'dark');

For already initialized chart instances, themes can be dynamically switched using the setOption method:

// Switch themes at runtime
chart.setOption({
  theme: 'light'
});

Built-in theme style parameters include but are not limited to:

• Background color (backgroundColor)
• Text color (textStyle.color)
• Color palette (color)
• Grid line style (grid.lineStyle)
• Area fill color (areaStyle)

Custom Theme Development Process

Generating Themes via the Theme Editor

The official ECharts online theme editor allows for visual theme customization. The typical workflow includes:

1. Adjusting the base color scheme
2. Configuring series marker styles
3. Setting legend/axis styles
4. Exporting the JSON theme file

Manually Writing Theme JSON

A complete theme file contains multiple configuration sections. The following example defines a corporate-style theme named 'corporate':

{
  "themeName": "corporate",
  "color": ["#1e88e5", "#ff5252", "#43a047", "#fb8c00", "#6d4c41"],
  "backgroundColor": "#f5f7fa",
  "textStyle": {
    "fontFamily": "Arial, sans-serif",
    "color": "#333"
  },
  "title": {
    "textStyle": {
      "fontWeight": "bold",
      "fontSize": 18
    }
  },
  "legend": {
    "textStyle": {
      "color": "#666"
    }
  }
}

Registering and Using Custom Themes

After loading the theme JSON in a project, it must be explicitly registered:

// Register the theme
echarts.registerTheme('corporate', corporateTheme);

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

Advanced Theme Configuration Techniques

Responsive Theme Adaptation

Implement dynamic theme switching with CSS media queries:

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
function handleColorSchemeChange(e) {
  chart.setOption({
    theme: e.matches ? 'dark' : 'corporate'
  });
}
darkModeMediaQuery.addListener(handleColorSchemeChange);

Component-Level Style Overrides

Enhance specific components on top of the theme:

option = {
  series: [{
    type: 'bar',
    itemStyle: {
      // Override the theme's default color
      color: new echarts.graphic.LinearGradient(/*...*/)
    }
  }]
}

Dynamic Theme Variables

Modify themes at runtime using ECMAScript template strings:

function generateTheme(primaryColor) {
  return {
    color: [
      primaryColor,
      `${primaryColor}80`,
      `${primaryColor}40`
    ]
  };
}

Enterprise-Level Theme Management Solutions

Theme Version Control

Recommended theme directory structure:

themes/
├── v1/
│   ├── light.json
│   ├── dark.json
│   └── corporate.json
├── v2/
│   ├── modern-light.json
│   └── modern-dark.json
└── current -> v2/

Theme Compilation Optimization

Use build tools for automatic theme preprocessing:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.echartstheme$/,
        use: ['json-loader', 'theme-optimizer-loader']
      }
    ]
  }
}

Theme Unit Testing

Example test cases to validate theme effectiveness:

describe('Corporate Theme', () => {
  it('should have 5 base colors', () => {
    expect(theme.color).toHaveLength(5);
  });
  
  it('should pass contrast ratio check', () => {
    expect(getContrastRatio(theme.backgroundColor, theme.textStyle.color))
      .toBeGreaterThan(4.5);
  });
});

Theme and Interaction Integration

State Style Management

Define interactive state styles in themes:

{
  "emphasis": {
    "itemStyle": {
      "borderWidth": 2,
      "borderColor": "#000"
    }
  },
  "blur": {
    "itemStyle": {
      "opacity": 0.2
    }
  }
}

Animation Effect Integration

Configure animation parameters in themes:

{
  "animationDuration": 1000,
  "animationEasing": "cubicOut",
  "animationThreshold": 2000
}

Theme-Aware Components

Create React components that automatically adapt to the current theme:

function ThemedTooltip(props) {
  const theme = useChartTheme();
  return (
    <div style={{
      backgroundColor: theme.tooltip.backgroundColor,
      color: theme.tooltip.textStyle.color
    }}>
      {props.content}
    </div>
  );
}

Multi-Theme Hybrid Application Scenarios

Nested Primary and Secondary Themes

Implement local theme overrides for charts:

option = {
  theme: 'dark',
  series: [{
    type: 'pie',
    theme: 'light'  // This series uses the light theme exclusively
  }]
}

Theme Chunk Loading

Example of loading theme modules on demand:

async function loadChart(type) {
  const theme = await import(`./themes/${type}.json`);
  echarts.registerTheme(type, theme);
  return echarts.init(dom, type);
}

Theme CSS Variable Integration

Map theme parameters to CSS variables:

.echart-container {
  --echarts-color-1: var(--primary-color);
  --echarts-font: var(--base-font);
}

option = {
  color: ['var(--echarts-color-1)'],
  textStyle: {
    fontFamily: 'var(--echarts-font)'
  }
}

Theme Performance Optimization Practices

Theme Caching Strategy

Implement local storage caching for themes:

function getTheme(name) {
  const cached = localStorage.getItem(`echarts-theme-${name}`);
  if (cached) return JSON.parse(cached);
  
  return fetchTheme(name).then(theme => {
    localStorage.setItem(`echarts-theme-${name}`, JSON.stringify(theme));
    return theme;
  });
}

Theme Differential Updates

Implement incremental theme updates using JSON Patch:

const patches = [
  { op: 'replace', path: '/color/0', value: '#4caf50' },
  { op: 'add', path: '/textStyle/fontSize', value: 14 }
];
chart.updateTheme(patches);

Theme Tree Shaking Optimization

Use ES modules to export themes on demand:

// themes/index.js
export { default as light } from './light.js';
export { default as dark } from './dark.js';

// Usage
import { light } from './themes';