echarts图表坐标轴标题居中横向显示

前言

有的时候我们需要给坐标轴显示出标题，但是如果把他的位置居中就发现 标题躺下啦（竖排展示），这就很让人脑壳疼

---

前言

其实在官方的配置手册中有对标题的修改的相关内容。本次的案例中我们主要用到了 **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 
     }
   }