echarts图表 category 的底部xAxis展示文字太长，改为斜着展示
原创
echarts图表 category 的底部xAxis展示文字太长，改为斜着展示
原创
小焱
发布于 2025-07-30 11:25:52
发布于 2025-07-30 11:25:52
在 ECharts 中，当 xAxis 为类目轴（category）且底部展示的文字太长时，将文字斜着展示，可以通过配置 axisLabel 的 rotate 属性来实现。以下是不同图表类型（以柱状图和折线图为例）的具体配置方法：
柱状图示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 柱状图 xAxis 文字斜着展示</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
type: 'category',
data: ['非常长的类目名称1', '非常长的类目名称2', '非常长的类目名称3', '非常长的类目名称4', '非常长的类目名称5'],
axisLabel: {
rotate: 45, // 设置文字旋转角度，单位为度，这里设置为45度，可根据实际需求调整
fontSize: 12,
margin: 10 // 文字与轴线的距离，防止文字与图形重叠
}
},
yAxis: {
type: 'value'
},
series: [{
data: [10, 20, 30, 40, 50],
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>折线图示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 折线图 xAxis 文字斜着展示</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
type: 'category',
data: ['又长又复杂的类目名A', '又长又复杂的类目名B', '又长又复杂的类目名C', '又长又复杂的类目名D', '又长又复杂的类目名E'],
axisLabel: {
rotate: -30, // 这里设置为-30度，负角度表示逆时针旋转，可按需调整
fontSize: 12,
margin: 10,
// 还可以通过 formatter 自定义文本显示格式
// formatter: function (value) {
// return value.substr(0, 5) + '...'; // 截取前5个字符并添加省略号
// }
}
},
yAxis: {
type: 'value'
},
series: [{
data: [15, 22, 28, 35, 42],
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>相关说明
rotate参数：可以设置任意角度值，正数表示顺时针旋转，负数表示逆时针旋转。通过调整该值，找到文字显示效果最佳的倾斜角度，让图表看起来更加美观和易读。margin参数：用于控制文字与轴线之间的距离，当文字旋转后，可能会与图表中的图形产生重叠，此时可以通过增大margin值来避免这种情况。formatter函数：除了设置旋转角度，还可以结合axisLabel.formatter来自定义类目轴文字的显示内容，比如进行文字截断、添加特殊符号等操作，进一步优化显示效果。
此外，如果在响应式布局中使用 ECharts 图表，当容器尺寸发生变化时，可能需要动态调整 rotate 的值以保证文字的显示效果，这可以通过监听窗口的 resize 事件，并重新设置 ECharts 配置项来实现。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
