echarts Y轴名称显示不全，称位置调整 === X轴名称位置调整

 Y轴左侧的文字太多显示不全，坐标轴名称位置调整使用

 yAxis: { 
    name:yAxisName,
    type: 'value',
    nameTextStyle:{
       padding:[0,0,0,60]
    }
}

旋转： nameRotate, 旋转度数
名称与坐标轴间距: nameGap , 间距
大体位置调整：nameLocation, end、start、center三种选项

 

x轴也有nameTextStyle属性。

 

也可以调整grid下的left属性，说白了就是调整y轴与左侧的距离，大了就能显示更多的文字

grid:{
  top:48,
  left:400,// 调整这个属性
  right:50,
  bottom:50,
}

//缺陷很明显，文字太多还是不管事 ，而且看起来很别扭

 

也可以设置axisLabel下的formatter属性，实现自定义处理文字，将多出来的用省略号替代

yAxis:{
   axisLabel:{
   show:true,
   formatter:function(value){
                var texts=value;
                if(texts.length>15){ // 具体多少字就看自己了
                   texts=texts.substr(0,15)+'...';
                }
                return texts;
              }
   }
}

//有一个缺陷，当这个对应的图形不存在，就是没有数据的时候，不知道它的全称

 

也可以增加鼠标放置到y轴上显示悬浮框显示全称

that.chart.on('mouseover',function(e){
   const component=e.componentType;
   const value=e.value;
   const offsetX=e.event.offsetX;
   const offsetY=e.event.offsetY;
   if(component==='yAxis'){
      $('#图表的容器id').find('.echarts_tip').remove();
      $('#图表的容器id').append(`
             <div class="echarts_tip" style="top:${offsetY}px;left:${offsetX}px;">
                 ${value}
             </div>
      `)
    }
})

that.chart.on('mouseout',function(e){
   const component=e.componentType;
   if(conponent==='yAxis'){
      $('#图表的容器id').find('.echarts_tip').remove();
   }
})

// css代码

.echarts_tip{
   position:absolute;
   border-radius:5px;
   background:rgba(0,0,0,.5);
   color:#FFF;
   padding:10px 20px;
}

 

//通过监听echarts的鼠标事件，然后在进行对应的处理。对于大多数的项目来说大部分的图表都会有对应的数据的，只需要设置tooltip就可以了