echarts配置项图文介绍——xAxis

echarts配置项图文介绍——xAxis

本文仅用于个人学习笔记，文中出现错误或不恰当请在评论区指出。本文仅介绍稍有难度的配置项，极其简单易懂的配置项请自行移步官网查阅文档。

一、用途

直角坐标系 grid 中的 x 轴，单个grid支持多个x轴。

二、配置项

1.gridIndex：x 轴所在的 grid 的索引，默认位于第一个 grid。
例如：当grid（直角坐标系）有多个时，使用该配置项表明当前x轴对应的是哪个grid组件。
2.nameLocation ：坐标轴名称显示位置。
      可选：‘start’、‘middle’ 、 ‘center’或者’end’。
3. nameGap ： 坐标轴名称与轴线之间的距离。

4.inverse:是否是反向坐标轴。
      默认值即为false时如下图

为true时如下图(注意name的位置也跟随变换)

5.boundaryGap：坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
          类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。如下图所示。
为false时如下图

为true时如下图

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

设置为boundaryGap: [‘70%’, ‘100%’]时(注：此处的数据并不是准确的echarts为了美观会自行取近似值，比如此处就不允许15、10等距离不相等的数据出现，boundaryGap: [‘100%’, ‘100%’]效果其实也是相同的)

6.min、max：坐标轴刻度最小最大值。（与boundaryGap冲突且优先级更大）

7.scale:是否是脱离 0 值比例。(只在数值轴中有效,且在设置 min 和 max 之后该配置项无效。)

8.splitNumber:坐标轴的分割段数，(只是个预估值)

9. minInterval、maxInterval:自动计算的坐标轴最小、最大间隔大小。例如可以设置成1保证坐标轴分割刻度显示成整数。

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

11.axisLine:坐标轴轴线相关设置。
(1).axisLine. onZero :X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
设置为false时

设置为true时

(2).axisLine. onZeroAxisIndex：当有双轴时（两个Y轴），可以用这个属性手动指定，在哪个y轴的 0 刻度上。
(3).axisLine. symbol :轴线两边的箭头
默认不显示箭头，即 ‘none’。两端都显示箭头可以设置为 ‘arrow’，只在末端显示箭头可以设置为 [‘none’, ‘arrow’]。
(4).axisLine. symbolSize:轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）。
(5).axisLine. symbolOffset :轴线两边的箭头的偏移。
(6).axisLine. lineStyle：坐标轴线的样式
12.axisTick：坐标轴刻度相关设置。
(1).axisTick. alignWithLabel:类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。如下图。

(2).axisTick. interval ：坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
(3).axisTick. inside:坐标轴刻度是否朝内，默认朝外。
为true时

为false时

(4).axisTick. length :坐标轴刻度的长度。

(5).axisTick. lineStyle:刻度线的样式设置。
13.** minorTick**：坐标轴次刻度线相关设置。
坐标轴次刻度线如下图：

（1）minorTick. splitNumber ：次刻度线分割数，默认会分割成 5 段。（用法同上文中的 splitNumber）
14.** axisLabel**：坐标轴刻度标签的相关设置。
下图中若设置为false则横坐标下没有文字

（1）axisLabel. interval：坐标轴刻度标签的显示间隔，在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
可以用数值表示间隔的数据，也可以通过回调函数控制。（函数用法请见官方文档）
值为0时：显示所有横坐标。

值为1时，隔一个显示一个

（2）axisLabel. inside：刻度标签是否朝内，默认朝外。

(3).axisLabel. rotate:刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。

(4).axisLabel. margin :刻度标签与轴线之间的距离。

(5).axisLabel. formatter:刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
函数使用方法自行查看文档

(6)axisLabel. showMinLabel、axisLabel. showMaxLabel:是否显示最小、最大 tick 的 label。

15.splitLine:坐标轴在 grid 区域中的分隔线。

(1).splitLine. interval :坐标轴分隔线的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
可以设置成 0 强制显示所有标签。
如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式参考文档。
设置为1时如下图：

（2）splitLine. lineStyle：分割线的样式。
16.minorSplitLine：坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线


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

(1)splitArea. interval :坐标轴分隔区域的显示间隔，在类目轴中有效。
逻辑与splitLine. interval一样

（2）splitArea. areaStyle：分隔区域的样式设置。

18.data:类目数据，在类目轴（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'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

可以为某个data单独设置样式

19.axisPointer:坐标轴指示器配置项。(其子配置项与grid.tooltip. axisPointer相同，请翻阅往期文章)