echarts属性之xAxis

最新推荐文章于 2025-03-17 08:48:19 发布

一行注释

最新推荐文章于 2025-03-17 08:48:19 发布

阅读量2.2k

点赞数 27

分类专栏： echarts配置项文章标签： echarts 前端 java

本文链接：https://blog.csdn.net/qq_37818095/article/details/143332584

版权

echarts配置项专栏收录该内容

49 篇文章

订阅专栏

xAxis

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

所有属性

xAxis. id

string

组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

xAxis. show = true 试一试

boolean

是否显示 x 轴。

xAxis. alignTicks

boolean

从 v5.3.0 开始支持

在多个 x 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效。

xAxis. position 试一试

string

x 轴的位置。

可选：

'top'
'bottom'

默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。
注：若未将 xAxis.axisLine.onZero 设为 false , 则该项无法生效

xAxis. offset 试一试

number

X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
注：若未将 xAxis.axisLine.onZero 设为 false , 则该项无法生效

xAxis. type = 'category'

string

坐标轴类型。

可选：

'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。

xAxis. name 试一试

string

坐标轴名称。

xAxis. nameLocation = 'end' 试一试

string

坐标轴名称显示位置。

可选：

'start'
'middle' 或者 'center'
'end'

xAxis.nameTextStyle. color 试一试

Color

坐标轴名称的颜色，默认取 axisLine.lineStyle.color。

xAxis.nameTextStyle. fontStyle = 'normal' 试一试

string

坐标轴名称文字字体的风格。

可选：

'normal'
'italic'
'oblique'

xAxis.nameTextStyle. fontWeight = 'normal' 试一试

stringnumber

坐标轴名称文字字体的粗细。

可选：

'normal'
'bold'
'bolder'
'lighter'
100 | 200 | 300 | 400...

xAxis.nameTextStyle. fontFamily = 'sans-serif' 试一试

string

坐标轴名称文字的字体系列。

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

xAxis.nameTextStyle. fontSize = 12 试一试

number

坐标轴名称文字的字体大小。

xAxis.nameTextStyle. align 试一试

string

文字水平对齐方式，默认自动。

可选：

'left'
'center'
'right'

rich 中如果没有设置 align，则会取父层级的 align。例如：

{
    align: right,
    rich: {
        a: {
            // 没有设置 `align`，则 `align` 为 right
        }
    }
}

xAxis.nameTextStyle. verticalAlign 试一试

string

文字垂直对齐方式，默认自动。

可选：

'top'
'middle'
'bottom'

rich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。例如：

{
    verticalAlign: bottom,
    rich: {
        a: {
            // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
        }
    }
}

xAxis.nameTextStyle. lineHeight 试一试

number

行高。

rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}

xAxis.nameTextStyle. backgroundColor = 'transparent' 试一试

stringObject

文字块背景色。

可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。

也可以直接使用图片，例如：

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL，
    // 或者图片的 dataURI，
    // 或者 HTMLImageElement 对象，
    // 或者 HTMLCanvasElement 对象。
}

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

xAxis.nameTextStyle. borderColor 试一试

Color

文字块边框颜色。

xAxis.nameTextStyle. borderWidth 试一试

number

文字块边框宽度。

xAxis.nameTextStyle. borderType = 'solid' 试一试

stringnumberArray

文字块边框描边类型。

可选：

'solid'
'dashed'
'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果。

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}

xAxis.nameTextStyle. borderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

xAxis.nameTextStyle. borderRadius 试一试

numberArray

文字块的圆角。

xAxis.nameTextStyle. padding 试一试

numberArray

文字块的内边距。例如：

padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
padding: 4：表示 padding: [4, 4, 4, 4]。
padding: [3, 4]：表示 padding: [3, 4, 3, 4]。

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

xAxis.nameTextStyle. shadowColor = 'transparent' 试一试

Color

文字块的背景阴影颜色。

xAxis.nameTextStyle. shadowBlur 试一试

number

文字块的背景阴影长度。

