echarts图例中图标文字对齐

写这个笔记是因为这件看似很简单的小事，折磨了我很久。

先上图

image.png

去官网示例中细看，发现全都是不对齐的，就想调整一下，翻了legend的配置，尝试设置textStyle没有解决

image.png

然后看到富文本相关的介绍，想尝试使用，但是文档写得很含糊不清，你看了知道该怎么写嘛？

image.png

查了一圈好不容易才找到，formatter直接在legend下写，rich在legend.textStyle中。

        legend: {
          top: 5,
          left: 0,
          data: ['区块数', '目录上链数'],
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          formatter: [
            '{a|{name}}'
          ].join('\n'),
          textStyle: {
            height: 8,
            rich: {
              a: {
                verticalAlign: 'bottom',
              },
            }
          }
        },     

OK，效果出来：

1640242216675_457B8CB1-1F24-425e-A7AA-8D3BB0DE4792.png

希望能帮助到跟我一样无助徘徊的同学。