echarts x軸標(biāo)簽文字過多導(dǎo)致顯示不全
解決辦法1：xAxis.axisLabel 屬性
axisLabel的類型是object ,主要作用是：坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置救军。（當(dāng)然yAxis也是一樣有這個屬性的）
axisLabel: {
interval:0,
rotate:40
}
顯示不全并將文字傾斜涩笤。如圖：
稍微解釋一下interval:
坐標(biāo)軸刻度標(biāo)簽的顯示間隔(在類目軸中有效哦)，默認(rèn)會采用標(biāo)簽不重疊的方式顯示標(biāo)簽（也就是默認(rèn)會將部分文字顯示不全）
可以設(shè)置為0強制顯示所有標(biāo)簽朋譬，如果設(shè)置為1拆吆，表示隔一個標(biāo)簽顯示一個標(biāo)簽琼懊，如果為3，表示隔3個標(biāo)簽顯示一個標(biāo)簽，以此類推
rotate：標(biāo)簽傾斜的角度欢策，在類目軸的類目標(biāo)簽顯示不全時可以通過旋轉(zhuǎn)防止標(biāo)簽重疊（官方這樣說的）旋轉(zhuǎn)的角度是-90到90度
問題又來了，這個名稱x軸的文字如果太長會受到遮擋赏淌，還是顯示不全猬腰，這個時候可以用grid屬性解決
grid: { left: '10%', bottom:'35%' },
如圖：
解決辦法2：調(diào)用formatter文字垂直顯示
一般很多人都習(xí)慣辦法1的方式雖然不是很完美，但是在一定程度上還是解決了一些問題猜敢。在文字不是非常多的情況下還是可以的，感覺還沒第一種方法好
axisLabel中使用formatter回調(diào)盒延，formatter有兩個參數(shù)缩擂，使用方法是這樣的formatter:function(value,index){} ，value是類目（測試醫(yī)院A添寺，人民醫(yī)院）,index 是類目索引胯盯。
axisLabel: { interval: 0, formatter:function(value){ return value.split("").join("\n"); } }
文字豎直這個formatter實在有點太簡單化了，所以我們來做一個兩個字的加\n的換行计露。formatter如下：
axisLabel: {
fontSize: 8,
interval: 0,
formatter: function(params) {
var newParamsName = []; // 最終拼接成的字符串
var paramsNameNumber = params.length; // 實際標(biāo)簽的個數(shù)
var provideNumber = 2; // 每行能顯示的字的個數(shù)
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 換行的話博脑，需要顯示幾行，向上取整
/** * 判斷標(biāo)簽的個數(shù)是否大于規(guī)定的個數(shù)票罐， 如果大于叉趣，則進行換行處理 如果不大于，即等于或小于该押，就返回原標(biāo)簽 */
// 條件等同于rowNumber>1
if(paramsNameNumber > provideNumber) {
/** 循環(huán)每一行,p表示行 */
for(var p = 0; p < rowNumber; p++) {
var tempStr = ""; // 表示每一次截取的字符串
var start = p * provideNumber; // 開始截取的位置
var end = start + provideNumber; // 結(jié)束截取的位置
// 此處特殊處理最后一行的索引值
if(p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber); // 最后一次不換行
} else {
tempStr = params.substring(start, end); // 每一次拼接字符串并換行
}
newParamsName.push(`{p|${tempStr}}`); // 最終拼成的字符串
}
} else {
newParamsName.push(params); // 將舊標(biāo)簽的值賦給新標(biāo)簽
}
return newParamsName.join("\n"); //將最終的字符串返回
},
rich:{
p:{
align:'right'
}
}
},
效果如圖
解決辦法3：X軸類目項隔一個換行(使用formatter中index參數(shù))
都是上面的第二種方法是利用formatter中的value參數(shù)實現(xiàn)了文字拼接\n換行的疗杉，但是index參數(shù)并沒有使用，現(xiàn)在我們就一起來使用這兩個參數(shù)實現(xiàn)隔一個類目項換行蚕礼。
效果如圖：
代碼比較簡單：
axisLabel: {
interval: 0, formatter: function (value, index) {
if (index % 2 != 0) {
return '\n\n' + value;
} else {
return value;
}
}
}
``
以上幾種方法基本上能解決問題烟具，可能會有比這更好的辦法。
