在 ECharts 中实现长文本换行显示，同时保持正向垂直排列（从上到下阅读），可以通过以下两种高效方案实现：

方案一：使用换行符 + 旋转 90°（推荐）

xAxis: {type: 'category',data: ['这是一个非常长的文本需要换行', '另一个超长标签内容示例'],axisLabel: {rotate: 90,  // 关键：逆时针旋转90度formatter: function(value) {// 自动按每3个字符换行return value.match(/.{1,3}/g).join('\n');// 或按实际宽度换行（更智能）// return value.split('').join('\n');},align: 'left',verticalAlign: 'middle',lineHeight: 16,  // 行高控制padding: [0, 0, 10, 0],  // 下边距增加空间rich: {// 可添加富文本样式a: { fontSize: 12 }}}
}

关键参数说明：

1. formatter：
   • /.{1,3}/g：每3个字符换行（适合中文字符）
   • split('').join('\n')：每个字符单独一行（垂直排列）
2. lineHeight：控制行间距（根据字体大小调整）
3. padding：增加下方间距防止文字被截断
4. rich：支持自定义文本样式

方案二：纯 CSS 样式方案（ECharts 5+）

xAxis: {axisLabel: {overflow: 'break',  // 自动换行width: 40,         // 文本块最大宽度ellipsis: '...',    // 溢出显示省略号rotate: 90,align: 'left',verticalAlign: 'middle'}
}

完整示例（带效果优化）

option = {xAxis: {type: 'category',data: ['金融科技事业部', '人工智能实验室', '全球市场发展中心','云计算与大数据研究部'],axisLabel: {rotate: 90,formatter: function(value) {// 智能换行：每4字符换行const parts = [];for (let i = 0; i < value.length; i += 4) {parts.push(value.substring(i, i + 4));}return parts.join('\n');},align: 'left',verticalAlign: 'middle',lineHeight: 18,margin: 40,  // 增大标签间距padding: [0, 0, 15, 0],  // 下方留白rich: {a: {color: '#333',fontWeight: 'bold'}}},axisTick: {alignWithLabel: true}},yAxis: { type: 'value' },series: [{data: [120, 200, 150, 80],type: 'bar',label: { show: true }}],grid: { bottom: '25%' }  // 增加底部区域防止文字溢出
};

效果优化技巧：

1. 行高控制：lineHeight 应比字体大 4-6px
2. 防溢出：

   grid: { bottom: '30%' }  // 根据文本行数调整
   

3. 长文本处理：

   formatter: value => {if (value.length > 8) {return value.substring(0, 6) + '...\n' + value.substring(6);}return value.split('').join('\n');
   }
   

4. 响应式适配：

   window.addEventListener('resize', () => {myChart.resize();// 动态调整grid.bottomoption.grid.bottom = window.innerWidth < 600 ? '40%' : '25%';myChart.setOption(option);
   });
   

不同方案效果对比：

重要提示：当文本超过 8 个字符时，建议结合 formatter 截断处理，或使用 tooltip 显示完整内容，防止布局错乱。