Echarts 標(biāo)簽中文本內(nèi)容太長(zhǎng)的時(shí)候怎么辦 ?
- 1對(duì)文本進(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)簽的顯示間隔(在類(lèi)目軸中有效哦),默認(rèn)會(huì)采用標(biāo)簽不重疊的方式顯示標(biāo)簽(也就是默認(rèn)會(huì)將部分文字顯示不全)
可以設(shè)置為0強(qiáng)制顯示所有標(biāo)簽,如果設(shè)置為1,表示隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽,如果為3,表示隔3個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽,以此類(lèi)推
一開(kāi)始我沒(méi)設(shè)置 因?yàn)闃?biāo)簽文本過(guò)長(zhǎng)的原因他就自動(dòng)不顯示全部
被遮擋住就讓grid 組件離容器向上移動(dòng) 把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)簽的個(gè)數(shù)是否大于規(guī)定的個(gè)數(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.文字豎直顯示
同樣和換行一個(gè)道理,只是這個(gè)是單個(gè)文字換行
在xAxis.axisLabel中 使用formatter回調(diào)函數(shù)實(shí)現(xiàn)換行
axisLabel: { interval: 0,
formatter:function(value) {
return value.split("").join("\n"); } }
-
4.隔一個(gè)換行
在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è)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)