echarts legend 使用formatter和rich自定义样式
echarts legend 使用formatter和rich自定义样式
需要实现的效果: 代码:
// 需要加标签的label名称
const labelMark = 产品名称2
...
legend: {
itemGap: 20,
formatter (label) {
// labelMark为需要打标签的条目名称,这里定义两种文本块:labelName和labelMark
return labelMark === label ? `{labelName|${
label} }{labelMark|代表产品}` : `{labelName|${
label}}`
},
textStyle: {
fontSize: 12,
rich: {
// 给labelName添加样式
labelName: {
color: #434549,
}
// 给labelMark添加样式
labelMark: {
color: #fff,
backgroundColor: #727485,
fontSize: 9,
padding: [1, 2],
borderRadius: 1px,
align: right
// height: 13px // rich里面枚举的属性才能设置样式,不然样式或错乱,枚举属性见文末链接。
}
}
}
}
参考:
