xAxis 属性控制x轴展示。

配置方式

  1. config = {
  2.   xAxis: {},
  3. };

属性列表

position: String

设置坐标轴的显示位置，可设置的值包含 top、bottom、left、right，即上下左右四个位置

line: Object|null

设置坐标轴线的样式，包括线的颜色、粗细等。如果该属性值为 null 则表示不展示坐标轴线。

  1. line: {
  2.   stroke: {string}, // 坐标轴线的颜色
  3.   strokeOpacity: {number}, // 坐标轴线的透明度，数值范围为 0 - 1
  4.   lineDash: {array}, // 设置虚线的样式，如 [2, 3]第一个用来表示实线的像素，第二个用来表示空白的像素。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值
  5.   lineWidth: {number} // 设置坐标轴线的粗细
  6. }

label: Object|null

设置坐标轴文本的样式。如果该属性值为 null 则表示不展示坐标轴文本。

  1. label: {
  2.   offset: {number}, // 数值，设置坐标轴文本 label 距离坐标轴线的距离
  3.   offsetX: {number}, // 在 offset 的基础上 x 方向的偏移量
  4.   offsetY: {number}, // 在 offset 的基础上 y 方向的偏移量
  5.   // 设置文本的显示样式，还可以是个回调函数，回调函数的参数为该坐标轴对应字段的数值
  6.   rotate: 30, // 注意，旋转角度的配置不再在 textStyle 里配置
  7.   textStyle: {
  8.     textAlign: 'center', // 文本对齐方向，可取值为： start center end
  9.     fill: '#404040', // 文本的颜色
  10.     fontSize: '12', // 文本大小
  11.     fontWeight: 'bold', // 文本粗细
  12.     textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
  13.   } | (text) => {
  14.     // text: 坐标轴对应字段的数值
  15.   },
  16.   autoRotate: {boolean}, // 文本是否需要自动旋转，默认为 true
  17.   /**
  18.    * 用于格式化坐标轴上显示的文本信息的回调函数
  19.    * @param  {string} text  文本值
  20.    * @param  {object} item  该文本值对应的原始数据记录
  21.    * @param  {number} index 索引值
  22.    * @return {string}       返回格式化后的文本值
  23.    */
  24.   formatter(text, item, index) {},
  25.   /**
  26.    * 使用 html 渲染文本
  27.    * @param  {string} text  文本值
  28.    * @param  {object} item  该文本值对应的原始数据记录
  29.    * @param  {number} index 索引值
  30.    * @return {string}       返回 html 字符串
  31.    */
  32.   htmlTemplate(text, item, index) {}
  33. }

title: Object|null

设置坐标轴标题的显示样式。如果该属性值为 null 则表示不展示坐标轴标题。

在 G2 的默认主题中，坐标轴标题是不展示的。

通过 title: true 渲染坐标轴标题。通过以下配置对标题进行个性化配置

  1. title: {
  2.   autoRotate: {boolean}, // 是否需要自动旋转，默认为 true
  3.   offset: {number}, // 数值，设置坐标轴标题距离坐标轴线的距离
  4.   // 设置标题的文本样式
  5.   textStyle: {
  6.     textAlign: 'center', // 文本对齐方向，可取值为： start middle end
  7.     fill: '#404040', // 文本的颜色
  8.     fontSize: '12', // 文本大小
  9.     fontWeight: 'bold', // 文本粗细
  10.     rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
  11.     textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
  12.   },
  13.   position: 'start' | 'center' | 'end' // 标题的显示位置（相对于坐标轴线），可取值为 start center end
  14. }

tickLine: Object|null

设置坐标轴的刻度线。如果该属性值为 null 则表示不展示。

  1. tickLine: {
  2.   lineWidth: 1, // 刻度线宽
  3.   stroke: '#ccc', // 刻度线的颜色
  4.   strokeOpacity: 0.5, // 刻度线颜色的透明度
  5.   length: 5, // 刻度线的长度，可以为负值（表示反方向渲染）
  6.   alignWithLabel:true//设为负值则显示为category数据类型特有的样式
  7. }

subTickCount: Number

设置每两个刻度之间次刻度线的个数，默认为 0，即不展示次刻度线。

subTickLine: Object

设置次刻度线的样式，仅当 subTickCount 不为 0 时生效。

  1. subTickLine: {
  2.   lineWidth: 1, // 次刻度线宽
  3.   stroke: '#ddd', // 次刻度线颜色
  4.   strokeOpacity: 0.5, // 次刻度线颜色的透明度
  5.   length: 3 // 次刻度线的长度，可以为负值（表示反方向渲染）
  6. }

grid: Object|null

设置坐标轴网格线的样式，网格线与坐标轴线垂直。如果该属性值为 null 则表示不展示。

  1. grid: {
  2.   align: 'center', // 声明网格顶点从两个刻度中间开始，默认从刻度点开始
  3.   type: 'line' | 'polygon', // 声明网格的类型，line 表示线，polygon 表示矩形框
  4.   // 当网格类型 type 为 line 时，使用 lineStyle 设置样式
  5.   lineStyle: {
  6.     stroke: '#d9d9d9', // 网格线的颜色
  7.     lineWidth: 1, // 网格线的粗细
  8.     lineDash: [4, 4 ] // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素
  9.   },
  10.   hightLightZero: true, // 默认不高亮0轴
  11.   zeroLineStyle: { // 当且仅当 highLightZero 为 true 时生效
  12.     stroke: '#595959',
  13.     lineDash: [ 0, 0 ]
  14.   },
  15.   alternateColor: '#ccc' | [ '#f80', '#ccc' ], // 当网格类型 type 为 polygon 时，使用 alternateColor 为网格设置交替的颜色，指定一个值则先渲染奇数层，两个值则交替渲染
  16.   hideFirstLine: true | false, // 是否隐藏第一条网格线，默认为 false
  17.   hideLastLine: true | false // 是否隐藏最后一条网格线，默认为 false
  18. }