echarts formatter_ECharts图例多行信息显示 & 图标首行对齐

需求

今天分享一个很实际的ECharts图例多行显示的经验。

如图，要实现的效果如下。图例需要进行显示多行信息并且icon要与第一行持平。

效果图

步骤

显示多行多样式

首先，多行显示需要用到legend.formatter^[1]，该配置项支持自定义图例信息， \n 用来换行。

其次，不同的文字显示不同的样式，需要用到富文本样式^[2]，具体用法如下。

// 配置项，只展示关键信息

const options = {
    
  legend: {
    
    formatter: function (name) {
    
      return [
        `{name|${name}}{percent|30%}`,
        "{num|300}",
        `{others|others}`,
      ].join("\n");
    },
    textStyle: {
    
      rich: {
    
        name: {
    
          fontSize: 12,
        },
        percent: {