如何在ECharts中将legend渲染为富文本表格？

可以实现，下面提供两种实用方案：

方案一：利用Legend的formatter + textStyle.rich #

虽然官方文档标注Legend的formatter仅支持{name}占位符，但实际可以在formatter中拼接富文本标记，配合legend.textStyle.rich定义样式，同时保留原生Legend的交互功能（比如点击切换系列显示）。

示例代码：

option = {
  legend: {
    data: ['Sunny', 'Cloudy', 'Showers'],
    // 自定义formatter拼接富文本
    formatter: function(name) {
      // 预先定义对应的数据值和占比
      const dataMap = {
        Sunny: { value: 202, rate: '55.3%' },
        Cloudy: { value: 142, rate: '38.9%' },
        Showers: { value: 21, rate: '5.8%' }
      };
      const item = dataMap[name];
      return `{icon|}{name|${name}}{value|${item.value}}{rate|${item.rate}}`;
    },
    textStyle: {
      rich: {
        // 定义图标样式
        icon: {
          width: 30,
          height: 30,
          backgroundColor: function(params) {
            const iconMap = {
              Sunny: { image: 'sunny-icon-url' },
              Cloudy: { image: 'cloudy-icon-url' },
              Showers: { image: 'showers-icon-url' }
            };
            return iconMap[params.name];
          }
        },
        // 名称样式
        name: {
          width: 60,
          padding: [0, 10, 0, 5],
          align: 'left'
        },
        // 数值样式
        value: {
          width: 40,
          align: 'left'
        },
        // 占比样式
        rate: {
          width: 60,
          align: 'right',
          color: '#666'
        }
      }
    },
    orient: 'vertical' // 按需设置横向/纵向布局
  },
  // 其他图表配置（如series、xAxis等）...
};

方案二：用Graphic组件完全自定义Legend #

如果需要更复杂的布局（比如带标题栏、背景框、分割线），可以直接用ECharts的Graphic组件手动绘制Legend，布局完全自由，但需要自己实现交互逻辑。

示例代码：

option = {
  graphic: [
    // 外层背景框
    {
      type: 'rect',
      left: 20,
      top: 20,
      width: 280,
      height: 180,
      style: {
        fill: '#eee',
        stroke: '#777',
        lineWidth: 1,
        borderRadius: 4
      }
    },
    // 标题栏背景
    {
      type: 'rect',
      left: 20,
      top: 20,
      width: 280,
      height: 25,
      style: {
        fill: '#333',
        borderRadius: [4, 4, 0, 0]
      }
    },
    // 标题文本
    {
      type: 'text',
      left: 'center',
      top: 25,
      style: {
        text: 'Weather Stats',
        fill: '#eee',
        fontSize: 14,
        align: 'center'
      }
    },
    // 表头文本
    { type: 'text', left: 40, top: 55, style: { text: 'Weather', fill: '#333', fontSize: 12 } },
    { type: 'text', left: 150, top: 55, style: { text: 'Days', fill: '#333', fontSize: 12, align: 'center' } },
    { type: 'text', left: 240, top: 55, style: { text: 'Percent', fill: '#333', fontSize: 12, align: 'center' } },
    // 分割线
    {
      type: 'line',
      left: 30,
      top: 75,
      x2: 270,
      style: { stroke: '#777', lineWidth: 0.5 }
    },
    // Sunny图例项
    { type: 'image', left: 40, top: 85, width: 30, height: 30, style: { image: 'sunny-icon-url' } },
    { type: 'text', left: 80, top: 92, style: { text: 'Sunny', fontSize: 12 } },
    { type: 'text', left: 150, top: 92, style: { text: '202', fontSize: 12, align: 'center' } },
    { type: 'text', left: 240, top: 92, style: { text: '55.3%', fontSize: 12, align: 'center' } },
    // Cloudy图例项
    { type: 'image', left: 40, top: 120, width: 30, height: 30, style: { image: 'cloudy-icon-url' } },
    { type: 'text', left: 80, top: 127, style: { text: 'Cloudy', fontSize: 12 } },
    { type: 'text', left: 150, top: 127, style: { text: '142', fontSize: 12, align: 'center' } },
    { type: 'text', left: 240, top: 127, style: { text: '38.9%', fontSize: 12, align: 'center' } },
    // Showers图例项
    { type: 'image', left: 40, top: 155, width: 30, height: 30, style: { image: 'showers-icon-url' } },
    { type: 'text', left: 80, top: 162, style: { text: 'Showers', fontSize: 12 } },
    { type: 'text', left: 150, top: 162, style: { text: '21', fontSize: 12, align: 'center' } },
    { type: 'text', left: 240, top: 162, style: { text: '5.8%', fontSize: 12, align: 'center' } }
  ],
  // 其他图表配置...
};

方案对比 #

• 方案一：保留原生交互，实现简单，适合大多数场景；
• 方案二：布局完全自定义，适合需要极致样式的场景，但需手动实现点击切换等交互。

内容的提问来源于stack exchange，提问作者jayarjo