Echarts 標(biāo)簽中文本內(nèi)容太長的時候怎么辦 ? 
- 1對文本進(jìn)行傾斜 
在xAxis.axisLabe中修改rotate的值
    
 xAxis: {
            data: ["襯衫11111","羊毛二二","雪紡衫111","褲子111","高跟鞋11","襪子111"], name:"123", nameLocation:'end', axisLabel : { interval:0, rotate:"45" }
        },
    
    
        interval
    
    
        坐標(biāo)軸刻度標(biāo)簽的顯示間隔(在類目軸中有效哦),默認(rèn)會采用標(biāo)簽不重疊的方式顯示標(biāo)簽(也就是默認(rèn)會將部分文字顯示不全) 
可以設(shè)置為0強(qiáng)制顯示所有標(biāo)簽,如果設(shè)置為1,表示隔一個標(biāo)簽顯示一個標(biāo)簽,如果為3,表示隔3個標(biāo)簽顯示一個標(biāo)簽,以此類推
    
    
        一開始我沒設(shè)置 因?yàn)闃?biāo)簽文本過長的原因他就自動不顯示全部 
 
    
    
        被遮擋住就讓grid 組件離容器向上移動 把grid中的bottom的值調(diào)大一些
    
 grid: show:true left:"20%" right:"30px",
            borderColor:"#c45455" bottom:"20%" },
    
    
         
 
- 2.換行顯示 
在xAxis.axisLabel中 使用formatter回調(diào)函數(shù)實(shí)現(xiàn)換行
    
 axisLabel : { formatter : function(params){ var newParamsName = ""; var paramsNameNumber = params.length; var provideNumber = 4; var rowNumber = Math.ceil(paramsNameNumber / provideNumber); /**
                             * 判斷標(biāo)簽的個數(shù)是否大于規(guī)定的個數(shù), 如果大于,則進(jìn)行換行處理 如果不大于,即等于或小于,就返回原標(biāo)簽
                             */  if (paramsNameNumber > provideNumber) { /** 循環(huán)每一行,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
                }
            }
    
        - 
            1
        
- 
            2
        
- 
            3
        
- 
            4
        
- 
            5
        
- 
            6
        
- 
            7
        
- 
            8
        
- 
            9
        
- 
            10
        
- 
            11
        
- 
            12
        
- 
            13
        
- 
            14
        
- 
            15
        
- 
            16
        
- 
            17
        
- 
            18
        
- 
            19
        
- 
            20
        
- 
            21
        
- 
            22
        
- 
            23
        
- 
            24
        
- 
            25
        
- 
            26
        
- 
            27
        
- 
            28
        
- 
            29
        
- 
            30
        
- 
            31
        
- 
            32
        
- 
            33
        
- 
            34
        
- 
            35
        
- 
            36
        
         
    
    
        - 
            3.文字豎直顯示 
 同樣和換行一個道理,只是這個是單個文字換行
 在xAxis.axisLabel中 使用formatter回調(diào)函數(shù)實(shí)現(xiàn)換行
axisLabel: { interval: 0,  
                               formatter:function(value) {  
                                   return value.split("").join("\n"); } } 
    
    
         
    
    
        - 
            4.隔一個換行 
 在xAxis.axisLabel中 使用formatter回調(diào)函數(shù)實(shí)現(xiàn)換行
axisLabel : { clickable:true, interval : 0,
                formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params;
                    } else { return params;
                    }
                }
            }
    
        - 
            1
        
- 
            2
        
- 
            3
        
- 
            4
        
- 
            5
        
- 
            6
        
- 
            7
        
- 
            8
        
- 
            9
        
- 
            10
        
- 
            11
        
- 
            12
        
- 
            13
        
         
    
藍(lán)藍(lán)設(shè)計( m.monmeltingpot.net )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)