前言：
由于項(xiàng)目中用到了報(bào)表，選了個(gè)國內(nèi)比較流行的報(bào)表插件----echarts
在使用時(shí)發(fā)現(xiàn)X軸類目數(shù)據(jù)過長，導(dǎo)致了部分類目的名字被掩蓋，未顯示。
查了些技術(shù)資料和官方文檔，發(fā)現(xiàn)echarts的X軸如果類目名字過長，為了美觀，
默認(rèn)是選擇性的顯示的。可以設(shè)置全部顯示，及以怎樣的形式去顯示。
具體的2項(xiàng)設(shè)置就是：
interval 和 rotate
這里不再過多闡述，具體設(shè)置見下面這位前輩的文檔。
http://blog.csdn.net/kebi007/article/details/68488694
0x001:
如圖
下面主要講一下，前輩在最后提到的問題 ?及 ?解決：
如何動(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í)例級(jí)別的方法，需要通過 echarts.init 創(chuàng)建的實(shí)例去調(diào)用。
對(duì)于此方法官方這樣解釋：
獲取當(dāng)前實(shí)例中維護(hù)的option對(duì)象，返回的option對(duì)象中包含了用戶多次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對(duì)象 每個(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)，
就可以把代碼修整一下，使其變得更簡(jiǎn)潔。
代碼：
var mysubOptionxAxis_Data = mySubChart.getOption().xAxis['0'].data;
if(mysubOptionxAxis_Data.length>=3){ ? ? ? ? ? ? ? ? ? ? ? ? ? ?//重點(diǎn)為上方加粗代碼
................ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//與上方代碼一致
}}});
}
修改后，如圖
0x003:
注意
如果類目數(shù)據(jù)再長，雖然已經(jīng)設(shè)置了傾斜，但由于數(shù)據(jù)長度過長，有些仍然會(huì)被掩蓋，這時(shí)候還需要再設(shè)置 grid 選項(xiàng)，調(diào)節(jié)整個(gè)報(bào)表距離容器的邊緣即可。
前輩文章中有講到，這里不在闡述。
這里僅是給個(gè)思路，既然能拿到報(bào)表中的所有Option了，具體怎么做根據(jù)自己的需求大膽去做就好了。
0x004:
完結(jié)