xAxis.nameTextStyle. shadowOffsetX 试一试

number

文字块的背景阴影 X 偏移。

xAxis.nameTextStyle. shadowOffsetY 试一试

number

文字块的背景阴影 Y 偏移。

xAxis.nameTextStyle. width 试一试

number

文本显示宽度。

xAxis.nameTextStyle. height 试一试

number

文本显示高度。

xAxis.nameTextStyle. textBorderColor 试一试

Color

文字本身的描边颜色。

xAxis.nameTextStyle. textBorderWidth 试一试

number

文字本身的描边宽度。

xAxis.nameTextStyle. textBorderType = 'solid' 试一试

stringnumberArray

文字本身的描边类型。

可选：

'solid'
'dashed'
'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。

例如：

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}

xAxis.nameTextStyle. textBorderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

xAxis.nameTextStyle. textShadowColor = 'transparent' 试一试

Color

文字本身的阴影颜色。

xAxis.nameTextStyle. textShadowBlur 试一试

number

文字本身的阴影长度。

xAxis.nameTextStyle. textShadowOffsetX 试一试

number

文字本身的阴影 X 偏移。

xAxis.nameTextStyle. textShadowOffsetY 试一试

number

文字本身的阴影 Y 偏移。

xAxis.nameTextStyle. overflow = 'none' 试一试

string

文字超出宽度是否截断或者换行。配置width时有效

'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
'break' 换行
'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行

xAxis.nameTextStyle. ellipsis = '...'

string

在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。

xAxis. nameGap = 15 试一试

number

坐标轴名称与轴线之间的距离。

xAxis.nameTruncate. ellipsis = '...'

string

截断后文字末尾显示的内容。

xAxis. inverse 试一试

boolean

是否是反向坐标轴。

xAxis. boundaryGap 试一试

booleanArray

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

类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：

boundaryGap: ['20%', '20%']

xAxis. min 试一试

numberstringFunction

坐标轴刻度最小值。

可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。

不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。

当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：

min: function (value) {
    return value.min - 20;
}

其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数可返回坐标轴的最小值，也可返回 null/undefined 来表示“自动计算最小值”（返回 null/undefined 从 v4.8.0 开始支持）。

xAxis. max 试一试

numberstringFunction

坐标轴刻度最大值。

可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。

当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：

max: function (value) {
    return value.max - 20;
}

其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数可返回坐标轴的最大值，也可返回 null/undefined 来表示“自动计算最大值”（返回 null/undefined 从 v4.8.0 开始支持）。

xAxis. scale 试一试

boolean

只在数值轴中（type: 'value'）有效。

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

在设置 min 和 max 之后该配置项无效。

xAxis. splitNumber = 5 试一试

number

坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

在类目轴中无效。

xAxis. interval 试一试

number

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。

无法在类目轴中使用。在时间轴（type: 'time'）中需要传时间戳，在对数轴（type: 'log'）中需要传指数值。

xAxis. logBase = 10 试一试

number

对数轴的底数，只在对数轴中（type: 'log'）有效。

xAxis. triggerEvent

boolean

坐标轴的标签是否响应和触发鼠标事件，默认不响应。

事件参数如下：

