Echarts-xAxis

xAxis—直角坐标系 grid 中的 x 轴

xAxis. id

string

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

xAxis. show = true

boolean

是否显示 x 轴。

xAxis. gridIndex

number

x 轴所在的 grid 的索引，默认位于第一个 grid。

xAxis. position

string

x 轴的位置。

可选：

  • 'top'
  • 'bottom'

默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。

xAxis. offset

number

X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。

xAxis. type = ‘category’

string

坐标轴类型。

可选：

  • 'value' 数值轴，适用于连续数据。
  • 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
  • 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
  • 'log' 对数轴。适用于对数数据。

xAxis. name

string

坐标轴名称。

xAxis. nameLocation = ‘end’

string

坐标轴名称显示位置。

可选：

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

xAxis. nameTextStyle

Object

坐标轴名称的文字样式。

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。例如：

1
2
3
4
5
6
7
8
{
    align: right,
    rich: {
        a: {
            // 没有设置 `align`，则 `align` 为 right
        }
    }
}

xAxis.nameTextStyle. verticalAlign

string

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

可选：

  • 'top'
  • 'middle'
  • 'bottom'

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

1
2
3
4
5
6
7
8
{
    verticalAlign: bottom,
    rich: {
        a: {
            // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
        }
    }
}

xAxis.nameTextStyle. lineHeight

number

行高。

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

1
2
3
4
5
6
7
8
{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}

xAxis.nameTextStyle. backgroundColor = ‘transparent’

stringObject

文字块背景色。

可以是直接的颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。

可以支持使用图片，例如：

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

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

xAxis.nameTextStyle. borderColor = ‘transparent’

Color

文字块边框颜色。

xAxis.nameTextStyle. borderWidth

number

文字块边框宽度。

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

numberstring

文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 backgroundColor）时，可能会使用它。

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

width 也可以是百分比字符串，如 '100%'。表示的是所在文本块的 contentWidth（即不包含文本块的 padding）的百分之多少。之所以以 contentWidth 做基数，因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数，则百分比的计算在实用中不具有意义，可能会超出。

注意，如果不定义 rich 属性，则不能指定 width 和 height。

xAxis.nameTextStyle. height

numberstring

文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 backgroundColor）时，可能会使用它。

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

注意，如果不定义 rich 属性，则不能指定 width 和 height。

xAxis.nameTextStyle. textBorderColor = ‘transparent’

Color

文字本身的描边颜色。

xAxis.nameTextStyle. textBorderWidth

number

文字本身的描边宽度。

xAxis.nameTextStyle. textShadowColor = ‘transparent’

Color

文字本身的阴影颜色。

xAxis.nameTextStyle. textShadowBlur

number

文字本身的阴影长度。

xAxis.nameTextStyle. textShadowOffsetX

number

文字本身的阴影 X 偏移。

xAxis.nameTextStyle. textShadowOffsetY

number

文字本身的阴影 Y 偏移。

xAxis.nameTextStyle. rich

Object

