Comprehensive theming system with built-in themes, custom theme registration, and granular styling control.
Register and apply custom themes to charts.
/**
* Register a custom theme
* @param name - Theme name
* @param theme - Theme configuration object
*/
function registerTheme(name: string, theme: ThemeOption): void;
interface ThemeOption {
/** Color palette for series */
color?: string[];
/** Chart background color */
backgroundColor?: string;
/** Default text style */
textStyle?: TextStyleOption;
/** Title styling */
title?: Partial<TitleComponentOption>;
/** Legend styling */
legend?: Partial<LegendComponentOption>;
/** Line chart styling */
line?: Partial<LineSeriesOption>;
/** Bar chart styling */
bar?: Partial<BarSeriesOption>;
/** Additional component styling */
[key: string]: any;
}Usage Example:
// Register custom theme
echarts.registerTheme('custom-dark', {
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9'],
backgroundColor: '#404a59',
textStyle: {
color: '#fff'
},
title: {
textStyle: {
color: '#fff'
}
}
});
// Apply theme during initialization
const chart = echarts.init(dom, 'custom-dark');ECharts includes several built-in themes.
// Available built-in themes
type BuiltinTheme = 'light' | 'dark';
// Apply built-in theme
const chart = echarts.init(dom, 'dark');Granular control over visual styling for all chart elements.
interface ItemStyleOption {
color?: string | Function;
borderColor?: string;
borderWidth?: number;
borderType?: 'solid' | 'dashed' | 'dotted';
borderRadius?: number | number[];
shadowBlur?: number;
shadowColor?: string;
shadowOffsetX?: number;
shadowOffsetY?: number;
opacity?: number;
decal?: DecalObject;
}
interface LineStyleOption {
color?: string;
width?: number;
type?: 'solid' | 'dashed' | 'dotted';
dashOffset?: number;
cap?: 'butt' | 'round' | 'square';
join?: 'bevel' | 'round' | 'miter';
miterLimit?: number;
shadowBlur?: number;
shadowColor?: string;
shadowOffsetX?: number;
shadowOffsetY?: number;
opacity?: number;
}