- 1、调节坐标轴x轴文字为竖直方向
xAxis:{
axisLabel: {
color: '#333',
// 让x轴文字方向为竖向
interval: 0,
formatter: function(value) {
return value.split('').join('\n')
}
}
}
如图,在该位置添加 axisLabel 配置
- 2、调节柱状图宽度
series: [
{
name: 'Forest',
type: 'bar',
barGap: 0,
label: labelOption,
<!-- 只需为series中添加一个barWidth -->
barWidth: 30
data: [320, 332, 301, 334, 390]
}
]
3、解决最左边一根坐标轴超出Y轴:
只需要将xAxis中的boundaryGap属性设置为true
xAxis: {
type: 'category',
<!-- 将下面的属性设置为true -->
boundaryGap: true,
data: [],
// 配置x轴颜色, xAxis.axisLine.lineStyle
axisLine: {
lineStyle: {
color: '#17b3a3'
}
}
- 4、解决当文字过长时,x轴标签显示不全的问题:
添加:interval: 0使标签完全显示
xAxis: {
type: 'category',
axisLabel: {
color: '#333',
// 让x轴文字方向为竖向
<!-- 设置如下属性 -->
interval: 0
// rotate: 40
// formatter: function(value) {
// return value.split('').join('\n')
// }
}
- 5、让x轴标签倾斜显示
只需在xAxis中添加rotate:40 (40是倾斜角度,任意度数都可)
xAxis: {
type: 'category',
boundaryGap: true,
data: [],
axisLabel: {
color: '#333',
// 让x轴文字方向为竖向
<!-- 设置rotate属性值 -->
rotate: 40
}
}