{
    // 组件类型，xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

xAxis.axisLine. show = true 试一试

boolean

是否显示坐标轴轴线。

从 v5.0.0 开始，数值轴 (type: 'value') 默认不显示轴线，需要显式配置。

xAxis.axisLine. onZero = true 试一试

boolean

X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。

xAxis.axisLine. onZeroAxisIndex

number

当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上。

xAxis.axisLine. symbol = 'none' 试一试

stringArray

轴线两边的箭头。可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']。

xAxis.axisLine. symbolSize = [10, 15] 试一试

Array

轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）。

xAxis.axisLine. symbolOffset = [0, 0] 试一试

Arraynumber

轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；如果是数字，表示这两个箭头使用同样的偏移。

xAxis.axisLine. lineStyle

Object

所有属性

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

xAxis.axisTick. show = true 试一试

boolean

是否显示坐标轴刻度。

从 v5.0.0 开始，数值轴 (type: 'value') 默认不显示轴刻度，需要显式配置。

xAxis.axisTick. alignWithLabel 试一试

boolean

类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。如下图：

xAxis.axisTick. interval = 'auto' 试一试

numberFunction

坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。

可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：

(index:number, value: string) => boolean

第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 false。

xAxis.axisTick. length = 5 试一试

number

坐标轴刻度的长度。

xAxis.axisTick. lineStyle

Object

刻度线的样式设置。

所有属性

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

xAxis.axisTick. customValues

Array

从 v5.5.1 开始支持

自定义要显示的坐标轴刻度位置。例如：

axisTick: {
    alignWithLabel: true,
    customValues: [0, 0.5, 1, 1.5, 2, 8, 9]
}

xAxis. minorTick

Object

从 v4.6.0 开始支持

坐标轴次刻度线相关设置。

注意：次刻度线无法在类目轴（type: 'category'）中使用。

示例：

1) 函数绘图中使用次刻度线

2) 在对数轴中使用次刻度线

xAxis.minorTick. splitNumber = 5 试一试

number

次刻度线分割数，默认会分割成 5 段

xAxis.minorTick. length = 3 试一试

number

次刻度线的长度。

xAxis.minorTick. lineStyle

Object

所有属性

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

xAxis.axisLabel. show = true 试一试

boolean

是否显示刻度标签。

xAxis.axisLabel. interval = 'auto' 试一试

numberFunction

坐标轴刻度标签的显示间隔，在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。

可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：

(index:number, value: string) => boolean

第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 false。

xAxis.axisLabel. rotate 试一试

number

刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

旋转的角度从 -90 度到 90 度。

xAxis.axisLabel. margin = 8 试一试

number

刻度标签与轴线之间的距离。

xAxis.axisLabel. formatter

stringFunction

刻度标签的内容格式器，支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    return value + 'kg';
}

对于时间轴（type: 'time'），formatter 的字符串模板支持多种形式：

字符串模板：简单快速实现常用日期时间模板，string 类型
回调函数：自定义 formatter，可以用来实现复杂高级的格式，Function 类型
分级模板：为不同时间粒度的标签使用不同的 formatter，object 类型

下面我们分别介绍这三种形式。

字符串模板

使用字符串模板是一种方便实现常用日期时间格式化方式的形式。如果字符串模板可以实现你的效果，那我们优先推荐使用此方式；如果无法实现，再考虑其他两种更复杂的方式。支持的模板如下：

分类	模板	取值（英文）	取值（中文）
Year	{yyyy}	e.g., 2020, 2021, ...	例：2020, 2021, ...
	{yy}	00-99	00-99
Quarter	{Q}	1, 2, 3, 4	1, 2, 3, 4
Month	{MMMM}	e.g., January, February, ...	一月、二月、……
	{MMM}	e.g., Jan, Feb, ...	1月、2月、……
	{MM}	01-12	01-12
	{M}	1-12	1-12
Day of Month	{dd}	01-31	01-31
	{d}	1-31	1-31
Day of Week	{eeee}	Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday	星期日、星期一、星期二、星期三、星期四、星期五、星期六
	{ee}	Sun, Mon, Tues, Wed, Thu, Fri, Sat	日、一、二、三、四、五、六
	{e}	1-54	1-54
Hour	{HH}	00-23	00-23
	{H}	0-23	0-23
	{hh}	01-12	01-12
	{h}	1-12	1-12
Minute	{mm}	00-59	00-59
	{m}	0-59	0-59
Second	{ss}	00-59	00-59
	{s}	0-59	0-59
Millisecond	{SSS}	000-999	000-999
	{S}	0-999	0-999

其他语言请参考相应语言包中的定义，语言包可以通过 echarts.registerLocale 注册。

示例:

formatter: '{yyyy}-{MM}-{dd}' // 得到的 label 形如：'2020-12-02'
formatter: '{d}日' // 得到的 label 形如：'2日'

