Echarts-axislabel文字過長致使顯示不全或重疊

先看兩張圖

 

按目前狀況，官方併爲對axislabel的高度或者寬度作調整。因此解決方案只能從其餘方案下手

解決方案有幾種

 

第一種爲上圖解決方案

設置grid屬性定義圖的大小來釋放空間，使得axislabel有足夠的空間

/** 參數傳值所有爲數組
 * @param names x軸值
 * @param xycounts 
 * @param zscounts
 * @param xypjjlrs
 * @param zspjjlrs
 */
function drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs){
    //console.log(zspjjlrs);
    var myChart = echarts.init(document.getElementById('main2'));
    myChart.setOption({
        title : {
            text : ""
        },
        tooltip : {
            trigger : 'axis',
            showDelay : 0, // 顯示延遲，添加顯示延遲能夠避免頻繁切換，單位ms
            axisPointer : {            // 座標軸指示器，座標軸觸發有效
                type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
            }
        },
        legend: {
            data:['作市','協議','作市平均淨利潤(萬元)','協議平均淨利潤(萬元)']
        },
        xAxis : [
                 {
                     type : 'category',
                     axisLabel:{
                           interval:0,
                         rotate:45,
                         margin:2,
                         textStyle:{
                             color:"#222"
                         }
                     },
                     data : names
                 }
             ],
         grid: { // 控制圖的大小，調整下面這些值就能夠， x: 40, x2: 100, y2: 150,// y2能夠控制 X軸跟Zoom控件之間的間隔，避免覺得傾斜後形成 label重疊到zoom上 },
        yAxis : [
                 {
                     type : 'value',
                     name : '企業數量',
                     axisLabel : {
                         formatter: '{value}'
                     }
                 },
                 {
                     type : 'value',
                     name : '淨利潤(萬元)',
                     axisLabel : {
                         formatter: format_w
                     }
                 }],
        series : [

                  {
                      name:'作市',
                      type:'bar',
                      stack: '總量',
                      /*itemStyle : { 
                          normal: {
                              label : {
                                  show: true,
                                   position: 'insideTop',
                                  textStyle:{
                                      color:'#000'
                                  }
                              }
                          }
                      },*/
                      
                      data:zscounts
                  },
                  {
                      name:'協議',
                      type:'bar',
                      stack: '總量',
                      barWidth : 10,
                      /*itemStyle : { 
                          normal: {
                              label : {
                                  show: true, 
                                  position: 'insideTop',
                                  textStyle:{
                                      color:'#000'
                                  }
                              }
                          }
                      },*/
                      data:xycounts
                  },
                  {
                      name:'作市平均淨利潤(萬元)',
                      type:'line',
                      yAxisIndex: 1,
                      data:zspjjlrs
                  },
                  {
                      name:'協議平均淨利潤(萬元)',
                      type:'line',
                      yAxisIndex: 1,
                      data:xypjjlrs
                  }
              ]
    });
}

 

調用方式

//console.log(data);
            var names=[];
            var xycounts=[];
            var zscounts=[];
            var xypjjlrs=[];
            var zspjjlrs=[];
            for(var i=(data.list.length-1);i>=0;i--){
                names.push(data.list[i].name);
                xycounts.push(data.list[i].xycount == null ?0:data.list[i].xycount);
                zscounts.push(data.list[i].zscount == null ?0:data.list[i].zscount);
                xypjjlrs.push(data.list[i].xypjjlr == null ?0.00:(data.list[i].xypjjlr/10000).toFixed(2));
                zspjjlrs.push(data.list[i].zspjjlr == null ?0.00:(data.list[i].zspjjlr/10000).toFixed(2));
            }
            drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs);

 

 

 

第二種方式

當文字不是特別長的狀況下可設置文字自動換行，調用函數解決

在axisLabel下添加屬性：

formatter:function(val){
    return val.split("").join("\n");
}

 

 

第三種方案

與第二種方案差很少，只是合理利用空間，增長字符展現長度（網上copy）

/**
 * <li>Echarts 中axisLabel中值太長自動換行處理；經測試：360、IE7-IE十一、google、火狐  * 均能正常換行顯示</li>
 * <li>處理echarts 柱狀圖 x 軸數據顯示根據柱子間隔距離自動換行顯示</li>
 * @param title             將要換行處理x軸值
 * @param data              
 * @param fontSize          x軸數據字體大小，根據圖片字體大小設置而定，此處內部默認爲12 
 * @param barContainerWidth         柱狀圖初始化所在的外層容器的寬度
 * @param xWidth            柱狀圖x軸左邊的空白間隙 x 的值，詳見echarts文檔中grid屬性，默認80
 * @param x2Width           柱狀圖x軸郵編的空白間隙 x2 的值，詳見echarts文檔中grid屬性，默認80
 * @param insertContent     每次截取後要拼接插入的內容， 不傳則默認爲換行符：\n
 * @returns titleStr        截取拼接指定內容後的完整字符串
 * @author lixin
 */
