chart.options({
  type: 'interval',
  width: 500,
  height: 300,
  data: [
    { id: 1, 月份: '三月', 销售额: 200 },
    { id: 3, 月份: '四月', 销售额: 300 },
    { id: 4, 月份: '五月', 销售额: 400 },
    { id: 5, 月份: '六月', 销售额: 500 },
    { id: 6, 月份: '七月', 销售额: 600 },
    { id: 7, 月份: '八月', 销售额: 700 },
  ],
  encode: { x: '月份', y: '销售额', color: '月份' },
  // 不需要 axis 配置也能自动生成坐标轴
  // axis: {},
});

chart.options({
  type: 'interval',
  width: 500,
  height: 300,
  data: [
    { id: 1, 月份: '三月', 销售额: 200 },
    { id: 3, 月份: '四月', 销售额: 300 },
    { id: 4, 月份: '五月', 销售额: 400 },
    { id: 5, 月份: '六月', 销售额: 500 },
    { id: 6, 月份: '七月', 销售额: 600 },
    { id: 7, 月份: '八月', 销售额: 700 },
  ],
  encode: { x: '月份', y: '销售额', color: '月份' },
  // 配置 axis（坐标轴）
  axis: {
    // 配置水平方向的坐标轴属性
    x: {
      // 配置参数以及示例可以继续往下看..
    },
  },
});

chart.options({
  type: 'interval',
  width: 500,
  height: 300,
  data: [
    { id: 1, 月份: '三月', 销售额: 200 },
    { id: 3, 月份: '四月', 销售额: 300 },
    { id: 4, 月份: '五月', 销售额: 400 },
    { id: 5, 月份: '六月', 销售额: 500 },
    { id: 6, 月份: '七月', 销售额: 600 },
    { id: 7, 月份: '八月', 销售额: 700 },
  ],
  encode: { x: '月份', y: '销售额', color: '月份' },
  // 配置 axis（坐标轴）
  axis: {
    // 配置垂直方向的坐标轴属性
    y: {
      // 配置参数以及示例可以继续往下看..
    },
  },
});

({
  type: 'interval',
  axis: {
    x: { labelFormatter: '%0' },
    y: { tickCount: 5 },
  },
});

({
  type: 'view',
  axis: {
    x: { labelFormatter: '%0' },
    y: { tickCount: 5 },
  },
});

({
  type: 'interval',
  axis: { x: false }, // 隐藏 x 水平方向坐标轴
});

({
  type: 'interval',
  axis: { y: false }, // 隐藏 y 垂直方向坐标轴
});

({
  type: 'interval',
  axis: false,
});

({
  axis: {
    x: {
      title: 'x 轴标题',
      labelFontSize: 12,
      labelFormatter: (d) => `2025-${d}`,
      transform: [
        // 旋转
        {
          type: 'rotate',
          optionalAngles: [0, 45, 90], // 尝试旋转 0 度、45 度、90 度
          recoverWhenFailed: true, // 如果旋转后无法解决问题，恢复到默认角度
        },
      ],
    },
  },
});

