自定义主题注册完全指南
📋 概述
除了使用ECharts内置主题外，开发者还可以通过echarts.registerTheme() API创建和注册完全自定义的主题。这使得图表能够完美匹配品牌风格、产品定位或用户偏好。
核心价值
- 品牌一致性：配色与企业VI完全匹配
- 场景定制：为特定业务场景优化视觉方案
- 用户体验：提供符合目标用户审美的主题
- 差异化竞争：打造独特的数据可视化风格
🎯 主题结构
基础结构
javascript
const customTheme = {
// === 版本信息 ===
version: 1,
// === 主题名称 ===
themeName: 'myCustomTheme',
// === 描述信息 ===
description: '我的自定义主题',
// === 作者信息 ===
author: 'Your Name',
// === 全局配置 ===
color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'],
backgroundColor: '#fff',
// === 组件配置 ===
title: { /* ... */ },
legend: { /* ... */ },
tooltip: { /* ... */ },
xAxis: { /* ... */ },
yAxis: { /* ... */ },
// === 系列默认配置 ===
series: { /* ... */ }
};
// 注册主题
echarts.registerTheme('myCustomTheme', customTheme);
// 使用主题
const chart = echarts.init(dom, 'myCustomTheme');1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
🔧 详细配置项
1. 颜色系统
javascript
const theme = {
// 主色盘（最多10个颜色）
color: [
'#5470c6', // 蓝色 - 主色调
'#91cc75', // 绿色
'#fac858', // 黄色
'#ee6666', // 红色
'#73c0de', // 青色
'#3ba272', // 深绿
'#fc8452', // 橙色
'#9a60b4', // 紫色
'#ea7ccc' // 粉色
],
// 背景色
backgroundColor: '#fff',
// 强调颜色
emphasisColor: '#ee6666',
// 禁用状态颜色
disabledColor: '#ccc'
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2. 标题组件配置
javascript
theme.title = {
// 主标题样式
textStyle: {
fontSize: 18,
fontWeight: 'bold',
color: '#333'
},
// 副标题样式
subtextStyle: {
fontSize: 12,
color: '#999'
},
// 内边距
padding: [5, 10],
// 标题间距
itemGap: 10,
// 左右对齐方式
left: 'left',
top: 'top'
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
3. 图例组件配置
javascript
theme.legend = {
// 文字样式
textStyle: {
color: '#333',
fontSize: 12
},
// 选中模式
selectedMode: true,
// 图标形状
icon: 'roundRect',
// 图例项大小
itemWidth: 25,
itemHeight: 14,
// 间距
itemGap: 10,
// 布局方向
orient: 'horizontal'
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
4. 提示框配置
javascript
theme.tooltip = {
// 背景样式
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
borderWidth: 0,
// 内边距
padding: [8, 10],
// 文字样式
textStyle: {
color: '#fff',
fontSize: 12
},
// 指示器类型
axisPointer: {
type: 'line',
lineStyle: {
color: '#555',
width: 1
}
}
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
5. 坐标轴配置
javascript
theme.xAxis = {
// 轴线样式
axisLine: {
show: true,
lineStyle: {
color: '#666',
width: 1
}
},
// 刻度样式
axisTick: {
show: true,
lineStyle: {
color: '#666'
}
},
// 刻度标签样式
axisLabel: {
show: true,
color: '#666',
fontSize: 12,
margin: 8
},
// 分割线样式
splitLine: {
show: false, // x轴默认不显示分割线
lineStyle: {
color: '#e0e0e0',
type: 'solid'
}
}
};
theme.yAxis = {
axisLine: {
show: true,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: true,
lineStyle: {
color: '#666'
}
},
axisLabel: {
show: true,
color: '#666',
fontSize: 12
},
// y轴默认显示分割线
splitLine: {
show: true,
lineStyle: {
color: '#e0e0e0',
type: 'solid'
}
}
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
6. 网格配置
javascript
theme.grid = {
// 边框样式
borderColor: '#ccc',
borderWidth: 1,
// 背景色
backgroundColor: 'rgba(0,0,0,0)',
// 阴影
shadowBlur: 5,
shadowColor: 'rgba(0,0,0,0.1)'
};1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
7. 系列默认配置
javascript
theme.series = {
// 折线图默认配置
line: {
symbol: 'emptyCircle',
symbolSize: 4,
lineStyle: {
width: 2
}
},
// 柱状图默认配置
bar: {
barMaxWidth: '50%',
itemStyle: {
borderRadius: [2, 2, 0, 0]
}
},
// 饼图默认配置
pie: {
radius: ['40%', '70%'],
avoidLabelOverlap: true,
label: {
color: '#333'
}
},
// 散点图默认配置
scatter: {
symbol: 'circle',
symbolSize: 10
}
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
💡 实战案例
案例1：企业品牌主题
javascript
// 某科技公司品牌主题（假设品牌色为蓝紫色系）
const techCompanyTheme = {
version: 1,
themeName: 'techCompany',
description: '科技公司品牌主题',
// 品牌色盘
color: [
'#6366f1', // 主品牌色 - 靛蓝
'#8b5cf6', // 紫色
'#ec4899', // 粉色
'#f59e0b', // 琥珀色
'#10b981', // 祖母石绿
'#06b6d4', // 青色
'#f43f5e', // 玫瑰红
'#d946ef' // 品红
],
backgroundColor: '#ffffff',
// 标题
title: {
textStyle: {
fontSize: 20,
fontWeight: '600',
color: '#1e293b' // 深蓝灰
},
subtextStyle: {
fontSize: 13,
color: '#64748b' // 中蓝灰
}
},
// 图例
legend: {
textStyle: {
color: '#475569',
fontSize: 13
},
icon: 'roundRect',
itemWidth: 20,
itemHeight: 12,
itemGap: 16
},
// 提示框
tooltip: {
backgroundColor: 'rgba(255, 255, 255, 0.95)',
borderColor: '#e2e8f0',
borderWidth: 1,
padding: [12, 16],
textStyle: {
color: '#334155',
fontSize: 13
},
extraCssText: 'box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border-radius: 8px;'
},
// x轴
xAxis: {
axisLine: {
lineStyle: {
color: '#cbd5e1'
}
},
axisTick: {
lineStyle: {
color: '#cbd5e1'
}
},
axisLabel: {
color: '#64748b',
fontSize: 12,
margin: 12
},
splitLine: {
show: false
}
},
// y轴
yAxis: {
axisLine: {
lineStyle: {
color: '#cbd5e1'
}
},
axisTick: {
lineStyle: {
color: '#cbd5e1'
}
},
axisLabel: {
color: '#64748b',
fontSize: 12
},
splitLine: {
lineStyle: {
color: '#f1f5f9',
type: 'dashed'
}
}
},
// 系列默认
series: {
line: {
smooth: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
width: 3
},
areaStyle: {
opacity: 0.1
}
},
bar: {
barMaxWidth: '60%',
itemStyle: {
borderRadius: [4, 4, 0, 0]
}
},
pie: {
radius: ['45%', '70%'],
label: {
color: '#475569'
}
}
}
};
// 注册主题
echarts.registerTheme('techCompany', techCompanyTheme);
// 使用
const chart = echarts.init(document.getElementById('chart'), 'techCompany');1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
案例2：深色科技主题
javascript
const darkTechTheme = {
version: 1,
themeName: 'darkTech',
description: '深色科技主题',
// 霓虹色系
color: [
'#00ffff', // 青色
'#ff00ff', // 洋红
'#00ff00', // 亮绿
'#ffff00', // 黄色
'#ff0080', // 粉红
'#8000ff', // 紫色
'#0080ff', // 蓝色
'#ff8000' // 橙色
],
backgroundColor: '#0a0e27', // 深蓝黑
// 标题
title: {
textStyle: {
fontSize: 22,
fontWeight: 'bold',
color: '#00ffff', // 霓虹青
textShadowColor: 'rgba(0, 255, 255, 0.5)',
textShadowBlur: 10
},
subtextStyle: {
fontSize: 13,
color: '#8892b0'
}
},
// 图例
legend: {
textStyle: {
color: '#a8b2d1',
fontSize: 13
},
icon: 'circle',
itemWidth: 12,
itemHeight: 12,
itemGap: 20
},
// 提示框
tooltip: {
backgroundColor: 'rgba(10, 14, 39, 0.9)',
borderColor: '#00ffff',
borderWidth: 1,
padding: [12, 16],
textStyle: {
color: '#ccd6f6',
fontSize: 13
},
extraCssText: 'box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); border-radius: 4px;'
},
// 坐标轴
xAxis: {
axisLine: {
lineStyle: {
color: '#233554',
width: 2
}
},
axisTick: {
lineStyle: {
color: '#233554'
}
},
axisLabel: {
color: '#8892b0',
fontSize: 12,
margin: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#1a1f3a',
type: 'dashed'
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: '#233554',
width: 2
}
},
axisTick: {
lineStyle: {
color: '#233554'
}
},
axisLabel: {
color: '#8892b0',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#1a1f3a',
type: 'dashed'
}
}
},
// 系列
series: {
line: {
smooth: false,
symbol: 'diamond',
symbolSize: 8,
lineStyle: {
width: 2,
shadowBlur: 10,
shadowColor: 'rgba(0, 255, 255, 0.5)'
},
itemStyle: {
borderColor: '#00ffff',
borderWidth: 2
}
},
bar: {
barMaxWidth: '50%',
itemStyle: {
borderRadius: [2, 2, 0, 0],
shadowBlur: 15,
shadowColor: 'rgba(0, 255, 255, 0.4)'
}
},
scatter: {
symbol: 'circle',
symbolSize: 12,
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(255, 0, 255, 0.6)'
}
}
}
};
echarts.registerTheme('darkTech', darkTechTheme);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
案例3：清新自然主题
javascript
const natureTheme = {
version: 1,
themeName: 'nature',
description: '清新自然主题',
// 自然色系
color: [
'#7cb342', // 草绿
'#66bb6a', // 鲜绿
'#aed581', // 浅绿
'#ffb74d', // 橙黄
'#ff8a65', // 珊瑚橙
'#4db6ac', // 水鸭蓝
'#ba68c8', // 淡紫
'#e57373' // 浅红
],
backgroundColor: '#f9fbe7', // 淡黄绿背景
// 标题
title: {
textStyle: {
fontSize: 20,
fontWeight: '600',
color: '#33691e' // 深绿
},
subtextStyle: {
fontSize: 13,
color: '#689f38' // 中绿
}
},
// 图例
legend: {
textStyle: {
color: '#558b2f',
fontSize: 13
},
icon: 'circle',
itemWidth: 14,
itemHeight: 14,
itemGap: 18
},
// 提示框
tooltip: {
backgroundColor: 'rgba(255, 255, 255, 0.95)',
borderColor: '#aed581',
borderWidth: 2,
padding: [12, 16],
textStyle: {
color: '#33691e',
fontSize: 13
},
extraCssText: 'border-radius: 12px; box-shadow: 0 2px 8px rgba(126, 179, 66, 0.2);'
},
// 坐标轴
xAxis: {
axisLine: {
lineStyle: {
color: '#aed581',
width: 2
}
},
axisTick: {
lineStyle: {
color: '#c5e1a5'
}
},
axisLabel: {
color: '#689f38',
fontSize: 12,
margin: 12
},
splitLine: {
show: false
}
},
yAxis: {
axisLine: {
lineStyle: {
color: '#aed581',
width: 2
}
},
axisTick: {
lineStyle: {
color: '#c5e1a5'
}
},
axisLabel: {
color: '#689f38',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#dcedc8',
type: 'dotted'
}
}
},
// 系列
series: {
line: {
smooth: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: {
width: 3
},
areaStyle: {
opacity: 0.15
}
},
bar: {
barMaxWidth: '55%',
itemStyle: {
borderRadius: [8, 8, 0, 0]
}
},
pie: {
radius: ['50%', '75%'],
label: {
color: '#558b2f'
}
}
}
};
echarts.registerTheme('nature', natureTheme);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
⚠️ 常见问题
问题1：主题注册后不生效
症状：调用registerTheme后，使用主题时仍显示默认样式
原因：必须在init之前注册主题
解决：
javascript
// ❌ 错误顺序
const chart = echarts.init(dom, 'myTheme');
echarts.registerTheme('myTheme', theme); // 太晚了
// ✅ 正确顺序
echarts.registerTheme('myTheme', theme);
const chart = echarts.init(dom, 'myTheme');1
2
3
4
5
6
7
2
3
4
5
6
7
问题2：部分配置不生效
症状：主题中某些配置没有应用
原因：主题配置的优先级低于setOption中的配置
解决：
javascript
// 主题中的配置
const theme = {
title: {
textStyle: {
color: '#333' // 主题中定义
}
}
};
// setOption会覆盖主题配置
chart.setOption({
title: {
textStyle: {
color: '#666' // 这里会覆盖主题中的#333
}
}
});
// 如果希望主题配置生效，不要在setOption中重复设置1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
问题3：主题文件过大
症状：主题JSON文件超过100KB
原因：包含了过多细节配置
解决：
javascript
// 只配置关键属性
const minimalTheme = {
color: ['#5470c6', '#91cc75', '#fac858'],
backgroundColor: '#fff',
title: {
textStyle: { color: '#333' }
},
legend: {
textStyle: { color: '#333' }
}
// 省略其他可选配置
};1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
🎯 最佳实践
1. 主题模板化
javascript
// 创建主题工厂函数
function createTheme(baseConfig) {
return {
version: 1,
themeName: baseConfig.name,
color: baseConfig.colors,
backgroundColor: baseConfig.backgroundColor,
title: {
textStyle: {
color: baseConfig.textColor,
fontSize: baseConfig.titleSize || 18
}
},
legend: {
textStyle: {
color: baseConfig.textColor
}
},
tooltip: {
backgroundColor: baseConfig.tooltipBg,
textStyle: {
color: baseConfig.tooltipTextColor
}
},
xAxis: {
axisLine: { lineStyle: { color: baseConfig.axisColor } },
axisLabel: { color: baseConfig.labelColor },
splitLine: { lineStyle: { color: baseConfig.splitLineColor } }
},
yAxis: {
axisLine: { lineStyle: { color: baseConfig.axisColor } },
axisLabel: { color: baseConfig.labelColor },
splitLine: { lineStyle: { color: baseConfig.splitLineColor } }
}
};
}
// 快速生成主题
const myTheme = createTheme({
name: 'myTheme',
colors: ['#5470c6', '#91cc75', '#fac858'],
backgroundColor: '#fff',
textColor: '#333',
titleSize: 20,
tooltipBg: 'rgba(50,50,50,0.7)',
tooltipTextColor: '#fff',
axisColor: '#666',
labelColor: '#666',
splitLineColor: '#e0e0e0'
});
echarts.registerTheme('myTheme', myTheme);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2. 从设计系统导入
javascript
// 从Ant Design色彩系统生成主题
import { theme } from 'antd';
const antdTheme = createTheme({
name: 'antd',
colors: [
theme.token.colorPrimary,
theme.token.colorSuccess,
theme.token.colorWarning,
theme.token.colorError,
theme.token.colorInfo
],
backgroundColor: theme.token.colorBgContainer,
textColor: theme.token.colorText,
titleSize: 18,
tooltipBg: theme.token.colorBgElevated,
tooltipTextColor: theme.token.colorText,
axisColor: theme.token.colorBorder,
labelColor: theme.token.colorTextSecondary,
splitLineColor: theme.token.colorSplit
});
echarts.registerTheme('antd', antdTheme);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
3. 导出为JSON
javascript
// 将主题导出为JSON文件
const themeJSON = JSON.stringify(customTheme, null, 2);
// 下载文件
const blob = new Blob([themeJSON], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'my-theme.json';
a.click();
URL.revokeObjectURL(url);
// 使用时加载JSON
fetch('my-theme.json')
.then(res => res.json())
.then(themeData => {
echarts.registerTheme('myTheme', themeData);
const chart = echarts.init(dom, 'myTheme');
});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
4. 主题预览工具
javascript
class ThemePreviewer {
constructor(themes) {
this.themes = themes;
this.currentIndex = 0;
this.chart = null;
}
init(dom, option) {
this.option = option;
this.showTheme(this.themes[0]);
// 添加切换按钮
document.getElementById('prev').onclick = () => this.prev();
document.getElementById('next').onclick = () => this.next();
}
showTheme(themeName) {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(dom, themeName);
this.chart.setOption(this.option);
console.log(`当前主题: ${themeName}`);
}
prev() {
this.currentIndex = (this.currentIndex - 1 + this.themes.length) % this.themes.length;
this.showTheme(this.themes[this.currentIndex]);
}
next() {
this.currentIndex = (this.currentIndex + 1) % this.themes.length;
this.showTheme(this.themes[this.currentIndex]);
}
}
// 使用
const previewer = new ThemePreviewer(['default', 'dark', 'vintage', 'myTheme']);
previewer.init(document.getElementById('chart'), chartOption);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
📊 性能指标
主题注册性能
| 操作 | 耗时 | 说明 |
|---|---|---|
| registerTheme | <1ms | 几乎无开销 |
| init with theme | +2-5ms | 相比默认主题略慢 |
| 主题切换 | 50-100ms | 包含dispose+reinit |
结论：主题注册和使用的性能开销极小，可以放心使用。
🔗 相关链接
- ECharts主题构建工具
- 内置主题使用.md)
- 颜色系统配置
- React集成方案
💎 总结
自定义主题核心价值：
- ✅ 品牌一致：配色与企业VI完美匹配
- ✅ 灵活定制：完全控制所有视觉元素
- ✅ 复用性强：一次注册，多处使用
- ✅ 易于维护：集中管理视觉规范
关键步骤：
- 定义主题配置对象
- 调用
echarts.registerTheme()注册 - 在
echarts.init()时指定主题名称 - 避免在setOption中覆盖主题配置
最佳实践：
- 使用主题工厂函数快速生成
- 从设计系统导入色彩规范
- 导出为JSON便于分享
- 创建主题预览工具辅助开发
掌握自定义主题，让你的图表完美融入产品！🎨
示例演示
{
"title": {
"textStyle": {
"color": "#666"
}
}
}