下面主要講一下添谊,前輩在最后提到的問題 ?及 ?解決:
如何動(dòng)態(tài)去設(shè)置X軸類目的顯示谭胚、隱藏與傾斜?(因?yàn)樵诒卷?xiàng)目中也有這樣的需求)
問題:
X軸類目的數(shù)據(jù)是動(dòng)態(tài)顯示的扩淀,一兩個(gè)的時(shí)候沒有必要去傾斜;
多個(gè)的時(shí)候必須傾斜且全部顯示柬姚;
多個(gè)且每個(gè)類目的數(shù)據(jù)更長時(shí)的解決讲竿。
解決:
echarts中有這樣一個(gè)方法可以
獲取全部設(shè)置的option---->echartsInstance.getOption()
該方法是echarts實(shí)例級別的方法泥兰,需要通過 echarts.init 創(chuàng)建的實(shí)例去調(diào)用弄屡。
對于此方法官方這樣解釋:
獲取當(dāng)前實(shí)例中維護(hù)的option對象,返回的option對象中包含了用戶多次setOption合并得到的配置項(xiàng)和數(shù)據(jù)鞋诗;
注意:返回的 option 每個(gè)組件的屬性值都統(tǒng)一是一個(gè)數(shù)組膀捷。
以及重新設(shè)置option的方法---->setOption()
有了它們,就能拿到X軸類目的數(shù)據(jù)削彬,之后再根據(jù)X軸類目數(shù)量動(dòng)態(tài)設(shè)置顯示的方式
0x002: ??代碼
var mysubOption = mySubChart.getOption();
?//獲取option所有數(shù)據(jù)(返回的option對象 每個(gè)組件的屬性值都統(tǒng)一是一個(gè)數(shù)組)
var mysubOptionxAxis = mysubOption.xAxis;//獲取option中的xAxis
var mysubOptionxAxis_Data = mysubOptionxAxis['0'].data;
//獲取option中xAxis 的 data(即報(bào)表X軸中的數(shù)據(jù))
if(mysubOptionxAxis_Data.length>=3){ ? ? ? ? ? ? ? ? ? //根據(jù)類目的個(gè)數(shù)動(dòng)態(tài)設(shè)置
mySubChart.setOption({
xAxis:{
axisLabel:{
interval:0,? ? ? ? ? ? ? ? ? // 0 橫軸信息強(qiáng)制顯示所有標(biāo)簽
rotate:-10? ? ? ? ? ? ? ? ? //刻度標(biāo)簽旋轉(zhuǎn)的角度
}}});
}
為了理解全庸,上面是一步一步來的,知道了每個(gè)數(shù)據(jù)的結(jié)構(gòu)(Map還是Array)融痛,
就可以把代碼修整一下壶笼,使其變得更簡潔。
代碼:
var mysubOptionxAxis_Data = mySubChart.getOption().xAxis['0'].data;
if (mysubOptionxAxis_Data.length >= 3) { //重點(diǎn)為上方加粗代碼
................ //與上方代碼一致
}
}
});
}
修改后酌心,如圖