echarts柱状图横轴文字过长
时间: 2023-11-15 16:57:16 浏览: 82
可以尝试以下两种方法解决:
1. 使用 xAxis.axisLabel.interval 属性设置横轴文字的显示间隔,例如:
```
xAxis: {
type: 'category',
data: ['长文字1', '长文字2', '长文字3', '长文字4', '长文字5'],
axisLabel: {
interval: 0, // 设置为 0 强制显示所有标签
rotate: -45, // 标签旋转角度
margin: 10, // 标签与轴线的距离
textStyle: {
fontSize: 12 // 标签字号
}
}
}
```
2. 使用 echarts-gl 中的 PictorialBar 图表类型,该类型支持横轴文字自动省略和换行,例如:
```
xAxis: {
type: 'category',
data: ['长文字1', '长文字2', '长文字3', '长文字4', '长文字5'],
axisLabel: {
interval: 0, // 设置为 0 强制显示所有标签
textStyle: {
fontSize: 12 // 标签字号
}
}
},
yAxis: {
type: 'value'
},
series: [{
type: 'pictorialBar',
data: [100, 200, 300, 400, 500],
symbolSize: [40, 10], // 柱子宽高
symbolOffset: [0, -5], // 柱子偏移量
z: 10 // 图层深度
}]
```
阅读全文