Echart图的雷达图label文字加图标

实现效果：

根据数据的不同，有的数据展示笑脸图标，有的展示难过图标，有的不展示图标。

效果图：

代码实现：主要运用富文本，rich与formatter实现。其他图也同理

import IconGood from '@/assets/images/icon-good.png'
import IconBad from '@/assets/images/icon-bad.png'
//1.首先引入图片 
//2.在radar的name属性中进行配置
name: {   
        formatter: (labelName: string, raw: any) => {
          const { value } = raw
          const label = []
          if (value > 80) {
            label.push('{good|}')  //展示笑脸
          }
 
          if (value > 90) {
            label.push('{bad|}')  //展示难过
          }
 
          label.push(`${labelName}`)
 
          return label.join(' ')
        },
        rich: {
          good: {
            width: 15,
            height: 15,
            align: 'left',
            backgroundColor: {   //重点在这
              image: IconGood
            }
          },
          bad: {
            width: 15,
            height: 15,
            align: 'left',
            backgroundColor: {
              image: IconBad
            }
          }
        }
      },复制