ECharts 样式设置详解
ECharts 的样式设置非常强大，主要通过 全局调色盘、组件样式 和 系列图形样式（itemStyle、lineStyle、areaStyle 等）实现。ECharts 5+ 简化了语法，不再强制使用 normal/emphasis 嵌套（直接扁平写法即可），但旧版兼容。
1. 全局样式
- color：全局颜色调色盘，系列会按顺序取色。
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272']- backgroundColor：图表背景色。
backgroundColor: 'rgba(0,0,0,0.8)' // 透明黑- textStyle：全局文本样式（标题、标签等继承）。
textStyle: {
color: '#333',
fontSize: 14,
fontFamily: 'Arial'
}2. 系列图形样式（series 内）
核心样式集中在 itemStyle（柱子/饼块/散点）、lineStyle（折线）、areaStyle（区域填充）、label（数据标签）。
示例：自定义柱状图 + 渐变 + 阴影
series: [{
type: 'bar',
itemStyle: {
color: { // 线性渐变
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: '#5470c6' },
{ offset: 1, color: '#91cc75' }
]
},
borderRadius: [10, 10, 0, 0], // 圆角（上左、上右、下右、下左）
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
emphasis: { // hover 高亮
itemStyle: {
shadowBlur: 30,
opacity: 0.8
}
},
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 12
}
}]示例：折线图渐变区域 + 自定义线条
series: [{
type: 'line',
lineStyle: {
width: 4,
color: '#ee6666',
type: 'dashed' // 虚线
},
areaStyle: {
color: { // 渐变填充
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(238, 102, 102, 0.8)' },
{ offset: 1, color: 'rgba(238, 102, 102, 0)' }
]
}
},
itemStyle: {
borderWidth: 3,
borderColor: '#fff'
}
}]示例：饼图自定义样式
series: [{
type: 'pie',
radius: ['40%', '70%'],
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
label: {
formatter: '{b}: {d}%',
color: '#333'
}
}]3. 高级样式技巧
- 渐变类型：linear（线性）、radial（径向）、pattern（纹理图片）。
- 视觉映射（visualMap）：根据数据自动映射颜色/大小/透明度。
visualMap: {
type: 'continuous',
min: 0, max: 100,
inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] }
}- 富文本标签：使用
{rich}定义复杂样式。 - 主题切换：
echarts.init(dom, 'dark')或自定义主题。
更多样式示例，推荐官方：
- 样式手册：https://echarts.apache.org/zh/option.html#series-pie.itemStyle
- 示例 Gallery：https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
如果你想针对特定图表（如柱状渐变、饼图阴影）获取完整代码，或有自定义需求（如暗黑主题），告诉我，我可以给出精确示例！
