ECharts setOption 参数详解

一、setOption 方法简介setOption是 ECharts 的核心方法用于设置图表的配置项。它接受两个参数chartInstance.setOption(option,notMerge,lazyUpdate)option: 配置项对象必填notMerge: 是否不合并默认配置可选默认 falselazyUpdate: 是否延迟更新可选默认 false二、核心配置项属性2.1 backgroundColor背景颜色backgroundColor:transparent// 或 #fff, #111 等说明设置图表容器的背景颜色支持透明色。2.2 tooltip提示框tooltip:{trigger:item,// 触发类型item数据项| axis坐标轴formatter:{a} br/{b}: {c} ({d}%)// 提示框格式化}常用属性trigger: 触发类型item: 数据项图形触发饼图、散点图等axis: 坐标轴触发柱状图、折线图等none: 不触发formatter: 提示框内容格式{a}系列名称{b}数据名{c}数据值{d}百分比仅饼图2.3 legend图例legend:{type:scroll,// 图例类型plain | scrollorient:vertical,// 排列方向horizontal | verticalright:2%,// 右侧位置top:middle,// 顶部位置top | middle | bottomtextStyle:{// 文本样式color:#9ca3af,fontSize:10},icon:circle,// 图例标记形状pageTextStyle:{color:#fff}// 分页文本样式}常用属性type: 图例类型plain: 普通图例默认scroll: 可滚动图例数据多时使用orient: 排列方向horizontal: 水平排列vertical: 垂直排列position: 位置left,right,top,bottom2.4 series数据系列series:[{name:爆品销量,// 系列名称type:pie,// 图表类型radius:[40%,65%],// 半径配置center:[40%,50%],// 圆心位置// ... 其他配置}]三、饼图系列配置详解3.1 基础配置series:[{name:爆品销量,// 系列名称type:pie,// 图表类型pie饼图// 半径配置radius:[40%,65%],// 内半径、外半径环形饼图// radius: 60%, // 单值表示普通饼图// 位置配置center:[40%,50%],// 圆心位置x, y百分比或像素}]3.2 样式配置itemStyle:{borderRadius:8,// 圆角角度borderColor:#111827,// 边框颜色borderWidth:2,// 边框宽度color:xxx,// 自定义颜色shadowBlur:10,// 阴影模糊度shadowColor:rgba(0,0,0,0.3)// 阴影颜色}3.3 标签配置labellabel:{show:true,// 是否显示标签position:outside,// 标签位置inside | outside | centercolor:#9ca3af,// 文本颜色fontSize:10,// 字体大小fontWeight:bold,// 字体粗细formatter:{b}: {c},// 标签内容格式// {a}: 系列名, {b}: 数据名, {c}: 数据值, {d}: 百分比distance:5,// 距离图形的距离outside 时rotate:0,// 标签旋转角度offset:[0,0]// 标签偏移量}常用 formatter 格式{b}: {c}: 显示名称和数值{b}: {d}%: 显示名称和百分比{a}: {b}\n{c} ({d}%): 多行显示3.4 标签线配置labelLinelabelLine:{show:true,// 是否显示标签线length:10,// 标签线第一段长度length2:5,// 标签线第二段长度smooth:0,// 是否平滑0-1lineStyle:{// 线样式color:#9ca3af,width:1,type:solid,opacity:0.8}}3.5 数据配置datadata:[{value:1200,name:冷冻猪蹄},{value:1100,name:新鲜菜心},// ...]数据项属性value: 数值必填name: 名称可选itemStyle: 单项样式可选label: 单项标签可选labelLine: 单项标签线可选3.6 其他常用配置avoidLabelOverlap:true,// 是否避免标签重叠selectedMode:false,// 选择模式false | single | multipleselectedOffset:10,// 选中扇区偏移距离animation:true,// 是否动画animationDuration:1000,// 动画持续时间msanimationEasing:cubicOut,// 动画缓动效果四、其他常用图表类型配置4.1 折线图lineseries:[{type:line,smooth:true,// 是否平滑曲线symbol:circle,// 拐点图形symbolSize:4,// 拐点大小lineStyle:{// 线样式width:2,color:#xxx},areaStyle:{// 区域填充样式color:xxx},stack:总量// 是否堆叠}]4.2 柱状图barseries:[{type:bar,barWidth:20,// 柱子宽度barGap:30%,// 柱子之间间距barCategoryGap:20%,// 类目之间间距itemStyle:{color:xxx,borderRadius:[4,4,0,0]// 圆角},label:{show:true,position:top,formatter:{c}}}]4.3 散点图scatterseries:[{type:scatter,symbolSize:function(val){returnval[2]/10// 根据数据大小调整符号大小},itemStyle:{color:xxx}}]五、setOption 使用技巧5.1 初始设置chartInstance.setOption(option)5.2 更新数据不合并chartInstance.setOption({series:[{data:newData}]})5.3 更新部分配置chartInstance.setOption({tooltip:{show:true}})5.4 强制不合并chartInstance.setOption(option,true)// notMerge: true六、完整配置示例chartInstance.setOption({backgroundColor:transparent,tooltip:{trigger:item,formatter:{a} br/{b}: {c} ({d}%)},legend:{type:scroll,orient:vertical,right:2%,top:middle,textStyle:{color:#9ca3af,fontSize:10}},series:[{name:数据,type:pie,radius:[40%,65%],center:[40%,50%],avoidLabelOverlap:true,itemStyle:{borderRadius:8,borderColor:#111827,borderWidth:2},label:{show:true,position:outside,color:#9ca3af,fontSize:10,formatter:{b}: {c}},labelLine:{show:true,length:10,length2:5},data:[{value:1200,name:冷冻猪蹄},{value:1100,name:新鲜菜心}]}]})七、常用颜色值// 十六进制color:#ff6b6b// RGB/RGBAcolor:rgb(255, 107, 107)color:rgba(255, 107, 107, 0.5)// 预定义颜色color:red,blue,green// 渐变色color:{type:linear,x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:red},{offset:1,color:blue}]}八、总结setOption是 ECharts 的核心方法掌握其配置项对于图表开发至关重要基础配置backgroundColor、tooltip、legend系列配置series及其子属性数据配置data数组样式配置itemStyle、label、labelLine交互配置selectedMode、hoverAnimation合理使用这些配置项可以构建出专业、美观的数据可视化图表。