setOptionlegend

色标。默认色块、横向、底部居中，宽度 100%。不写 pieces 时用产品默认色标。

调用

chart.setOption({
    legend: {
        show: true,
        type: 'rect'
    }
})

• type: 'rect'：色块。点击可显示或隐藏对应区间
• type: 'line'：连续色条。拖动两端滑块按数值过滤，也可用 range 设初始范围

show: false 时不画、不占位，可用 getLegend() 取当前色标后自己画。

字段

字段	说明	类型	可选值	默认
show	是否显示	boolean	true / false	true
type	图例类型。rect 色块，line 连续色条	string	rect / line	rect
pieces	各档颜色和文字。value 为区间下沿	object[]	—	产品默认
range	line 模式下选中的数值范围。不写则全部显示	[number, number]	—	全开
direction	排列方向	string	horizontal / vertical	horizontal
width / height	整块图例（含文字）。像素或相对容器的百分比	number / string	—	横向宽 100%
x	水平位置。关键字、像素或百分比	string / number	left / center / right	center
y	垂直位置。关键字、像素或百分比	string / number	top / bottom / center	横向默认 bottom
radius	色条圆角，像素	number	—	0
label	图例文字	object	—	显示

containLabel 为 true 时，横向图例限制在绘图区内。

pieces

字段	说明	类型	可选值	默认
show	该档是否显示。点击色块会切换	boolean	true / false	true
value	区间下沿，到下一段之前用此色	number	—	—
color	颜色	string	—	—
label	色标文字。'-' 表示该档不画字；不传则回退为 value	string	—	value

legend: {
    pieces: [
        { show: true, value: 0, color: '#0426cc', label: '0' },
        { show: true, value: 1500, color: '#1a5cff', label: '1.5e+3' },
    ],
}

label

字段	说明	类型	可选值	默认
show	是否显示文字	boolean	true / false	true
position	文字位置。横向用 top / bottom，纵向用 left / right	string	top / bottom / left / right	横向 bottom，纵向 right
fontFamily	字体	string	—	sans-serif
fontSize	字号，像素	number	—	14
color	文字颜色	string	—	#6b7280

联动

chart.on('legendselectchanged', payload => {})
chart.dispatchAction({ type: 'legendToggleSelect', index: 0 })
chart.dispatchAction({ type: 'legendRange', min, max })

在线示例

在线体验见 示例 · 图例配置。自己画图例见 自定义图例。