断字图例 - eCharts

Question

我想打破饼图的图例文本行。

我尝试按照echarts网站的文档进行操作，但没有成功。

    legend: {
      orient: 'vertical',
      left: '50%',
      top: 'center',
      data: mydata['data']['categoriestype'],
      textStyle: {
        color: '#CAD3DF',
        fontSize: '14',
        fontFamily: 'Roboto',
        rich: {
          mychart: {
            width: '10'
          }
      },
    },
  },

Answer 1

与 ECharts 有同样的问题。如何在标题上应用宽度？

echarts 好像暂时不支持换行。

github 中有一个issue

目前不支持自动换行。所以只有 make 的文本 对文本背景的感觉。我们应该考虑到 实现自动换行，虽然并不容易。

Answer 2

5年后，我面临着同样的情况。 因此，我设法在 legendItem 中断线，只需在格式化程序返回中添加

\n

即可：如何在 echarts 折线图中标题后获取换行符？）。

然后我将 textStyle.width 设置为 150，将 itemWidth 设置为 20，以便在网格

"right"

属性中设置 170px。 我在那里发布了我的解决方法，也许会对某人有所帮助：

grid: {
  right: '170px',
},
legend: {
  type: 'plain',
  orient: 'vertical',
  itemWidth: 20,
  textStyle: {
    width: 150,
    rich: {
      fw600: {
        fontWeight: 600,
      },
    },
  },
  formatter: function (name) {
    const value = 1000;
    return `${name}:\n{fw600|${value}}`;
  }
},