【原】echarts 如何获取X轴类目数据 | echarts 如何获取X轴类目数据长度 | echarts 如何动态修改X轴类目倾斜 | echarts x轴文字显示不全

下面主要讲一下，前辈在最后提到的问题  及  解决：

如何动态去设置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) { //重点为上方加粗代码

................ //与上方代码一致

}

}

});

}

修改后，如图