如何让echart的lengend在指定位置换行

hemoo2025-10-24 17:45

今天开会领导说我的图表legend太多了，能不能换行。开始以为和tooltip一样会有format那样，直接使用html就可以，没有思考就答应了。然后开始了为一句话填坑。

开始效果

实现效果

踩坑记录

后来在查找文档的时候发现了rich这个样式。说是可以改变单个legend的样式，发现了

width属性，想着我把width设置大一点不是就可以换行来(内心狂喜～～～)，设置后刷新了几次。没有得到自己想要的效果。（如果大佬们做到了，记得告诉我是什么地方出错了）！！最后看到padding属性，想着padding也可以做！最后使用了padding来完成了这个分类的效果

代码实现

js 复制代码

     legend: {
        data: legendData,
        top: 20,
        pageButtonItemGap: 5,
        pageButtonGap: 30,
        pageIconSize: 10,
        itemGap: 10,
        textStyle: {
          fontSize: 10,
        },
        selectedMode: false, // 禁用图例项的选择功能
        formatter: function (name) {
          // 为不同的图例项设置不同的样式
          if (name === '今日' || name === '历史') {
            // 分组标题样式
            return `{title|${name}:}     `;
          }else{
            // 如果字符串中包含今日就删除今日，有历史就删除历史
            return name.replace('今日', '').replace('历史', '');
          }
        },
        textStyle: {
          rich: {
            title: {
              fontWeight: 'bold',
              fontSize: 14,
              color: '#333',
              padding: [2, 300, 2, -30], // [上, 右, 下, 左]控制上下左右的，大家微调
            },
          },
        },
      },

echart的legend的例子中给的代码不正确，没有放在textStyle中！！！