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

时间:2025-01-14 14:46:44

xAxis

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

1

说明:是否显示 x 轴。

默认值:true。

参数类型:boolean。

可选值:

        (1)true,显示x轴。

        (2)false,隐藏x轴。

2

说明:设置 x 轴上的值。

默认值:[]。

参数类型:Array。

3

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

默认值:true。

参数类型:boolean,Array。

可选值:

        (1)true,x坐标轴两边留白。

        (2)false,x坐标轴两边不留白。

        (3)['30%', '20%']。

实例:

ECharts 使用使x轴两边不留空白/qq_38974638/article/details/107424107

4 xAxis. axisLabel

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

4.1 xAxis.

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

默认值:true。

参数类型:boolean。

可选值:

        (1)true,显示x坐标轴刻度标签。

        (2)false,不显示x坐标轴刻度标签。

4.2 

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

默认值:'#333'。

参数类型:Color,Function。

可选值:

        (1)'red','#ccc'。

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

 实例:

ECharts 使用. color设置x坐标轴刻度标签颜色/qq_38974638/article/details/108917412

5

说明:x坐标轴轴线。

5.1 xAxis.

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

默认值:true。

参数类型:boolean。

可选值:

        (1)true,显示x坐标轴轴线。

        (2)false,不显示x坐标轴轴线。

5.2 

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

5.2.1 

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

默认值:'#333'。

参数类型:Color。

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

ECharts color属性设置(RGB,透明度,线性渐变,径向渐变,纹理填充)/qq_38974638/article/details/108917608

实例:

ECharts 使用设置x坐标轴轴线颜色/qq_38974638/article/details/108917726

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