({
  // 配置坐标轴
  axis: {
    // 配置 y 轴
    y: {
      // 这部分是轴标题的配置
      title: 'Frequency', // 设置 y 轴标题
      titleSpacing: 30, // 设置 y 轴标题与轴线之间的间距
      titlePosition: 'left', // 设置 y 轴标题位置
      titleFill: 'steelblue', // 设置 y 轴标题的颜色
      titleFontSize: 16, // 设置 y 轴标题字体大小
      titleFontWeight: 'bold', // 设置 y 轴标题字体粗细
      titleFontFamily: 'Arial', // 设置 y 轴标题字体
      titleTextAlign: 'center', // 设置 y 轴标题水平对齐方式
      titleTextBaseline: 'middle', // 设置 y 轴标题垂直基线
      titleOpacity: 0.9, // 设置 y 轴标题整体透明度
      titleStroke: '#333', // 设置 y 轴标题描边颜色
      titleLineWidth: 1, // 设置 y 轴标题描边宽度
      titleShadowColor: 'rgba(0,0,0,0.3)', // 设置 y 轴标题阴影颜色
      titleShadowBlur: 3, // 设置 y 轴标题阴影模糊度
      titleShadowOffsetX: 2, // 设置 y 轴标题阴影水平偏移
      titleShadowOffsetY: 2, // 设置 y 轴标题阴影垂直偏移
      titleDx: 5, // 设置 y 轴标题水平偏移量
      titleDy: 0, // 设置 y 轴标题垂直偏移量
      titleCursor: 'pointer', // 设置 y 轴标题鼠标样式
    },
    // 配置 x 轴
    x: {
      // 这部分是轴标题的配置
      title: 'Letter', // 设置 x 轴标题
      titleSpacing: 20, // 设置 x 轴标题与轴线之间的间距
      titlePosition: 'bottom', // 设置 x 轴标题位置
      titleFontSize: 14, // 设置 x 轴标题字体大小
      titleFontWeight: 'normal', // 设置 x 轴标题字体粗细
      titleFill: '#666', // 设置 x 轴标题颜色
      titleTextAlign: 'center', // 设置 x 轴标题水平对齐方式
      titleOpacity: 1, // 设置 x 轴标题透明度
      titleLineHeight: 1.2, // 设置 x 轴标题行高
      titleFillOpacity: 0.8, // 设置 x 轴标题填充透明度
    },
  },
});

({
  axis: {
    x: {
      line: true, // 是否显示轴线
      arrow: true, // 是否显示箭头
      lineArrowOffset: 10, // 箭头偏移长度
      lineArrowSize: 30, // 箭头尺寸
      lineLineWidth: 10, // 轴线描边宽度
      lineExtension: [5, 5], // 轴线两侧的延长线
      lineStroke: '#333', // 轴线描边颜色
      lineStrokeOpacity: 0.8, // 轴线描边透明度
      lineLineDash: [5, 5], // 轴线描边虚线配置
      lineOpacity: 1, // 轴线整体透明度
      lineShadowColor: 'rgba(0,0,0,0.3)', // 轴线阴影颜色
      lineShadowBlur: 3, // 轴线阴影高斯模糊系数
      lineShadowOffsetX: 2, // 轴线阴影水平偏移量
      lineShadowOffsetY: 2, // 轴线阴影垂直偏移量
      lineCursor: 'pointer', // 轴线鼠标样式
    },
    y: {
      line: true, // 是否显示轴线
      arrow: true, // 是否显示箭头
      lineArrowOffset: 10, // 箭头偏移长度
      lineArrowSize: 30, // 箭头尺寸
      lineLineWidth: 10, // 轴线描边宽度
      lineStroke: '#666', // 轴线描边颜色
      lineOpacity: 0.9, // 轴线整体透明度
    },
  },
});

