關於echarts中Y軸左側文字顯示不全的解決辦法

2021-09-24 01:35:50 字數 829 閱讀 8249

今天在專案的開發中遇到的乙個問題，echarts y軸左側的文字太多了，顯示不全，由於這個問題網上的解決辦法相對較少，所以記錄一下。

先說一下網上的版本：

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

grid:
這個的缺陷很明顯，文字太多還是不管事 ，而且看起來很彆扭

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

yaxis:


return texts;}}


}
這個是比較合適的方法，將過長的文字用省略號替代了，滑鼠放到圖形上往往可以通過設定tooltip看到全稱。

但是也有乙個缺陷，當這個對應的圖形不存在，就是沒有資料的時候，你是不知道它的全稱的

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

// 專案是用vue寫的


that.chart.on('mouseover',function(e)


`)} 


})that.chart.on('mouseout',function(e)


})
css**：

.echarts_tip
其實就是通過監聽echarts的滑鼠事件，然後在進行對應的處理。對於大多數的專案來說這個可能是有點多此一舉了，因為大部分的圖表都會有對應的資料的，只需要設定tooltip就可以了。只是我的專案中遇到了這樣的問題（對應的時間段內沒有資料），記錄一下，希望能夠幫到別人吧。

echarts雙Y軸製作 vue

先引入echarts mounted methods icon rect icon rect orient level 設定標記的方向 top 10,top,left,right,bottom 用來設定標題與容器間的距離 left 250,align right 設定圖例標記和文字的對齊，auto ...

echarts中y軸設定刻度 xAxis 配置

設定echarts中y軸刻度線的樣式 在上節內容中我們提到了 echarts 中 y 軸刻度線樣式的設定，那麼在本節我們就來詳細介紹一下 yaxis 中 axistick.linestyle 所包含的樣式。所以，在下面的內容中你會看到 y 座標軸刻度線顏色的設定 型別的選擇 陰影迷糊的大小等。yax...

echarts 上下雙座標軸Y軸對齊

1.問題 不同的資料來源用同乙個布局頁面來顯示會導致對齊乙個頁面另外的頁面y軸對不齊，如下圖 圖1 圖2 後來經過觀察發現，圖1和圖二的下半部分的y軸數量座標位數不一樣，導致了長度不同，這樣的話就不行，不能夠適配其他的資料。所以就必須把上下兩個軸的y軸的數量的寬度固定下來，然後讓它們左對齊或右對齊，...