回调函数

回调函数可以根据刻度值返回不同的格式，如果有复杂的时间格式化需求，也可以引用第三方的日期时间相关的库（如 Moment.js、date-fns 等），返回显示的文本。

示例：

// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    // 格式化成月/日，只在第一个刻度显示年份
    var date = new Date(value);
    var texts = [(date.getMonth() + 1), date.getDate()];
    if (index === 0) {
        texts.unshift(date.getFullYear());
    }
    return texts.join('/');
}

分级模板

有时候，我们希望对不同的时间粒度采用不同的格式化策略。例如，在季度图表中，我们可能希望对每个月的第一天显示月份，而其他日期显示日期。我们可以使用以下方式实现该效果：

示例：

formatter: {
    month: '{MMMM}', // 一月、二月、……
    day: '{d}日' // 1日、2日、……
}

支持的分级以及各自默认的取值为：

{
    year: '{yyyy}',
    month: '{MMM}',
    day: '{d}',
    hour: '{HH}:{mm}',
    minute: '{HH}:{mm}',
    second: '{HH}:{mm}:{ss}',
    millisecond: '{hh}:{mm}:{ss} {SSS}',
    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
}

以 day 为例，当一个刻度点的值的小时、分钟、秒、毫秒都为 0 时，将采用 day 的分级值作为模板。none 表示当其他规则都不适用时采用的模板，也就是带有毫秒值的刻度点的模板。

富文本

以上这三种形式的 formatter 都支持富文本，所以可以做成一些复杂的效果。

示例：

xAxis: {
    type: 'time',
    axisLabel: {
        formatter: {
            // 一年的第一个月显示年度信息和月份信息
            year: '{yearStyle|{yyyy}}\n{monthStyle|{MMM}}',
            month: '{monthStyle|{MMM}}'
        },
        rich: {
            yearStyle: {
                // 让年度信息更醒目
                color: '#000',
                fontWeight: 'bold'
            },
            monthStyle: {
                color: '#999'
            }
        }
    }
},

使用回调函数形式实现上面例子同样的效果：

示例：

xAxis: {
    type: 'time',
    axisLabel: {
        formatter: function (value) {
            const date = new Date(value);
            const yearStart = new Date(value);
            yearStart.setMonth(0);
            yearStart.setDate(1);
            yearStart.setHours(0);
            yearStart.setMinutes(0);
            yearStart.setSeconds(0);
            yearStart.setMilliseconds(0);
            // 判断一个刻度值知否为一年的开始
            if (date.getTime() === yearStart.getTime()) {
                return '{year|' + date.getFullYear() + '}\n'
                    + '{month|' + (date.getMonth() + 1) + '月}';
            }
            else {
                return '{month|' + (date.getMonth() + 1) + '月}'
            }
        },
        rich: {
            year: {
                color: '#000',
                fontWeight: 'bold'
            },
            month: {
                color: '#999'
            }
        }
    }
},

xAxis.axisLabel. showMinLabel 试一试

boolean

是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）。

xAxis.axisLabel. showMaxLabel 试一试

boolean

是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label）。

xAxis.axisLabel. alignMinLabel

string

从 v5.5.0 开始支持

最小的坐标刻度标签的对齐方式。如果设置为 null，则和其他标签一致。参见 align。

可选：

'left'
'center'
'right'
null (default)

xAxis.axisLabel. alignMaxLabel

string

从 v5.5.0 开始支持

最大的坐标刻度标签的对齐方式。如果设置为 null，则和其他标签一致。参见 align。

可选：

'left'
'center'
'right'
null (default)

xAxis.axisLabel. hideOverlap 试一试

boolean

从 v5.2.0 开始支持

是否隐藏重叠的标签。

xAxis.axisLabel. customValues

Array

从 v5.5.1 开始支持

自定义要显示的标签位置。例如：

axisLabel: {
    customValues: [0, 4, 7, 8, 9]
}

xAxis.axisLabel. color 试一试

ColorFunction

