echarts X軸顯示不全的處理方法(顯示完全以及換行)
更新時(shí)間：2024年01月15日 09:50:32 作者：有蟬
我們?cè)趀charts表中經(jīng)常會(huì)出現(xiàn)X軸的信息顯示不完全的情況,所以本文小編給大家介紹了echarts X軸顯示不全的處理方法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
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軸顯示不全的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文介紹了利用Array.prototype.sort方法和Math.random()實(shí)現(xiàn)快速打亂數(shù)組的方法，大家參考使用吧2014-01-01
收集的一些Array及String原型對(duì)象的擴(kuò)展實(shí)現(xiàn)代碼
收集的一些Array及String原型對(duì)象的擴(kuò)展實(shí)現(xiàn)代碼，學(xué)習(xí)js的朋友可以參考下。并可以自定義的對(duì)字符串與array數(shù)據(jù)，進(jìn)行擴(kuò)展。2010-12-12
詳解JavaScript中8 種不同的繼承實(shí)現(xiàn)方式
在 JavaScript 中,繼承是實(shí)現(xiàn)代碼復(fù)用和構(gòu)建復(fù)雜對(duì)象關(guān)系的重要機(jī)制,雖然 JavaScript 是一門基于原型的語(yǔ)言,不像傳統(tǒng)面向?qū)ο笳Z(yǔ)言那樣有類的概念,但它提供了多種實(shí)現(xiàn)繼承的方式,本文將詳細(xì)介紹 JavaScript 中 8 種不同的繼承實(shí)現(xiàn)方式,需要的朋友可以參考下2025-05-05
JavaScript列表框listbox全選和反選的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript列表框listbox全選和反選的實(shí)現(xiàn)方法,涉及javascript操作列表框listbox的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
JS計(jì)算兩個(gè)時(shí)間相差分鐘數(shù)的方法示例
這篇文章主要介紹了JS計(jì)算兩個(gè)時(shí)間相差分鐘數(shù)的方法,結(jié)合完整實(shí)例形式分析了javascript針對(duì)日期時(shí)間的轉(zhuǎn)換與計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)復(fù)選框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
基于RequireJS和JQuery的模塊化編程——常見(jiàn)問(wèn)題全面解析
下面小編就為大家?guī)?lái)一篇基于RequireJS和JQuery的模塊化編程——常見(jiàn)問(wèn)題全面解析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
簡(jiǎn)單實(shí)現(xiàn)JS對(duì)dom操作封裝
這篇文章主要介紹了簡(jiǎn)單實(shí)現(xiàn)JS對(duì)dom操作封裝，需要的朋友可以參考下2015-12-12
本文介紹了JavaScript中三種常見(jiàn)的數(shù)組操作方法,push()、unshift()和splice(),通過(guò)具體實(shí)例展示了如何利用這些方法在數(shù)組的不同位置添加元素,以及如何使用splice()進(jìn)行元素的刪除,感興趣的朋友跟隨小編一起看看吧2025-08-08
JavaScript常見(jiàn)的函數(shù)中的屬性與方法總結(jié)
當(dāng)定義和調(diào)用函數(shù)時(shí)，JavaScript?函數(shù)對(duì)象會(huì)自動(dòng)具有一些特定的屬性，本文為大家總結(jié)了一些常見(jiàn)的屬性和方法，感興趣的小伙伴可以了解一下2023-05-05