X軸、Y軸label文字過長的四種處理方式
阿新 • • 發佈:2019-01-30
1、傾斜顯示
2、換行顯示
3、豎直顯示
4、隔兩行顯示
5、原始碼
var axisLabel1 = { // 方法1:傾斜顯示 interval: 0, //強制全部顯示,1表示隔一個;2隔兩個 rotate: "45", //文字傾斜的角度 }; var axisLabel2 = { // 方法2:換行顯示 interval: 0, //強制全部顯示,1表示隔一個;2隔兩個 formatter: function(params) { var newParamsName = ""; // 最終拼接成的字串 var paramsNameNumber = params.length; // 實際標籤的個數 var provideNumber = 3; // 每行能顯示的字的個數 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; }, }; var axisLabel3 = { // 方法3:文字豎直顯示 interval: 0, //強制全部顯示,1表示隔一個;2隔兩個 formatter: function(params) { return params.split("").join("\n"); }, }; var axisLabel4 = { // 方法1:傾斜顯示 interval: 0, //強制全部顯示,1表示隔一個;2隔兩個 // 方法4:隔兩個換行 formatter: function(value, index) { if (index % 3 === 0) { return value; } else if (index % 3 === 1) { return '\n\n\n' + value; } else if (index % 3 === 2) { return '\n\n\n\n\n\n' + value; } } }; option = { tooltip: { trigger: 'axis', }, legend: { data: ['蒸發量'] }, grid: { top: 50, left: 200, right: 200, bottom: 350, //調節底部距離,防止X軸文字遮擋 }, xAxis: [{ type: 'category', data: ['1月天氣情況預報', '2月天氣情況預報', '3月天氣情況預報', '4月天氣情況預報', '5月天氣情況預報', '6月天氣情況預報', '7月天氣情況預報', '8月天氣情況預報', '9月天氣情況預報', '10月天氣情況預報', '11月天氣情況預報', '12月天氣情況預報'], axisPointer: { type: 'shadow' }, axisLabel: axisLabel1,//X軸文字樣式顯示 }], yAxis: [{ type: 'value', name: '水量', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ml' } }, ], series: [{ name: '蒸發量', type: 'bar', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, ] };
option之外重新定義各屬性,如:
1、option.grid = echartGrid1; //grid值等於echartGrid1
2、option.legend.show = true; //legend的屬性show 值為true
3、option.xAxis[0].axisLabel.rotate = 0; //這裡寫xAxis是無效的,必須寫成xAxis[0]