刻度标签文字的颜色，默认取 axisLine.lineStyle.color。支持回调函数，格式如下

(val: string) => Color

参数是标签的文本，返回颜色值，如下示例：

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

xAxis.axisLabel. fontStyle = 'normal' 试一试

string

文字字体的风格。

可选：

'normal'
'italic'
'oblique'

xAxis.axisLabel. fontWeight = 'normal' 试一试

stringnumber

文字字体的粗细。

可选：

'normal'
'bold'
'bolder'
'lighter'
100 | 200 | 300 | 400...

xAxis.axisLabel. fontFamily = 'sans-serif' 试一试

string

文字的字体系列。

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

xAxis.axisLabel. fontSize = 12 试一试

number

文字的字体大小。

xAxis.axisLabel. align 试一试

string

文字水平对齐方式，默认自动。

可选：

'left'
'center'
'right'

rich 中如果没有设置 align，则会取父层级的 align。例如：

{
    align: right,
    rich: {
        a: {
            // 没有设置 `align`，则 `align` 为 right
        }
    }
}

xAxis.axisLabel. verticalAlign 试一试

string

文字垂直对齐方式，默认自动。

可选：

'top'
'middle'
'bottom'

rich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。例如：

{
    verticalAlign: bottom,
    rich: {
        a: {
            // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
        }
    }
}

xAxis.axisLabel. lineHeight 试一试

number

行高。

rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}

xAxis.axisLabel. backgroundColor = 'transparent' 试一试

stringObject

文字块背景色。

可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。

也可以直接使用图片，例如：

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL，
    // 或者图片的 dataURI，
    // 或者 HTMLImageElement 对象，
    // 或者 HTMLCanvasElement 对象。
}

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

xAxis.axisLabel. borderColor 试一试

Color

文字块边框颜色。

xAxis.axisLabel. borderWidth 试一试

number

文字块边框宽度。

xAxis.axisLabel. borderType = 'solid' 试一试

stringnumberArray

文字块边框描边类型。

可选：

'solid'
'dashed'
'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果。

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}

xAxis.axisLabel. borderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

xAxis.axisLabel. borderRadius 试一试

numberArray

文字块的圆角。

xAxis.axisLabel. padding 试一试

numberArray

文字块的内边距。例如：

padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
padding: 4：表示 padding: [4, 4, 4, 4]。
padding: [3, 4]：表示 padding: [3, 4, 3, 4]。

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

xAxis.axisLabel. shadowColor = 'transparent' 试一试

Color

文字块的背景阴影颜色。

xAxis.axisLabel. shadowBlur 试一试

number

文字块的背景阴影长度。

xAxis.axisLabel. shadowOffsetX 试一试

number

文字块的背景阴影 X 偏移。

xAxis.axisLabel. shadowOffsetY 试一试

number

文字块的背景阴影 Y 偏移。

xAxis.axisLabel. textBorderColor 试一试

Color

文字本身的描边颜色。

xAxis.axisLabel. textBorderWidth 试一试

number

文字本身的描边宽度。

xAxis.axisLabel. textBorderType = 'solid' 试一试

stringnumberArray

文字本身的描边类型。

可选：

'solid'
'dashed'
'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。

例如：

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}

xAxis.axisLabel. textBorderDashOffset 试一试

number

从 v5.0.0 开始支持

用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

xAxis.axisLabel. textShadowColor = 'transparent' 试一试

Color

文字本身的阴影颜色。

xAxis.axisLabel. textShadowBlur 试一试

number

文字本身的阴影长度。

xAxis.axisLabel. textShadowOffsetX 试一试

number

文字本身的阴影 X 偏移。

xAxis.axisLabel. textShadowOffsetY 试一试

number

文字本身的阴影 Y 偏移。

xAxis.axisLabel. overflow = 'none' 试一试

string

文字超出宽度是否截断或者换行。配置width时有效

'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
'break' 换行
'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行

xAxis.axisLabel. ellipsis = '...'

string

在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。

xAxis.splitLine. show = true 试一试

boolean

