xaxis

[TOC]
- ## xaxis
  - ### type: String
    可用选项

- category
   - datetime
   - numeric
  - ### categories: Array
    类别是显示在 x 轴上的标签。
  - ### tickAmount: Number
    要显示的滴答间隔数。
	
	注意：当 xaxis.type = 时，tickAmount 没有任何效果datetime
	
	> 如果您有一个数字 xaxis `xaxis.type = 'numeric'`，您可以指定`tickAmount: 'dataPoints'`哪个会使刻度数等于图表中的数据点数。
  - ### tickPlacement: String
    是在数据点之间还是在数据点上绘制刻度。
    可用选项

- `tickPlacement: 'between'`
    ![](/uploads/images/20221226/263d610208bd1781bef596ff92e69498.png)
   - `tickPlacement: 'on'`
    ![](/uploads/images/20221226/e5c28277fe22d1810778f3f890f98989.png)
	 > 注意： tickPlacement 仅适用于 `xaxis.type: category` 图表，不适用于日期时间图表。
  - ### min: Number
    为 x 轴设置的最小数字。超过这个数字的图形将被剪掉
  - ### max: Number
    为 x 轴设置的最大数字。超过这个数字的图形将被剪掉
  - ### range: Number
    range 取 x 轴的最大值，减去提供的范围值，并以此为基础得到最小值。因此，从技术上讲，它有助于在动态更新最小值和最大值时保持相同的范围
  - ### floating: Boolean
    设置此选项会将 y 轴移出绘图区域。许多行为类似于 `position: absolute` CSS 的属性
  - ### decimalsInFloat: Number
    当 x 轴数字上有浮动值时要显示的分数数。
    > 注意：仅适用于数字类型。
  - ### overwriteCategories: Array of String
    允许您用这些标签覆盖 x 轴的所有标签。接受字符串值数组。
  - ### position: String
    设置此选项允许您更改 x 轴位置
    可用选项

