Echarts 文字|颜色|样式... 优化示例。持续更新中...

1，Legend的文字换行、单独设置文字颜色、Icon与第一行文字对齐

想要的效果 Legent 的效果

### 右侧“已过期”文字下的数量与百分比如何设置？

那肯定是要用formatter了，关键在于换行符"\n"。

legend: {
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20,
    orient: 'vertical',
    icon: 'circle',
    itemStyle: {
      borderWidth: 2
    },
    // 文字换行关注此行代码
    formatter: (name) => {
        return `${name}\n${50}个 ${50}%`;
    }
 }

### 换行后文字颜色如何设置？

需要formatter与textStyle.rich

legend: {
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20,
    orient: 'vertical',
    icon: 'circle',
    itemStyle: {
      borderWidth: 2
    },
   
    formatter: (name) => {
       // 文字换行关注此行代码
       // return `${name}\n${50}个 ${50}%`;
       
       // 文字换行加单独设置颜色
       return `{name|${name}}\n{num|${50}个} {value|${50}%}`;
    },
    textStyle: {
       rich: {
       // "name" 要对应 formatter 内的 {name|xxx} 的 name
        name: {
           fontSize: 12
        },
        num: {
          fontSize: 10,
          color: '#0070FF',
        },
        value: {
          fontSize: 10,
          color: '#0070FF',
        }
      }
    }
  }

### 写完发现文字左侧圆点图标是跟文字居中对齐的，处于两行文字水平中间，如何让 Icon 跟第一行文字对齐的？

很简单，在formatter返回值前面加“\n”换行符，再利用textStyle.rich.[xx].padding来进行微调

legend: {
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20,
    orient: 'vertical',
    icon: 'circle',
    itemStyle: {
      borderWidth: 2
    },
   
    formatter: (name) => {
       // 文字换行关注此行代码
       // return `${name}\n${50}个 ${50}%`;
       
       // 文字换行加单独设置颜色
       // return `\n{name|${name}}\n{num|${50}个} {value|${50}%}`;
       
       // 文字换行加单独设置颜色加Icon与第一行文字对齐
       return `\n{name|${name}}\n{num|${50}个} {value|${50}%}`;
    },
    textStyle: {
       rich: {
       // "name" 要对应 formatter 内的 {name|xxx} 的 name
        name: {
           fontSize: 12,
           // 使用边距进行位置微调
           padding: [3, 0, 0, 0]
        },
        num: {
          fontSize: 10,
          color: '#0070FF',
        },
        value: {
          fontSize: 10,
          color: '#0070FF',
        }
      }
    }
  }