echarts Y軸名稱顯示不全（轉載）

轉載來源：https://blog.csdn.net/qq8241994/article/details/90720657
今天在項目的開發中遇到的一個問題，echarts Y軸左側的文字太多了，顯示不全，因爲這個問題網上的解決辦法相對較少，因此記錄一下。

先說一下網上的版本：

1.調整grid下的left屬性，說白了就是調整y軸與左側的距離，大了就能顯示更多的文字

grid:{
top:48,
left:400,// 調整這個屬性
right:50,
bottom:50,
}
這個的缺陷很明顯，文字太多仍是無論事 ，並且看起來很彆扭

2.經過設置axisLabel下的formatter屬性，實現自定義處理文字，將多出來的用省略號替代

yAxis:{
axisLabel:{
show:true,
formatter:function(value){
var texts=value;
if(texts.length>15){ // 具體多少字就看本身了
texts=texts.substr(0,15)+'...';
}
return texts;
}
}
}
這個是比較合適的方法，將過長的文字用省略號替代了，鼠標放到圖形上每每能夠經過設置tooltip看到全稱。

可是也有一個缺陷，當這個對應的圖形不存在，就是沒有數據的時候，你是不知道它的全稱的

3.這個就是針對上面所說的缺陷所進行的處理，增長鼠標放置到y軸上顯示懸浮框顯示全稱

// 項目是用vue寫的
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就能夠了。只是個人項目中遇到了這樣的問題（對應的時間段內沒有數據），記錄一下，但願可以幫到別人吧。

 

echarts相關問題：

Y軸名稱顯示不全

https://blog.csdn.net/qq8241994/article/details/90720657

Y軸刻度標籤顯示不全
https://blog.csdn.net/dandelion_drq/article/details/79270597

Y軸刻度標籤名稱替換

https://www.cnblogs.com/conserdao/p/6911048.html