({
  // 配置坐标轴
  axis: {
    y: {
      tickCount: 10, // 设置推荐生成的刻度数量
      tickLength: 20, // 设置 y 轴刻度线的长度
      tickFilter: (_, i) => i % 3 !== 0, // 过滤 y 轴刻度线，只显示每隔 3 个刻度线
      tick: true, // 是否显示刻度
      tickDirection: 'positive', // 刻度朝向
      tickStroke: '#333', // 刻度线描边颜色
      tickStrokeOpacity: 0.8, // 刻度线描边透明度
      tickLineWidth: 2, // 刻度线描边宽度
      tickLineDash: [2, 2], // 刻度线描边虚线配置
      tickOpacity: 1, // 刻度线整体透明度
      tickShadowColor: 'rgba(0,0,0,0.2)', // 刻度线阴影颜色
      tickShadowBlur: 2, // 刻度线阴影高斯模糊系数
      tickShadowOffsetX: 1, // 刻度线阴影水平偏移量
      tickShadowOffsetY: 1, // 刻度线阴影垂直偏移量
      tickCursor: 'crosshair', // 刻度线鼠标样式
    },
    x: {
      tick: true, // 是否显示刻度
      tickCount: 8, // 设置推荐生成的刻度数量
      tickMethod: (start, end, count) => {
        // 自定义刻度生成方法
        const step = (end - start) / (count - 1);
        return Array.from({ length: count }, (_, i) => start + i * step);
      },
      tickLength: 10, // 刻度线长度
      tickDirection: 'positive', // 刻度朝向
      tickStroke: '#3366ff', // 刻度线描边颜色
      tickLineWidth: 5, // 刻度线描边宽度
      tickOpacity: 0.9, // 刻度线整体透明度
      tickFilter: (_, i) => i % 2 === 0, // 过滤刻度线，只显示偶数索引的刻度
    },
  },
});

// 常用数值格式
'.2f'; // 固定2位小数：23.45
'.0f'; // 整数：23
'.1%'; // 百分比：23.4%
',.0f'; // 千分位：1,234,567

// SI前缀格式（推荐用于大数值）
's'; // SI前缀：1.2M, 3.4k
'.1s'; // 1位小数SI：1.2M, 3.4k
'~s'; // 去尾随零SI：1.2M, 3k
'.0s'; // 整数SI：1M, 3k

// 货币格式
'$,.2f'; // 美元：$1,234.56
'$.2s'; // 美元SI：$1.23M

// 科学计数法
'.2e'; // 科学计数：1.23e+6
'.2g'; // 通用格式：1.2e+6 或 1234

// 进制格式
'd'; // 十进制整数：1234
'x'; // 十六进制：4d2
'o'; // 八进制：2322
'b'; // 二进制：10011010010

axis: {
  y: {
    labelFormatter: (value, index, data) => {
      // 自定义逻辑
      if (value >= 1000000) {
        return (value / 1000000).toFixed(1) + 'M';
      } else if (value >= 1000) {
        return (value / 1000).toFixed(1) + 'K';
      }
      return value.toString();
    },
  },
}

({
  axis: {
    x: {
      title: 'x 轴标题',
      labelFontSize: 12,
      labelFormatter: (d) => `2025-${d}`,
      labelTransform: 'rotate(90)',
    },
  },
});

({
  axis: {
    x: {
      title: 'x 轴标题',
      labelFontSize: 12,
      labelFormatter: (d) => `2025-${d}`,
      labelTransform: 'rotate(90)',
    },
  },
});

export interface Transform {
  /** 避免刻度值重叠时的额外边距 */
  margin?: number[];
}

export interface EllipsisOverlapCfg extends Transform {
  type: 'ellipsis';
  /** 缩略替换字符，默认为 ... */
  suffix?: string;
  /** 文本短于该长度时不再缩略 */
  minLength: string | number;
  /** 文本短于该长度时一定会进行缩略 */
  maxLength?: string | number;
  /** 每次缩略执行步长 */
  step?: string | number;
}

export interface RotateOverlapCfg extends Transform {
  type: 'rotate';
  /** 可选的旋转角度值 */
  optionalAngles: number[];
  /** 当旋转无法避免重叠时，是否恢复为默认旋转角度 */
  recoverWhenFailed?: boolean;
}

export interface HideOverlapCfg extends Transform {
  type: 'hide';
  /** 保证第一个刻度值不被隐藏 */
  keepHeader?: boolean;
  /** 保证最后一个刻度值不被隐藏 */
  keepTail?: boolean;
}

export interface WrapOverlapCfg extends Transform {
  type: 'wrap';
  /** 单行最大宽度 */
  wordWrapWidth?: number;
  /** 最大行数 */
  maxLines?: number;
  recoverWhenFailed?: boolean;
}