在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
label: {
    // 在文本中，可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号：
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

详情参见教程：富文本标签

所有属性

{ }

xAxis. nameGap = 15

number

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

xAxis. nameRotate

number

坐标轴名字旋转，角度值。

xAxis. inverse

boolean

是否是反向坐标轴。ECharts 3 中新加。

xAxis. boundaryGap

booleanArray

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

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

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

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

xAxis. min

numberstringFunction

坐标轴刻度最小值。

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

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

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

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

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

其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数应该返回坐标轴的最小值。

xAxis. max

numberstringFunction

坐标轴刻度最大值。

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

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

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

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

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

其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数应该返回坐标轴的最大值。

xAxis. scale

boolean

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

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

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

xAxis. splitNumber = 5

number

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

在类目轴中无效。

xAxis. minInterval

number

自动计算的坐标轴最小间隔大小。

例如可以设置成1保证坐标轴分割刻度显示成整数。

1
2
3
{
    minInterval: 1
}

只在数值轴或时间轴中（type: ‘value’ 或 ‘time’）有效。

xAxis. maxInterval

number

自动计算的坐标轴最大间隔大小。

例如，在时间轴（（type: ‘time’））可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。

1
2
3
{
    maxInterval: 3600 * 24 * 1000
}

只在数值轴或时间轴中（type: ‘value’ 或 ‘time’）有效。

xAxis. interval

number

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

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

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

xAxis. logBase = 10

number

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

xAxis. silent

boolean

坐标轴是否是静态无法交互。

xAxis. triggerEvent

boolean

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

事件参数如下：

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

xAxis. axisLine

Object

坐标轴轴线相关设置。

xAxis.axisLine. show = true

boolean

是否显示坐标轴轴线。

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 , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

xAxis. axisTick

Object

坐标轴刻度相关设置。

xAxis.axisTick. show = true

boolean

是否显示坐标轴刻度。

xAxis.axisTick. alignWithLabel

boolean

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

img

xAxis.axisTick. interval = ‘auto’

numberFunction

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

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

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

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

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

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

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

xAxis.axisTick. inside

boolean

坐标轴刻度是否朝内，默认朝外。

xAxis.axisTick. length = 5

number

坐标轴刻度的长度。

xAxis.axisTick. lineStyle

Object

刻度线的样式设置。

所有属性

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

xAxis. minorTick

Object

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

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

示例：

  1. 函数绘图中使用次刻度线
  1. 在对数轴中使用次刻度线

#### xAxis.minorTick. show

boolean

是否显示次刻度线。

xAxis.minorTick. splitNumber = 5

number

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

xAxis.minorTick. length = 3

number

次刻度线的长度。

xAxis.minorTick. lineStyle

Object

所有属性

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

xAxis. axisLabel

Object

坐标轴刻度标签的相关设置。

xAxis.axisLabel. show = true

boolean

是否显示刻度标签。

xAxis.axisLabel. interval = ‘auto’

numberFunction

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

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

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

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

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

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

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

xAxis.axisLabel. inside

boolean

刻度标签是否朝内，默认朝外。

xAxis.axisLabel. rotate

number

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

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

xAxis.axisLabel. margin = 8

number

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

xAxis.axisLabel. formatter

stringFunction

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

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'

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

xAxis.axisLabel. showMinLabel

boolean

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

xAxis.axisLabel. showMaxLabel

boolean

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

xAxis.axisLabel. color

ColorFunction

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

1
(val: string) => Color

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

1
2
3
4
5
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。例如：

1
2
3
4
5
6
7
8
{
    align: right,
    rich: {
        a: {
            // 没有设置 `align`，则 `align` 为 right
        }
    }
}

xAxis.axisLabel. verticalAlign

string

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

可选：

  • 'top'
  • 'middle'
  • 'bottom'

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

1
2
3
4
5
6
7
8
{
    verticalAlign: bottom,
    rich: {
        a: {
            // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
        }
    }
}

xAxis.axisLabel. lineHeight

number

行高。

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

1
2
3
4
5
6
7
8
{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}

xAxis.axisLabel. backgroundColor = ‘transparent’

stringObject

文字块背景色。

可以是直接的颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。

可以支持使用图片，例如：

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

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

xAxis.axisLabel. borderColor = ‘transparent’

Color

文字块边框颜色。

xAxis.axisLabel. borderWidth

number

文字块边框宽度。

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. width

numberstring

文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 backgroundColor）时，可能会使用它。

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

width 也可以是百分比字符串，如 '100%'。表示的是所在文本块的 contentWidth（即不包含文本块的 padding）的百分之多少。之所以以 contentWidth 做基数，因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数，则百分比的计算在实用中不具有意义，可能会超出。

注意，如果不定义 rich 属性，则不能指定 width 和 height。

xAxis.axisLabel. height

numberstring

文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 backgroundColor）时，可能会使用它。

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

注意，如果不定义 rich 属性，则不能指定 width 和 height。

xAxis.axisLabel. textBorderColor = ‘transparent’

Color

文字本身的描边颜色。

xAxis.axisLabel. textBorderWidth

number

文字本身的描边宽度。

xAxis.axisLabel. textShadowColor = ‘transparent’

Color

文字本身的阴影颜色。

xAxis.axisLabel. textShadowBlur

number

文字本身的阴影长度。

xAxis.axisLabel. textShadowOffsetX

number

文字本身的阴影 X 偏移。

xAxis.axisLabel. textShadowOffsetY

number

文字本身的阴影 Y 偏移。

xAxis.axisLabel. rich

Object

在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
label: {
    // 在文本中，可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号：
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

详情参见教程：富文本标签

所有属性

{ }

xAxis. splitLine

Object

坐标轴在 grid 区域中的分隔线。

xAxis.splitLine. show = true

boolean

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

xAxis.splitLine. interval = ‘auto’

numberFunction

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

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

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

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

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

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

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

xAxis.splitLine. lineStyle

Object

所有属性

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

xAxis. minorSplitLine

Object

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

xAxis.minorSplitLine. show

boolean

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

所有属性

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

xAxis. splitArea

Object

坐标轴在 grid 区域中的分隔区域，默认不显示。

xAxis.splitArea. interval = ‘auto’

numberFunction

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

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

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

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

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

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

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

xAxis.splitArea. show

boolean

是否显示分隔区域。

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 为空时，就什么也获取不到。

示例：

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

xAxis.data. value

string

单个类目名称。

xAxis.data. textStyle

Object

类目标签的文字样式。

所有属性

{ color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , rich }

xAxis. axisPointer

Object

axisPointer settings on axis.

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 , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , padding , backgroundColor , borderColor , borderWidth , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY }

xAxis.axisPointer. lineStyle

Object

axisPointer.type 为 'line' 时有效。

所有属性

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

xAxis.axisPointer. shadowStyle

Object

axisPointer.type 为 'shadow' 时有效。

所有属性

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

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. zlevel

number

X 轴所有图形的 zlevel 值。

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

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

xAxis. z

number

X 轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低，而且不会创建新的 Canvas。

Echarts

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！