问题：

当图表中的 legend 过多的时候，就需要考虑 legend 进行换行，但是换行之后，图例就会无法对齐，如下图所示：

解决方法

1、需要对legend进行分组

2、需要formatter和rich属性

代码如下：

option = {
  tooltip: {
    trigger: 'item'
  },
  legend:[
    {
          orient: 'horizontal',
          icon: 'circle',
          align: 'left',
          bottom: '0',
          itemWidth: 8,
          itemHeight: 8,
          y: '20',
          x: 'center',
          data: ['鼻翼煽动，口唇、指甲青紫', '胸闷', '憋气/憋醒'],
          formatter: (name): any => {
            return `{b|${name}} `;
          },
          textStyle: {
            color: '#999999',
            fontSize: 12,
            align: 'left',
            // 文字块背景色，一定要加上，否则对齐不会生效
            backgroundColor: "transparent", 
            rich: {
              b: {
                width: 200,
              },
            },
          },
    },
    {
          orient: 'horizontal',
          icon: 'circle',
          align: 'left',
          bottom: '0',
          itemWidth: 8,
          itemHeight: 8,
          y: '40',
          x: 'center',
          data: ['咳嗽或反复咳嗽', '气促', '没感觉/感觉良好'],
          formatter: (name): any => {
            return `{a|${name}} `;
          },
           
          textStyle: {
            color: '#999999',
            fontSize: 12,
            align: 'left',
            // 文字块背景色，一定要加上，否则对齐不会生效
            backgroundColor: "transparent", 
            rich: {
              a: {
                width: 200,
              },
            },
          },
    }
    ],
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '咳嗽或反复咳嗽' },
        { value: 735, name: '鼻翼煽动，口唇、指甲青紫' },
        { value: 580, name: '胸闷' },
        { value: 484, name: '憋气/憋醒' },
        { value: 300, name: '气促' },
        { value: 300, name: '没感觉/感觉良好' }
      ]
    }
  ]
};

注意：

 在textStyle中一定要加上backgroundColor: "transparent",否则rich中设置的width不会生效

网络上出现很多文章，都实现不了，主要就是没说清楚这个属性，希望大家能避坑

最终实现效果如下：