前言
有的时候我们需要给坐标轴显示出标题,但是如果把他的位置居中就发现 标题躺下啦(竖排展示),这就很让人脑壳疼
前言
其实在官方的配置手册中有对标题的修改的相关内容。本次的案例中我们主要用到了 **name**、**nameTextStyle**、** nameLocation**以及 **nameRotate** 这几个配置项-
说明属性
- name : 就不用多说了。标题名称
- nameTextStyle : 标题的样式()
- nameLocation :标题显示的位置
- nameRotate :标题旋转的角度
先看效果图:
配置介绍
y轴配置如下:
yAxis: {
type: 'value',
name:'COP',
nameRotate:0, // 标题旋转的角度,标题居中显示的时候 默认旋转90°当旋转角度为0度的时候就横向显示了
nameTextStyle:{
fontSize:18,// 字体大小
fontWeight: 400, // 字体粗细
color: "#333333",// 字体颜色
padding: [0, 35, 0, 0], // 可以调整标题距离坐标轴的距离 [上,右,下,左]
},
nameLocation:'center', // 标题显示的位置
axisLine:{
show: true,
lineStyle:{
width: 5,
color:'rgba(255, 255, 255, 0.8)',
shadowColor : 'rgba(200, 201, 204, 0.5)',
shadowOffsetX: 2
}
},
axisTick:{
show: false,
},
splitLine:{
show: false,
},
axisLabel:{
show:true
}
}