xAxis: {
            data: ["襯衫11111","羊毛二二","雪紡衫111","褲子111","高跟鞋11","襪子111"],//x軸中的數(shù)據(jù) name:"123",//坐標(biāo)軸名稱。 nameLocation:'end',//坐標(biāo)軸名稱顯示位置。 axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。 interval:0, rotate:"45" }
        },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

interval

坐標(biāo)軸刻度標(biāo)簽的顯示間隔(在類目軸中有效哦)，默認(rèn)會采用標(biāo)簽不重疊的方式顯示標(biāo)簽（也就是默認(rèn)會將部分文字顯示不全） 
可以設(shè)置為0強(qiáng)制顯示所有標(biāo)簽，如果設(shè)置為1，表示隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽，如果為3，表示隔3個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽，以此類推

一開始我沒設(shè)置 因?yàn)闃?biāo)簽文本過長的原因他就自動(dòng)不顯示全部 

被遮擋住就讓grid 組件離容器向上移動(dòng) 把grid中的bottom的值調(diào)大一些

 grid:{//直角坐標(biāo)系內(nèi)繪圖網(wǎng)格 show:true,//是否顯示直角坐標(biāo)系網(wǎng)格。[ default: false ] left:"20%",//grid 組件離容器左側(cè)的距離。 right:"30px",
            borderColor:"#c45455",//網(wǎng)格的邊框顏色 bottom:"20%" // },

• 1
• 2
• 3
• 4
• 5
• 6
• 7

 
- 2.換行顯示 
在xAxis.axisLabel中 使用formatter回調(diào)函數(shù)實(shí)現(xiàn)換行

 axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。 formatter : function(params){ var newParamsName = "";// 最終拼接成的字符串 var paramsNameNumber = params.length;// 實(shí)際標(biāo)簽的個(gè)數(shù) var provideNumber = 4;// 每行能顯示的字的個(gè)數(shù) var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 換行的話，需要顯示幾行，向上取整 /**
                             * 判斷標(biāo)簽的個(gè)數(shù)是否大于規(guī)定的個(gè)數(shù)， 如果大于，則進(jìn)行換行處理 如果不大于，即等于或小于，就返回原標(biāo)簽
                             */ // 條件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循環(huán)每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * provideNumber;// 開始截取的位置 var end = start + provideNumber;// 結(jié)束截取的位置 // 此處特殊處理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不換行 tempStr = params.substring(start, paramsNameNumber);
                                    } else { // 每一次拼接字符串并換行 tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最終拼成的字符串 }

                            } else { // 將舊標(biāo)簽的值賦給新標(biāo)簽 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.文字豎直顯示 
  同樣和換行一個(gè)道理,只是這個(gè)是單個(gè)文字換行 
  在xAxis.axisLabel中 使用formatter回調(diào)函數(shù)實(shí)現(xiàn)換行

axisLabel: { interval: 0,  
                               formatter:function(value) {  
                                   return value.split("").join("\n"); } } 

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 4.隔一個(gè)換行 
  在xAxis.axisLabel中 使用formatter回調(diào)函數(shù)實(shí)現(xiàn)換行

axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。 clickable:true,//并給圖表添加單擊事件  根據(jù)返回值判斷點(diǎn)擊的是哪里 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