ECharts横坐标标签太长解决方案
在使用 Echarts 绘制图表时，如果横坐标标题太长，会导致图表布局不协调。解决这个问题的方法有很多，包括设置坐标轴标签的角度、设置坐标轴标签的间隔、设置坐标轴标签的最大宽度和设置坐标轴标签的换行符。使用这些方法可以使图表的布局更加协调，并使图表更易于阅读。 设置标签倾斜 设置坐标轴标签的角度。可以使用 axisLabel.rotate 属性来设置坐标轴标签的角度，使其显示为斜的。 option = { grid: { containLabel: true, }, xAxis: { type: "category", data: [ "标签标签标签标签标签标签标签标签标签1", "标签标签标签标签标签标签标签标签标签2", "标签标签标签标签标签标签标签标签标签3", "标签标签标签标签标签标签标签标签标签4", "标签标签标签标签标签标签标签标签标签5", "标签标签标签标签标签标签标签标签标签6", "标签标签标签标签标签标签标签标签标签7", ], axisLabel: { rotate: 45, }, }, yAxis: { type: "value", }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: "bar", }, ], }; 设置显示间隔 设置坐标轴标签的间隔。可以使用 axisLabel.interval 属性来设置坐标轴标签的显示间隔，只显示部分标签。 option = { grid: { containLabel: true, }, xAxis: { type: "category", data: [ "标签标签标签标签标签标签标签标签标签1", "标签标签标签标签标签标签标签标签标签2", "标签标签标签标签标签标签标签标签标签3", "标签标签标签标签标签标签标签标签标签4", "标签标签标签标签标签标签标签标签标签5", "标签标签标签标签标签标签标签标签标签6", "标签标签标签标签标签标签标签标签标签7", ], axisLabel: { interval: 1, }, }, yAxis: { type: "value", }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: "bar", }, ], }; ...