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里面枚举的属性才能设置样式，不然样式或错乱，枚举属性见文末链接。
       }
     }
   }
}

参考：echarts官文