前言：
由于项目中用到了报表，选了个国内比较流行的报表插件----echarts
在使用时发现X轴类目数据过长，导致了部分类目的名字被掩盖，未显示。
查了些技术资料和官方文档，发现echarts的X轴如果类目名字过长，为了美观，
默认是选择性的显示的。可以设置全部显示，及以怎样的形式去显示。
具体的2项设置就是：
interval 和 rotate
这里不再过多阐述，具体设置见下面这位前辈的文档。
http://blog.csdn.net/kebi007/article/details/68488694
0x001:
如图
下面主要讲一下，前辈在最后提到的问题 及 解决：
如何动态去设置X轴类目的显示、隐藏与倾斜 (因为在本项目中也有这样的需求)
问题：
X轴类目的数据是动态显示的，一两个的时候没有必要去倾斜；
多个的时候必须倾斜且全部显示；
多个且每个类目的数据更长时的解决。
解决：
echarts中有这样一个方法可以
获取全部设置的option---->echartsInstance.getOption()
该方法是echarts实例级别的方法，需要通过 echarts.init 创建的实例去调用。
对于此方法官方这样解释：
获取当前实例中维护的option对象，返回的option对象中包含了用户多次setOption合并得到的配置项和数据；
注意：返回的 option 每个组件的属性值都统一是一个数组。
以及重新设置option的方法---->setOption()
有了它们，就能拿到X轴类目的数据，之后再根据X轴类目数量动态设置显示的方式
0x002: 代码
var mysubOption = mySubChart.getOption();
//获取option所有数据(返回的option对象 每个组件的属性值都统一是一个数组)
var mysubOptionxAxis = mysubOption.xAxis; //获取option中的xAxis
var mysubOptionxAxis_Data = mysubOptionxAxis['0'].data;
//获取option中xAxis 的 data(即报表X轴中的数据)
if(mysubOptionxAxis_Data.length>=3){ //根据类目的个数动态设置
mySubChart.setOption({
xAxis:{
axisLabel:{
interval:0, // 0 横轴信息强制显示所有标签
rotate:-10 //刻度标签旋转的角度
}}});
}
为了理解，上面是一步一步来的，知道了每个数据的结构(Map还是Array)，
就可以把代码修整一下，使其变得更简洁。
代码：
var mysubOptionxAxis_Data = mySubChart.getOption().xAxis['0'].data;
if(mysubOptionxAxis_Data.length>=3){ //重点为上方加粗代码
................ //与上方代码一致
}}});
}
修改后，如图
0x003:
注意
如果类目数据再长，虽然已经设置了倾斜，但由于数据长度过长，有些仍然会被掩盖，这时候还需要再设置 grid 选项，调节整个报表距离容器的边缘即可。
前辈文章中有讲到，这里不在阐述。
这里仅是给个思路，既然能拿到报表中的所有Option了，具体怎么做根据自己的需求大胆去做就好了。
0x004:
完结
网友评论