echarts饼状图实现不同icon

1 引入图片

import img1 from '@/assets/img/power.png'
import img2 from '@/assets/img/underPan.png'
import img3 from '@/assets/img/assist.png'
import img4 from '@/assets/img/control.png'
import img5 from '@/assets/img/other.png'
const imgConfig = {
  '动力系统': '{img1|}',
  '底盘系统': '{img2|}',
  '辅助驾驶系统': '{img3|}',
  '车身控制系统': '{img4|}',
  '其它': '{img5|}'
}

2 饼状图配置

 series: [
          {
            label: {
              normal: {
                // formatter: function(params) {
                //   return `${imgConfig[params.name]} ${params.name}`
                // },
                formatter: this.formate,
                rich: {
                  // 这里设置您的图片引用名称
                  img1: {
                    // 引入图片
                    backgroundColor: {
                      image: img1
                    }

                  },
                  img2: {
                    backgroundColor: {
                      image: img2
                    }
                  },
                  img3: {
                    backgroundColor: {
                      image: img3
                    }
                  },
                  img4: {
                    backgroundColor: {
                      image: img4
                    }
                  },
                  img5: {
                    backgroundColor: {
                      image: img5
                    }
                  }
                },
                show: true
              }
            },
            labelLine: {
              normal: {
                position: 'inner',
                show: true
              }

            },
            radius: ['50%', '60%'], // 把饼状图改成空心
            type: 'pie',
            // radius: '50%',
            data: listData,
            animationDelay: idx => idx * 200 + 100,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#31E9FD', '#FD8C31', '#25E2BC', '#00997B', '#5D9AA2']
                  return colorList[params.dataIndex]
                },
                label: {
                  textStyle: {
                    fontSize: 10,
                    fontWeight: '300',
                    color: function(params) {
                      var colorList = ['red', '#FD8C31', '#25E2BC', '#00997B', '#5D9AA2']
                      return colorList[params.dataIndex]
                    }
                  }
                }
              }
            }

          }
        ]

3 设置饼状图label文字超过指定个数换行

 formate(e) {
      var newStr = ' '
      var start, end
      var name_len = e.name.length // 每个内容名称的长度
      var max_name = 4 // 每行最多显示的字数
      var new_row = Math.ceil(name_len / max_name) // 最多能显示几行，向上取整比如2.1就是3行
      if (name_len > max_name) { // 如果长度大于每行最多显示的字数
        for (var i = 0; i < new_row; i++) { // 循环次数就是行数
          var old = '' // 每次截取的字符
          start = i * max_name // 截取的起点
          end = start + max_name // 截取的终点
          if (i === new_row - 1) { // 最后一行就不换行了
            old = ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + e.name.substring(start)
          } else {
            // old = e.name.substring(start, end) + '\n'
            old = `${imgConfig[e.name]} ${e.name.substring(start, end)}` + '\n'
          }
          newStr += old // 拼接字符串
        }
      } else { // 如果小于每行最多显示的字数就返回原来的字符串
        newStr = `${imgConfig[e.name]} ${e.name}`
      }
      return newStr
    }