下面主要讲一下,前辈在最后提到的问题 及 解决:
如何动态去设置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) { //重点为上方加粗代码
................ //与上方代码一致
}
}
});
}
修改后,如图