当前位置：首页 > news >正文

ECharts setOption 参数详解

news 2026/5/12 7:08:58

一、setOption 方法简介

setOption是 ECharts 的核心方法，用于设置图表的配置项。它接受两个参数：

chartInstance.setOption(option,notMerge,lazyUpdate)

option: 配置项对象（必填）
notMerge: 是否不合并默认配置（可选，默认 false）
lazyUpdate: 是否延迟更新（可选，默认 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' | 'scroll'orient:'vertical',// 排列方向：'horizontal' | 'vertical'right:'2%',// 右侧位置top:'middle',// 顶部位置：'top' | 'middle' | 'bottom'textStyle:{// 文本样式color:'#9ca3af',fontSize:10},icon:'circle',// 图例标记形状pageTextStyle:{color:'#fff'}// 分页文本样式}

常用属性：

type: 图例类型
- 'plain': 普通图例（默认）
- 'scroll': 可滚动图例（数据多时使用）
orient: 排列方向
- 'horizontal': 水平排列
- 'vertical': 垂直排列
position: 位置
- left,right,top,bottom

2.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 标签配置（label）

label:{show:true,// 是否显示标签position:'outside',// 标签位置：'inside' | 'outside' | 'center'color:'#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 标签线配置（labelLine）

labelLine:{show:true,// 是否显示标签线length:10,// 标签线第一段长度length2:5,// 标签线第二段长度smooth:0,// 是否平滑（0-1）lineStyle:{// 线样式color:'#9ca3af',width:1,type:'solid',opacity:0.8}}

3.5 数据配置（data）

data:[{value:1200,name:'冷冻猪蹄'},{value:1100,name:'新鲜菜心'},// ...]

数据项属性：

value: 数值（必填）
name: 名称（可选）
itemStyle: 单项样式（可选）
label: 单项标签（可选）
labelLine: 单项标签线（可选）

3.6 其他常用配置

avoidLabelOverlap:true,// 是否避免标签重叠selectedMode:false,// 选择模式：false | 'single' | 'multiple'selectedOffset:10,// 选中扇区偏移距离animation:true,// 是否动画animationDuration:1000,// 动画持续时间（ms）animationEasing:'cubicOut',// 动画缓动效果

四、其他常用图表类型配置

4.1 折线图（line）

series:[{type:'line',smooth:true,// 是否平滑曲线symbol:'circle',// 拐点图形symbolSize:4,// 拐点大小lineStyle:{// 线样式width:2,color:'#xxx'},areaStyle:{// 区域填充样式color:'xxx'},stack:'总量'// 是否堆叠}]

4.2 柱状图（bar）

series:[{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 散点图（scatter）

series:[{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'}]}