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下添加屬性：

xAxis: [
　　{
　　　　'type':'category',
　　　　'axisLabel':{
　　　　　　formatter:function(value){
　　　　　　　　return value.split("").join("\n");
　　　　　　}
　　　　},
　　　　'data':pList,
　　　　splitLine: {show: false},

　　}
],

 

 

第三種方案

與第二種方案差不多，只是合理利用空間，增加字符展示長度（網上copy）

/**
 * <li>Echarts 中axisLabel中值太長自動換行處理；經測試：360、IE7-IE11、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]();
                    }
                }
            }
        }
    });
}