ECharts 样式设置

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

如果你想针对特定图表（如柱状渐变、饼图阴影）获取完整代码，或有自定义需求（如暗黑主题），告诉我，我可以给出精确示例！