echarts中如何将图例渲染为富表？

Question

here 示例展示了一个非常复杂的标签：

标签似乎是由 formatter 属性渲染的，具有一些非常丰富的样式：

          label: {
            formatter: [
              '{title|{b}}{abg|}',
              '  {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}',
              '{hr|}',
              '  {Sunny|}{value|202}{rate|55.3%}',
              '  {Cloudy|}{value|142}{rate|38.9%}',
              '  {Showers|}{value|21}{rate|5.8%}'
            ].join('\n'),
            backgroundColor: '#eee',
            borderColor: '#777',
            borderWidth: 1,
            borderRadius: 4,
            rich: {
              title: {
                color: '#eee',
                align: 'center'
              },
              abg: {
                backgroundColor: '#333',
                width: '100%',
                align: 'right',
                height: 25,
                borderRadius: [4, 4, 0, 0]
              },
              Sunny: {
                height: 30,
                align: 'left',
                backgroundColor: {
                  image: weatherIcons.Sunny
                }
              },
              Cloudy: {
                height: 30,
                align: 'left',
                backgroundColor: {
                  image: weatherIcons.Cloudy
                }
              },
              Showers: {
                height: 30,
                align: 'left',
                backgroundColor: {
                  image: weatherIcons.Showers
                }
              },
              weatherHead: {
                color: '#333',
                height: 24,
                align: 'left'
              },
              hr: {
                borderColor: '#777',
                width: '100%',
                borderWidth: 0.5,
                height: 0
              },
              value: {
                width: 20,
                padding: [0, 20, 0, 30],
                align: 'left'
              },
              valueHead: {
                color: '#333',
                width: 20,
                padding: [0, 20, 0, 30],
                align: 'center'
              },
              rate: {
                width: 40,
                align: 'right',
                padding: [0, 10, 0, 0]
              },
              rateHead: {
                color: '#333',
                width: 40,
                align: 'center',
                padding: [0, 10, 0, 0]
              }
            }

我想创建一个类似样式的legend。有可能吗？根据 docs 的传说，它只接受一个占位符 - name。

Answer 1

我不知道你到底想做什么，但是是的，您可以在图例中重现这个丰富的标签：

const ROOT_PATH = 'https://echarts.apache.org/examples';

const weatherIcons = {
  Sunny: ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
  Cloudy: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
  Showers: ROOT_PATH + '/data/asset/img/weather/showers_128.png'
};

let option = {
  title: {
    text: 'Weather Statistics',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  // ========================= HERE =========================
  legend: {
    data: ['CityA', 'CityB', 'CityD', 'CityC', 'CityE'],
    orient: 'vertical',
    left: 0,
    formatter: [
      '{title|{name}}{abg|}',
      '  {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}',
      '{hr|}',
      '  {Sunny|}{value|202}{rate|55.3%}',
      '  {Cloudy|}{value|142}{rate|38.9%}',
      '  {Showers|}{value|21}{rate|5.8%}'
    ].join('
'),
    textStyle: {
      backgroundColor: '#eee',
      borderColor: '#777',
      borderWidth: 1,
      borderRadius: 4,
      rich: {
        title: {
          color: '#eee',
          align: 'center'
        },
        abg: {
          backgroundColor: '#333',
          width: '100%',
          align: 'right',
          height: 25,
          borderRadius: [4, 4, 0, 0]
        },
        Sunny: {
          height: 30,
          align: 'left',
          backgroundColor: {
            image: weatherIcons.Sunny
          }
        },
        Cloudy: {
          height: 30,
          align: 'left',
          backgroundColor: {
            image: weatherIcons.Cloudy
          }
        },
        Showers: {
          height: 30,
          align: 'left',
          backgroundColor: {
            image: weatherIcons.Showers
          }
        },
        weatherHead: {
          color: '#333',
          height: 24,
          align: 'left'
        },
        hr: {
          borderColor: '#777',
          width: '100%',
          borderWidth: 0.5,
          height: 0
        },
        value: {
          width: 20,
          padding: [0, 20, 0, 30],
          align: 'left'
        },
        valueHead: {
          color: '#333',
          width: 20,
          padding: [0, 20, 0, 30],
          align: 'center'
        },
        rate: {
          width: 40,
          align: 'right',
          padding: [0, 10, 0, 0]
        },
        rateHead: {
          color: '#333',
          width: 40,
          align: 'center',
          padding: [0, 10, 0, 0]
        }
      }
    }
  },
  // ==================================================
  series: [
    {
      type: 'pie',
      radius: '65%',
      center: ['50%', '50%'],
      selectedMode: 'single',
      data: [
        {
          value: 1548,
          name: 'CityE',
          label: {
            formatter: [
              '{title|{b}}{abg|}',
              '  {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}',
              '{hr|}',
              '  {Sunny|}{value|202}{rate|55.3%}',
              '  {Cloudy|}{value|142}{rate|38.9%}',
              '  {Showers|}{value|21}{rate|5.8%}'
            ].join('
'),
            backgroundColor: '#eee',
            borderColor: '#777',
            borderWidth: 1,
            borderRadius: 4,
            rich: {
              title: {
                color: '#eee',
                align: 'center'
              },
              abg: {
                backgroundColor: '#333',
                width: '100%',
                align: 'right',
                height: 25,
                borderRadius: [4, 4, 0, 0]
              },
              Sunny: {
                height: 30,
                align: 'left',
                backgroundColor: {
                  image: weatherIcons.Sunny
                }
              },
              Cloudy: {
                height: 30,
                align: 'left',
                backgroundColor: {
                  image: weatherIcons.Cloudy
                }
              },
              Showers: {
                height: 30,
                align: 'left',
                backgroundColor: {
                  image: weatherIcons.Showers
                }
              },
              weatherHead: {
                color: '#333',
                height: 24,
                align: 'left'
              },
              hr: {
                borderColor: '#777',
                width: '100%',
                borderWidth: 0.5,
                height: 0
              },
              value: {
                width: 20,
                padding: [0, 20, 0, 30],
                align: 'left'
              },
              valueHead: {
                color: '#333',
                width: 20,
                padding: [0, 20, 0, 30],
                align: 'center'
              },
              rate: {
                width: 40,
                align: 'right',
                padding: [0, 10, 0, 0]
              },
              rateHead: {
                color: '#333',
                width: 40,
                align: 'center',
                padding: [0, 10, 0, 0]
              }
            }
          }
        },
        { value: 735, name: 'CityC' },
        { value: 510, name: 'CityD' },
        { value: 434, name: 'CityB' },
        { value: 335, name: 'CityA' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

#main {
  width: 1200px;
  height: 800px;
}

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>

<div id="main"></div>