function getEchartBarXAxisTitle(title, datas, fontSize, barContainerWidth, xWidth, x2Width, insertContent){
     
    if(!title || title.length == 0) {
        alert("截取拼接的參數值不能爲空！");return false;
    }
    if(!datas || datas.length == 0) {
        alert("用於計算柱狀圖柱子個數的參數datas不合法！"); return false;
    }
    if(isNaN(barContainerWidth)) {
        alert("柱狀圖初始化所在的容器的寬度不是一個數字");return false;
    }
    if(!fontSize){
        fontSize = 12;
    }
    if(isNaN(xWidth)) {
        xWidth = 80;//默認與echarts的默認值一致
    }
    if(isNaN(x2Width)) {
        xWidth = 80;//默認與echarts的默認值一致
    }
    if(!insertContent) {
        insertContent = "\n";
    }
     
    var xAxisWidth =  parseInt(barContainerWidth) - (parseInt(xWidth) + parseInt(x2Width));//柱狀圖x軸寬度=統計頁面寬度-柱狀圖x軸的空白間隙(x + x2)
    var barCount = datas.length;                                //x軸單元格的個數（即爲獲取x軸的數據的條數）
    var preBarWidth = Math.floor(xAxisWidth / barCount);        //統計x軸每一個單元格的間隔
    var preBarFontCount = Math.floor(preBarWidth / fontSize) ;  //柱狀圖每一個柱所在x軸間隔能容納的字數 = 每一個柱子 x 軸間隔寬度 / 每一個字的寬度（12px）
    if(preBarFontCount > 3) {    //爲了x軸標題顯示美觀，每一個標題顯示留兩個字的間隙，如：本來一個格能同樣顯示5個字，處理後一行就只顯示3個字
        preBarFontCount -= 2;
    } else if(preBarFontCount <= 3 && preBarFontCount >= 2) {//若每一個間隔距離恰好能放兩個或者字符時，則讓其只放一個字符
        preBarFontCount -= 1;
    }
     
    var newTitle = "";      //拼接每次截取的內容，直到最後爲完整的值
    var titleSuf = "";      //用於存放每次截取後剩下的部分
    var rowCount = Math.ceil(title.length / preBarFontCount);   //標題顯示須要換行的次數 
    if(rowCount > 1) {       //標題字數大於柱狀圖每一個柱子x軸間隔所能容納的字數，則將標題換行
        for(var j = 1; j <= rowCount; j++) {
            if(j == 1) {
                 
                newTitle += title.substring(0, preBarFontCount) + insertContent;
                titleSuf = title.substring(preBarFontCount);    //存放將截取後剩下的部分，便於下次循環從這剩下的部分中又從頭截取固定長度
            } else {
                 
                var startIndex = 0;
                var endIndex = preBarFontCount;
                if(titleSuf.length > preBarFontCount) {  //檢查截取後剩下的部分的長度是否大於柱狀圖單個柱子間隔所容納的字數
                     
                    newTitle += titleSuf.substring(startIndex, endIndex) + insertContent;
                    titleSuf = titleSuf.substring(endIndex);    //更新截取後剩下的部分，便於下次繼續從這剩下的部分中截取固定長度
                } else if(titleSuf.length > 0){
                    newTitle += titleSuf.substring(startIndex);
                }
            }
        }
    } else {
        newTitle = title;
    }
    return newTitle;
}
 
/**
 * 滾動瀑布加載函數
 * @param opts{selector: "#id"（須要滾動瀑布加載的元素選擇器）, fn: getUserInfo（瀑布加載時的回調函數方法名）, fnParams: param（參數）}    
 */
function scrollLoad(opts){
     
    var options = {
        selector: null,
        fn: null,
        fnParams: null
    };
     
    options =$.extend(true, options, opts);
     
    var selector = options.selector;
    var callbackFn = options.fn;
    var fnParams = options.fnParams;
     
    if(selector == null || selector == "" || selector == "undefined") {
        console.info("瀑布加載元素選擇器不能爲空！");return false;
    }
    if(callbackFn == null || callbackFn == "" || callbackFn == "undefined") {
        console.info("瀑布加載回調函數不能爲空！");return false;
    }
     
    var loadCompleted = true;   //當前元素是否已經加載完成，true：未完成，false：完成
    $(top.window).scroll(function(){
         
        var winheight = $(top.window).height();
        var scheight = $(top.window).scrollTop();
         
        if ($(selector).offset().top <= (winheight + scheight) && loadCompleted) {
//          console.info($(selector).offset().top+"===winH="+(winheight + scheight)+"====t="+new Date().getTime());
             
            loadCompleted = false;
            if(typeof(callbackFn) == "function") {
//              console.info("load " + callbackFn.name + "!!!");//~
 
                if(fnParams) {
                    callbackFn(fnParams);
                } else {
                    callbackFn();
                }
            } else if(callbackFn instanceof Array) {    //若回調函數指定了多個方法
                for(var i = 0; i< callbackFn.length; i++) {
//                  console.info("load " + callbackFn[i].name + "!!!");//~
 
                    if(fnParams) {
                        callbackFn[i](fnParams);
                    } else {
                        callbackFn[i]();
                    }
                }
            }
        }
    });
}