- bottom
    - top
  - ### labels:
    - #### show: Boolean
      在 x 轴上显示标签
    - #### rotate: Number
      x 轴标签的旋转角度
    - #### rotateAlways: Boolean
      是始终旋转标签还是仅在文本不适合可用宽度时才旋转
    - #### hideOverlappingLabels: Boolean
      当标签靠得太近并开始相互重叠时，此选项可防止标签重叠。
    - #### showDuplicates: Boolean
      默认情况下，不打印重复标签以防止日期时间系列中出现拥塞值。如果您有意要在 x 轴标签中显示相同的值，请启用此选项
    - #### trim: Boolean
      ... 当文本不适合可用空间并关闭旋转时追加到文本
    - #### minHeight: Number
      标签的最小高度
    - #### maxHeight: Number
      标签旋转时的最大高度。
    - #### style
      - ##### colors: Array || Single Color String
        x 轴标签的前景色。接受分布式图表的数组或接受单一颜色字符串。
      - ##### fontSize: String
        x 轴标签的字体大小
      - ##### fontFamily: String
        x 轴标签的字体
      - ##### fontWeight: String | Number
        x 轴标签的字体粗细
      - ##### cssClass: String
        给标签元素的自定义 Css 类
    - #### offsetX: Number
      设置标签的左偏移量
    - #### offsetY: Number
      设置标签的顶部偏移量
    - #### format: String
      根据格式说明符格式化日期时间值。
      查看[可用格式说明符列表](http://www.bixiaguangnian.com/manual/apexcharts/241.html "可用格式说明符列表")
    - #### formatter: function
      覆盖所有内容并为 xaxis 值应用自定义函数。
    该函数接受 3 个参数。第一个是默认格式value，第二个是原始格式 `timestamp`，您可以将其传递给任何日期时间处理函数以满足您的需要。第三个参数出现在日期时间 `xaxis` 中，它包括一个 `dateFormatter`，如下面的代码所述。
```javascript
		xaxis: {
			labels: {
				/**
				* Allows users to apply a custom formatter function to x-axis labels.
				*
				* @param { String } value - The default value generated
				* @param { Number } timestamp - In a datetime series, this is the raw timestamp 
				* @param { object } contains dateFormatter for datetime x-axis
				*/
					formatter: function(value, timestamp, opts) {
					return opts.dateFormatter(new Date(timestamp)).format("dd MMM")
				}
			}
		}
```
    - #### datetimeUTC: Boolean
      打开时，本地 DateTime 将转换为 UTC。如果您提供带有时区信息的日期并希望保留它，请将其关闭。
    - #### datetimeFormatter
      对于根据日期时间差异自动生成的默认时间刻度，默认使用以下说明符。
      - ##### year: String
        年份的格式说明符。
      - ##### month: String
        月份的格式说明符。
      - ##### day: String
        月中日期的格式说明符。
      - ##### hour: String
        一天中小时的格式说明符。
  - ### group:
    - #### groups: Array of Objects
```javascript
	groups: [{
		title: "ABC",
		cols: 3
	}, {
		title: "XYZ",
		cols: 4
	}]
```
    - #### style:
      - ##### colors: Array || Single Color String
        x 轴组标签的颜色。
      - ##### fontSize: String
        x 轴组标签的字体大小
      - ##### fontWeight: String || Number
        x 轴组标签的字体粗细
      - ##### fontFamily: String
        x 轴组标签的字体
      - ##### cssClass: String
        给标签元素的自定义 Css 类
  - ### axisBorder:
    - #### show: Boolean
      在 x 轴上绘制水平边框
    - #### color: Color
      横轴边框的颜色
    - #### height: Number
      设置 x 轴线的边框高度
    - #### width: Number || String
      设置 x 轴线的宽度
    - #### offsetX: Number
      设置轴边界的左偏移量
    - #### offsetY: Number
      设置轴边界的顶部偏移量
  - ### axisTicks:
    - #### show: Boolean
      在 x 轴上绘制 ticks 以指定间隔
    - #### borderType: String
      可用选项

- solid
     - dotted
    - #### color: Color
      ticks 的颜色
    - #### height: Boolean
      ticks 的高度
    - #### offsetX: Number
      设置 ticks 的左偏移量
    - #### offsetY: Number
      设置 ticks 的顶部偏移量
  - ### title
    - #### text: String
      为 x 轴指定一个标题，默认情况下该标题将显示在轴标签下方。
    - #### offsetX: String
      设置 xaxis 标题的左偏移量。
    - #### offsetY: String
      设置 x 轴标题的顶部偏移量。
    - #### style
      - ##### color: Color
        x 轴标题的颜色
      - ##### fontSize: String
        x 轴标题的字体大小
      - ##### fontFamily: String
        x 轴标题的字体
      - ##### fontWeight: String | Number
        x 轴标题的字体粗细
      - ##### cssClass: String
        赋予 x 轴标题的自定义 Css 类
  - ### crosshairs
    - #### show: Boolean
      当用户将鼠标移到图表区域上时在 x 轴上显示十字准线
    - #### width: Number || String
      可能的选择

- 任何数字
     - tickWidth 采用 x 轴上的刻度间隔并创建该宽度的十字准线
     - barWidth 采用 barWidth 并创建该宽度的十字准线——仅适用于垂直条形图
    - #### position: String
      可能的选择

- back
     - front
    - #### opacity: Number
      十字准线的不透明度
    - #### stroke
      - ##### color: Color
        十字准线的边框颜色
      - ##### width: Number
        十字准线的边框宽度
      - ##### dashArray: Number
        在十字准线的边界创建破折号。较高的数字会在边框中的破折号之间创建更多空间。
    - #### fill
      - ##### type: String
        可能的选择

- solid
       - gradient
      - ##### color: String
        十字准线的填充颜色
      - ##### gradient
        - ###### colorFrom: Color
          十字准线渐变颜色来自
        - ###### colorTo: Color
          十字准线渐变颜色
        - ###### stops: Array
          停止定义要在渐变上使用的颜色渐变
        - ###### opacityFrom: Number
          十字准线填充不透明度来自
        - ###### opacityTo: Number
          十字准线填充不透明度
    - #### dropShadow
      - ##### enabled: Boolean
        为十字准线启用阴影
      - ##### top: Number
        设置阴影的顶部偏移
      - ##### left: Number
        设置阴影的左偏移
      - ##### blur: Number
        设置阴影的模糊距离
      - ##### opacity: Number
        设置阴影的不透明度。
  - ### tooltip
    - #### enabled: Boolean
      是否在 x 轴上显示工具提示
    - #### formatter: Function
      x 轴工具提示标签的自定义格式器函数。如果未定义，xaxis 工具提示将使用一般工具提示中使用的默认“X”值。
```javascript
	xaxis: {
		tooltip: {
			formatter: function(val, opts) {
				return val + "..."
			}
		}
	}
```
    - #### offsetY: Number
      设置 x 轴工具提示的顶部偏移量
    - #### style:
      - ##### fontSize: String
        x 轴工具提示文本的字体大小
      - ##### fontFamily: String
        x 轴工具提示文本的字体

```javascript
  xaxis: {
      type: 'category',
      categories: [],
      tickAmount: undefined,
      tickPlacement: 'between',
      min: undefined,
      max: undefined,
      range: undefined,
      floating: false,
      decimalsInFloat: undefined,
      overwriteCategories: undefined,
      position: 'bottom',
      labels: {
          show: true,
          rotate: -45,
          rotateAlways: false,
          hideOverlappingLabels: true,
          showDuplicates: false,
          trim: false,
          minHeight: undefined,
          maxHeight: 120,
          style: {
              colors: [],
              fontSize: '12px',
              fontFamily: 'Helvetica, Arial, sans-serif',
              fontWeight: 400,
              cssClass: 'apexcharts-xaxis-label',
          },
          offsetX: 0,
          offsetY: 0,
          format: undefined,
          formatter: undefined,
          datetimeUTC: true,
          datetimeFormatter: {
              year: 'yyyy',
              month: "MMM 'yy",
              day: 'dd MMM',
              hour: 'HH:mm',
          },
      },
      group: {
        groups: [],
        style: {
          colors: [],
          fontSize: '12px',
          fontWeight: 400,
          fontFamily: undefined,
          cssClass: ''
        }
      },
      axisBorder: {
          show: true,
          color: '#78909C',
          height: 1,
          width: '100%',
          offsetX: 0,
          offsetY: 0
      },
      axisTicks: {
          show: true,
          borderType: 'solid',
          color: '#78909C',
          height: 6,
          offsetX: 0,
          offsetY: 0
      },
     
      title: {
          text: undefined,
          offsetX: 0,
          offsetY: 0,
          style: {
              color: undefined,
              fontSize: '12px',
              fontFamily: 'Helvetica, Arial, sans-serif',
              fontWeight: 600,
              cssClass: 'apexcharts-xaxis-title',
          },
      },
      crosshairs: {
          show: true,
          width: 1,
          position: 'back',
          opacity: 0.9,        
          stroke: {
              color: '#b6b6b6',
              width: 0,
              dashArray: 0,
          },
          fill: {
              type: 'solid',
              color: '#B1B9C4',
              gradient: {
                  colorFrom: '#D8E3F0',
                  colorTo: '#BED1E6',
                  stops: [0, 100],
                  opacityFrom: 0.4,
                  opacityTo: 0.5,
              },
          },
          dropShadow: {
              enabled: false,
              top: 0,
              left: 0,
              blur: 1,
              opacity: 0.4,
          },
      },
      tooltip: {
          enabled: true,
          formatter: undefined,
          offsetY: 0,
          style: {
            fontSize: 0,
            fontFamily: 0,
          },
      },
  }
```