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就可以了