echarts X軸顯示不全的處理方法(顯示完全以及換行)
echarts X軸顯示不全 如下圖
如何處理
首先,設(shè)置 interval: 0,如下
xAxis: { type: "category", axisLabel: { //x軸文字的配置 show: true, interval: 0,//使x軸文字顯示全 } }
效果圖如下:明顯重疊
解決:使用formatter 換行顯示,處理如下
axisLabel: { //x軸文字的配置 show: true, interval: 0,//使x軸文字顯示全 textStyle: { color: "rgba(219, 225, 255, 1)" }, formatter: function(params) { var newParamsName = ""; var paramsNameNumber = params.length; var provideNumber = 3; //一行顯示幾個(gè)字 var rowNumber = Math.ceil(paramsNameNumber / provideNumber); if (paramsNameNumber > provideNumber) { for (var p = 0; p < rowNumber; p++) { var tempStr = ""; var start = p * provideNumber; var end = start + provideNumber; if (p == rowNumber - 1) { tempStr = params.substring(start, paramsNameNumber); } else { tempStr = params.substring(start, end) + "\n"; } newParamsName += tempStr; } } else { newParamsName = params; } return newParamsName; } } },
效果如下圖
以上就是echarts X軸顯示不全的處理方法(顯示完全以及換行)的詳細(xì)內(nèi)容,更多關(guān)于echarts X軸顯示不全的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js獲取checkbox復(fù)選框選中的選項(xiàng)實(shí)例
這篇文章主要介紹了js如何獲取checkbox復(fù)選框選中的選項(xiàng),比較適合新手,需要的朋友可以參考下2014-08-08Javascript點(diǎn)擊其他任意地方隱藏關(guān)閉DIV實(shí)例
這篇文章主要分享一個(gè)Javascript點(diǎn)擊其他任意地方隱藏關(guān)閉DIV實(shí)例,需要的朋友可以參考下。2016-06-06JavaScript中使用webuploader實(shí)現(xiàn)上傳視頻功能(demo)
這篇文章主要介紹了webuploader實(shí)現(xiàn)上傳視頻功能,通過本文給大家介紹了上傳視頻和上傳圖片的區(qū)別講解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-04-04如何利用JavaScript獲取字符串中重復(fù)次數(shù)最多的字符
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript獲取字符串中重復(fù)次數(shù)最多的字符的相關(guān)資料,文中介紹了兩種解決方案,分別是使用對象以及數(shù)組&指針來實(shí)現(xiàn),需要的朋友可以參考下2021-07-07webpack打包優(yōu)化的幾個(gè)方法總結(jié)
這篇文章主要介紹了webpack打包優(yōu)化的幾個(gè)方法總結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02(function(){})()的用法與優(yōu)點(diǎn)
(function(){})()的用法與優(yōu)點(diǎn)...2007-03-03JavaScript?設(shè)計(jì)模式中的代理模式詳解
這篇文章主要介紹了JavaScript?設(shè)計(jì)模式中的代理模式詳解,代理模式,代理是一個(gè)對象,它可以用來控制對另一個(gè)對象的訪問,更多相關(guān)內(nèi)容需要的朋友可以參考一下2022-07-07js動(dòng)態(tài)修改表格行colspan列跨度的方法
這篇文章主要介紹了js動(dòng)態(tài)修改表格行colspan列跨度的方法,實(shí)例分析了javascript動(dòng)態(tài)修改html中table屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03