xAxis

直角坐标系 grid 中的 x 轴,单个 grid 组件最多只能放上下两个 x 轴。

  • xAxis.gridIndex: x 轴所在的 grid 的索引,默认位于第一个 grid。
  • xAxis.position:
      * 可选:
      'top'
      'bottom'
      默认 grid 中的第一个 x 轴在 grid 的下方('bottom'),第二个 x 轴视第一个 x 轴的位置放在另一侧。
    
  • xAxis.type: 坐标轴类型。
      可选:
      'value' 数值轴,适用于连续数据。
      'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
      'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
      'log' 对数轴。适用于对数数据。
    
  • xAxis.name: 坐标轴名称。
  • xAxis.nameLocation: [ default: 'start' ] 坐标轴名称显示位置。
      可选:
      'start'
      'middle'
      'end'
    
  • xAxis.nameTextStyle:
      xAxis.nameTextStyle.color, xAxis.nameTextStyle.fontStyle, xAxis.nameTextStyle.fontWeight,
      xAxis.nameTextStyle.fontFamily, xAxis.nameTextStyle.fontSize
    
  • xAxis.nameGap:坐标轴名称与轴线之间的距离。
  • xAxis.inverse: 是否是反向坐标轴。
  • xAxis.boundaryGap: 坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
  • xAxis.min: 坐标轴刻度最小值,在类目轴中无效。 可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。 不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
  • xAxis.max: 坐标轴刻度最大值,在类目轴中无效。
  • xAxis.scale: 只在数值轴中(type: 'value')有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
  • xAxis.splitNumber: 坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。 在类目轴中无效。
  • xAxis.interval: 坐标轴分割间隔。 因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min, max 强制设定刻度划分,一般不建议使用。 无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。
  • xAxis.axisLine: 坐标轴轴线相关设置。
    • xAxis.axisLine.show: 是否显示坐标轴轴线。
    • xAxis.axisLine.onZero: X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。
    • xAxis.axisLine.lineStyle:
        xAxis.axisLine.lineStyle.color, xAxis.axisLine.lineStyle.width, xAxis.axisLine.lineStyle.type, 
        xAxis.axisLine.lineStyle.shadowBlur, xAxis.axisLine.lineStyle.shadowColor,
        xAxis.axisLine.lineStyle.shadowOffsetX, xAxis.axisLine.lineStyle.shadowOffsetY, 
        xAxis.axisLine.lineStyle.opacity
      
  • xAxis.axisTick: 坐标轴刻度相关设置。
    • xAxis.axisTick.show: 是否显示坐标轴刻度。
    • xAxis.axisTick.interval: 坐标轴刻度的显示间隔,在类目轴中有效。
    • xAxis.axisTick.inside: 坐标轴刻度是否朝内,默认朝外。
    • xAxis.axisTick.length: 坐标轴刻度的长度。
    • xAxis.axisTick.lineStyle
        xAxis.axisTick.lineStyle.color, xAxis.axisTick.lineStyle.width, 
        xAxis.axisTick.lineStyle.type, xAxis.axisTick.lineStyle.shadowBlur, 
        xAxis.axisTick.lineStyle.shadowColor, xAxis.axisTick.lineStyle.shadowOffsetX, 
        xAxis.axisTick.lineStyle.shadowOffsetY, xAxis.axisTick.lineStyle.opacity
      
  • xAxis.axisLabel: 坐标轴刻度标签的相关设置。

    • xAxis.axisLabel.show: 是否显示刻度标签。
    • xAxis.axisLabel.interval: 坐标轴刻度标签的显示间隔,在类目轴中有效。
    • xAxis.axisLabel.inside: 刻度标签是否朝内,默认朝外。
    • xAxis.axisLabel.rotate:刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。 旋转的角度从 -90 度到 90 度。
    • xAxis.axisLabel.margin: 刻度标签与轴线之间的距离。
    • xAxis.axisLabel.formatter: 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

        // 使用字符串模板,模板变量为刻度默认标签 {value}
        formatter: '{value} kg'
      
        // 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
        formatter: function (value, index) {
            // 格式化成月/日,只在第一个刻度显示年份
            var date = new Date(value);
            var texts = [(date.getMonth() + 1), date.getDate()];
            if (idx === 0) {
                texts.unshift(date.getYear());
            }
            return texts.join('/');
        }
      
    • xAxis.axisLabel.textStyle:
        xAxis.axisLabel.textStyle.color, xAxis.axisLabel.textStyle.fontStyle, 
        xAxis.axisLabel.textStyle.fontWeight, xAxis.axisLabel.textStyle.fontFamily, 
        xAxis.axisLabel.textStyle.fontSize
      
  • xAxis.splitLine: 坐标轴在 grid 区域中的分隔线,默认显示。
    • xAxis.splitLine.show: 是否显示分隔线。
    • xAxis.splitLine.interval: 坐标轴分隔线的显示间隔,在类目轴中有效
    • xAxis.splitLine.lineStyle:
        xAxis.splitLine.lineStyle.color
        分隔线颜色,可以设置成单个颜色。
        也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。
        示例
        splitLine: {
            lineStyle: {
                // 使用深浅的间隔色
                color: ['#aaa', '#ddd']
            }
        }
        xAxis.splitLine.lineStyle.width, xAxis.splitLine.lineStyle.type('solid','dashed','dotted'), 
        xAxis.splitLine.lineStyle.shadowBlur, xAxis.splitLine.lineStyle.shadowColor,
        xAxis.splitLine.lineStyle.shadowOffsetX, xAxis.splitLine.lineStyle.shadowOffsetY,
        xAxis.splitLine.lineStyle.opacity
      
  • xAxis.splitArea: 坐标轴在 grid 区域中的分隔区域,默认不显示。
    • xAxis.splitArea.interval: 坐标轴分隔区域的显示间隔,在类目轴中有效。
    • xAxis.splitArea.show: 是否显示分隔区域。
    • xAxis.splitArea.areaStyle:
        xAxis.splitArea.areaStyle.color, xAxis.splitArea.areaStyle.shadowBlur, 
        xAxis.splitArea.areaStyle.shadowColor, xAxis.splitArea.areaStyle.shadowOffsetX,
        xAxis.splitArea.areaStyle.shadowOffsetY, xAxis.splitArea.areaStyle.opacity
      
  • xAxis.data[i]: 类目数据,在类目轴(type: 'category')中有效。
          // 所有类目名称列表
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          // 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
          data: [{
              value: '周一',
              // 突出周一
              textStyle: {
                  fontSize: 20,
                  color: 'red'
              }
          }, '周二', '周三', '周四', '周五', '周六', '周日']
    
    • xAxis.data[i].value: 单个类目名称。
    • xAxis.data[i].textStyle:
        xAxis.data[i].textStyle.color, xAxis.data[i].textStyle.align,
        xAxis.data[i].textStyle.baseline, xAxis.data[i].textStyle.fontStyle,
        xAxis.data[i].textStyle.fontWeight, xAxis.data[i].textStyle.fontFamily,
        xAxis.data[i].textStyle.fontSize