echarts x轴文字显示在刻度值下方
时间: 2025-01-12 16:53:36 浏览: 153
在Echarts中,默认情况下,x轴的文字是显示在刻度值下方的。如果你发现x轴的文字没有显示在刻度值下方,可以通过配置项进行调整。以下是一个示例代码,展示如何将x轴的文字显示在刻度值下方:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
show: true,
interval: 0, // 显示所有标签
rotate: 0, // 标签旋转角度
margin: 10, // 标签与刻度线的距离
textStyle: {
fontSize: 12,
color: '#000'
}
},
axisTick: {
alignWithLabel: true // 刻度线与标签对齐
}
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
};
```
在这个示例中,`axisLabel`配置项用于设置x轴标签的显示样式,`axisTick`配置项中的`alignWithLabel: true`确保刻度线与标签对齐,从而使文字显示在刻度值下方。
阅读全文
相关推荐











