ECharts x坐标轴(xAxis)使用详解

xAxis

说明：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

1 xAxis.show

说明：是否显示 x 轴。

默认值：true。

参数类型：boolean。

可选值：

        （1）true，显示x轴。

        （2）false，隐藏x轴。

2 xAxis.data

说明：设置 x 轴上的值。

默认值：[]。

参数类型：Array。

3 xAxis.boundaryGap

说明： x 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。

默认值：true。

参数类型：boolean，Array。

可选值：

        （1）true，x坐标轴两边留白。

        （2）false，x坐标轴两边不留白。

        （3）['30%', '20%']。

实例：

ECharts 使用xAxis.boundaryGap使x轴两边不留空白https://blog.csdn.net/qq_38974638/article/details/107424107

4 xAxis. axisLabel

说明：x坐标轴刻度标签。

4.1 xAxis. axisLabel.show

说明：是否显示x坐标轴刻度标签。

默认值：true。

参数类型：boolean。

可选值：

        （1）true，显示x坐标轴刻度标签。

        （2）false，不显示x坐标轴刻度标签。

4.2 xAxis.axisLabel.color

说明：刻度标签文字的颜色，支持回调函数。

默认值：'#333'。

参数类型：Color，Function。

可选值：

        （1）'red','#ccc'。

        （2）color: function (value, index) { return value >= 0 ? 'green' : 'red'; }。

 实例：

ECharts 使用xAxis.axisLabel. color设置x坐标轴刻度标签颜色https://blog.csdn.net/qq_38974638/article/details/108917412

5 xAxis.axisLine

说明：x坐标轴轴线。

5.1 xAxis. axisLine.show

说明：是否显示x坐标轴轴线。

默认值：true。

参数类型：boolean。

可选值：

        （1）true，显示x坐标轴轴线。

        （2）false，不显示x坐标轴轴线。

5.2 xAxis.axisLine.lineStyle

说明：是否显示x坐标轴轴线样式。

5.2.1 xAxis.axisLine.lineStyle.color

说明：刻度标签文字的颜色，支持回调函数。

默认值：'#333'。

参数类型：Color。

可选值：请参考以下博客。

ECharts color属性设置（RGB，透明度，线性渐变，径向渐变，纹理填充）https://blog.csdn.net/qq_38974638/article/details/108917608

实例：

ECharts 使用xAxis.axisLine.lineStyle.color设置x坐标轴轴线颜色https://blog.csdn.net/qq_38974638/article/details/108917726

旭东怪的个人空间_哔哩哔哩_Bilibili旭东怪，人生低谷不可怕，可怕的是坚持不到人生转折点的那一天;旭东怪的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili，你感兴趣的视频都在B站。https://space.bilibili.com/484264966?spm_id_from=333.337.search-card.all.click