echarts自动换行

### ECharts 图表标题和标签自动换行设置

对于ECharts图表中的标题或标签实现自动换行，可以采用不同的策略来适应特定的需求。

#### 标题自动换行

通过调整`title`组件内的属性，特别是`textStyle.rich`特性，能够灵活控制标题样式并间接影响其显示方式。不过针对直接的自动换行需求，在官方文档中并未给出内置的支持选项[^1]。因此一种可行的方法是预先处理要展示的文字串，将其分割成适合屏幕宽度的部分再传递给ECharts渲染：

// 假设这是原始较长的标题文本
let longTitleText = "这是一个非常长以至于无法一次性完全显示出来的测试标题";

function wrapText(text, maxWidth) {
    let words = text.split(' ');
    let lines = [];
    let currentLine = '';

    for (let word of words) {
        if ((currentLine + word).length * 12 <= maxWidth || !currentLine.length) { // 这里的12可以根据字体大小适当调整
            currentLine += `${word} `;
        } else {
            lines.push(currentLine.trim());
            currentLine = `${word} `;
        }
    }

    if (currentLine !== '') lines.push(currentLine.trim());

    return lines.join('\n');
}

option = {
    title: {
        text: wrapText(longTitleText, 300), // 调整maxWidth参数以匹配实际容器尺寸
        left: 'center',
        top: 20,
        textStyle: {
            fontSize: 16
        }
    },
};

此代码片段展示了如何自定义函数`wrapText()`用于将过长的字符串按照指定的最大宽度拆分为多行，并最终应用于ECharts实例的配置项之中。

#### X轴标签自动换行

当涉及到坐标轴上的标签时，则可以通过修改`axisLabel.formatter`回调函数的方式达到目的。这里同样采取了先计算每部分应占字符数进而决定何时插入换行符`\n`的做法[^2]:

option = {
    xAxis: [
        {
            type: 'category',
            axisLabel: {
                interval: 0,
                rotate: 0,
                formatter: function(value) {
                    var maxLengthPerLine = 8;
                    var result = '';
                    while (value.length > maxLengthPerLine) {
                        result += value.substring(0, maxLengthPerLine) + '\n';
                        value = value.substring(maxLengthPerLine);
                    }
                    result += value;

                    return result;
                }
            },
            data: ['类别一', '特别长的一类名称用来模拟真实场景下的情况']
        }
    ]
};

上述例子说明了怎样利用JavaScript内建的功能去动态改变那些可能超出预期长度的分类名，使之能够在视觉呈现上更加友好合理。