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

参考:

经验分享 程序员 微信小程序 职场和发展