是否显示分隔线。默认数值轴显示，类目轴不显示。

xAxis.splitLine. interval = 'auto' 试一试

numberFunction

坐标轴分隔线的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。

可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：

(index:number, value: string) => boolean

第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 false。

xAxis.splitLine. lineStyle

Object

所有属性

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

xAxis. minorSplitLine

Object

从 v4.6.0 开始支持

坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线 minorTick

xAxis.minorSplitLine. show 试一试

boolean

是否显示次分隔线。默认不显示。

xAxis.minorSplitLine. lineStyle

Object

所有属性

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

xAxis.splitArea. interval = 'auto' 试一试

numberFunction

坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。

可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：

(index:number, value: string) => boolean

第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 false。

xAxis.splitArea. areaStyle

Object

分隔区域的样式设置。

所有属性

{ color , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

xAxis. data

Array

类目数据，在类目轴（type: 'category'）中有效。

如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。

如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。

示例：

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

所有属性

{ value , textStyle }

xAxis. axisPointer

Object

坐标轴指示器配置项。

xAxis.axisPointer. show 试一试

boolean

默认不显示。但是如果 tooltip.trigger 设置为 'axis' 或者 tooltip.axisPointer.type 设置为 'cross'，则自动显示 axisPointer。坐标系会自动选择显示显示哪个轴的 axisPointer，也可以使用 tooltip.axisPointer.axis 改变这种选择。

xAxis.axisPointer. type = 'line' 试一试

string

指示器类型。

可选

'line' 直线指示器
'shadow' 阴影指示器
'none' 无指示器

xAxis.axisPointer. snap

boolean

坐标轴指示器是否自动吸附到点上。默认自动判断。

这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。

xAxis.axisPointer. z

number

坐标轴指示器的 z 值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

xAxis.axisPointer. label

Object

坐标轴指示器的文本标签。

所有属性

{ show , precision , formatter , margin , color , fontStyle , fontWeight , fontFamily , fontSize , lineHeight , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , padding , backgroundColor , borderColor , borderWidth , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY }

xAxis.axisPointer. lineStyle

Object

axisPointer.type 为 'line' 时有效。

所有属性

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

xAxis.axisPointer. shadowStyle

Object

axisPointer.type 为 'shadow' 时有效。

所有属性

{ color , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

xAxis.axisPointer. triggerEmphasis = true 试一试

boolean

从 v5.4.3 开始支持

是否触发系列强调功能。

xAxis.axisPointer. triggerTooltip = true 试一试

boolean

是否触发 tooltip。如果不想触发 tooltip 可以关掉。

xAxis.axisPointer. value

number

当前的 value。在使用 axisPointer.handle 时，可以设置此值进行初始值设定，从而决定 axisPointer 的初始位置。

xAxis.axisPointer. status 试一试

boolean

当前的状态，可取值为 'show' 和 'hide'。

xAxis.axisPointer. handle

Object

拖拽手柄，适用于触屏的环境。参见例子。

所有属性

{ show , icon , size , margin , color , throttle , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY }

xAxis. animation = true 试一试

boolean

是否开启动画。

xAxis. animationThreshold = 2000

number

是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。

xAxis. animationDuration = 1000 试一试

numberFunction

初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：

animationDuration: function (idx) {
    // 越往后的数据时长越大
    return idx * 100;
}

xAxis. animationEasing = 'cubicOut' 试一试

string

初始动画的缓动效果。不同的缓动效果可以参考缓动示例。

xAxis. animationDelay

numberFunction

初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

xAxis. animationDurationUpdate = 300 试一试

numberFunction

数据更新动画的时长。

支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：

animationDurationUpdate: function (idx) {
    // 越往后的数据时长越大
    return idx * 100;
}

xAxis. animationEasingUpdate = 'cubicInOut' 试一试

string

数据更新动画的缓动效果。

xAxis. animationDelayUpdate

numberFunction

数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

xAxis. zlevel

number

X 轴所有图形的 zlevel 值。

zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。