由於后台返回文字過長,所有文字顯示不夠,
會導致部分項隱藏,
限定寬度,設置過長的換行,輕松解決
xAxis: { type: "category", boundaryGap: false, axisTick: { show: false }, axisLine: { lineStyle: { color: "rgba(228,231,237,1)", type:"dashed" } }, axisLabel: { color:"rgba(95,112,132,1)", fontSize:'14', interval: 0, formatter: function(params) { var newParamsName = ""; // 最終拼接成的字符串 var paramsNameNumber = params.length; // 實際標簽的個數 var provideNumber = 7; // 每行能顯示的字的個數 var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 換行的話,需要顯示幾行,向上取整 /** * 判斷標簽的個數是否大於規定的個數, 如果大於,則進行換行處理 如果不大於,即等於或小於,就返回原標簽 */ // 條件等同於rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循環每一行,p表示行 */ 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 } }, splitLine: { lineStyle: { color: "rgba(131,101,101,0.2)", type: "dashed" } }, data: [] } ,
效果: