坐标轴（Axis）

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 500,
  height: 300,
  data: [
    { id: 1, 月份: '03', 销售额: 200 },
    { id: 3, 月份: '04', 销售额: 300 },
    { id: 4, 月份: '05', 销售额: 400 },
    { id: 5, 月份: '06', 销售额: 500 },
    { id: 6, 月份: '07', 销售额: 600 },
    { id: 7, 月份: '08', 销售额: 700 },
  ],
  encode: { x: '月份', y: '销售额', color: '月份' },
  axis: {
    y: {
      title: '销售额',
    },
    x: {
      title: '月份',
      labelFontSize: 12,
      labelFormatter: (d) => `2025-${d}`, // 刻度值线格式化
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 600,
  height: 400,
  data: [
    { 类型: '收入', 值: 1234567.89 },
    { 类型: '支出', 值: -987654.32 },
    { 类型: '利润', 值: 246913.57 },
    { 类型: '投资', 值: 5000000 },
  ],
  encode: { x: '类型', y: '值', color: '类型' },
  axis: {
    y: {
      title: '金额（元）',
      // 使用 d3-format 格式化字符串
      labelFormatter: ',.2s', // 千分位 + 两位有效数字 + SI前缀
    },
    x: {
      title: '业务类型',
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 500,
  height: 500,
  data: [
    { id: 1, label: 'x 轴刻度值标签1', value: 200 },
    { id: 3, label: 'x 轴刻度值标签2', value: 300 },
    { id: 4, label: 'x 轴刻度值标签3', value: 400 },
    { id: 5, label: 'x 轴刻度值标签4', value: 500 },
    { id: 6, label: 'x 轴刻度值标签5', value: 600 },
    { id: 7, label: 'x 轴刻度值标签6', value: 700 },
    { id: 8, label: 'x 轴刻度值标签999', value: 800 },
  ],
  encode: { x: 'label', y: 'value' },
  axis: {
    y: {
      title: 'y 轴标题',
    },
    x: {
      title: 'x 轴标题',
      labelFontSize: 12,
      labelFormatter: (d) => `2025-${d}`,
      size: 100,
      transform: [
        // 缩略
        {
          type: 'ellipsis',
          suffix: '..', // 缩略符（默认...）
          minLength: 8, // 少于8字符不缩略
          maxLength: 12, // 超过12字符强制缩略
        },
        //  换行
        {
          type: 'wrap',
          wordWrapWidth: 80, // 单行最大宽度为 80px
          maxLines: 2, // 最多显示两行
          recoverWhenFailed: true, // 如果换行失败恢复到默认布局
        },
        // 旋转
        {
          type: 'rotate',
          optionalAngles: [0, 45, 90], // 尝试旋转 0 度、45 度、90 度
          recoverWhenFailed: true, // 如果旋转后无法解决问题，恢复到默认角度
        },
        // 隐藏
        {
          type: 'hide',
          keepHeader: true, // 保留第一个刻度值
          keepTail: true, // 保留最后一个刻度值
        },
      ],
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 500,
  height: 500,
  data: [
    { id: 1, label: 'x 轴刻度值标签1', value: 200 },
    { id: 3, label: 'x 轴刻度值标签2', value: 300 },
    { id: 4, label: 'x 轴刻度值标签3', value: 400 },
    { id: 5, label: 'x 轴刻度值标签4', value: 500 },
    { id: 6, label: 'x 轴刻度值标签5', value: 600 },
    { id: 7, label: 'x 轴刻度值标签6', value: 700 },
    { id: 8, label: 'x 轴刻度值标签999', value: 800 },
  ],
  encode: { x: 'label', y: 'value' },
  axis: {
    y: {
      title: 'y 轴标题',
    },
    x: {
      title: 'x 轴标题',
      labelFontSize: 12,
      labelFormatter: (d) => `2025-${d}`,

      size: 100, // 必须设置 size
      labelAutoEllipsis: {
        suffix: '..',
        minLength: 8,
        maxLength: 12,
      },
      labelAutoWrap: {
        wordWrapWidth: 80,
        maxLines: 2,
        recoverWhenFailed: true,
      },
      labelAutoRotate: {
        optionalAngles: [0, 45, 90], // 尝试旋转 0 度、45 度、90 度
        recoverWhenFailed: true, // 如果旋转后无法解决问题，恢复到默认角度
      },
      labelAutoHide: {
        keepHeader: true, // 保留第一个刻度值
        keepTail: true, // 保留最后一个刻度值
      },
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 600,
  height: 400,
  data: [
    { 月份: '1月', 销售额: 2000 },
    { 月份: '2月', 销售额: 1500 },
    { 月份: '3月', 销售额: 3000 },
    { 月份: '4月', 销售额: 2500 },
    { 月份: '5月', 销售额: 4000 },
    { 月份: '6月', 销售额: 3500 },
  ],
  encode: { x: '月份', y: '销售额', color: '月份' },
  axis: {
    y: {
      title: '销售额（万元）',
      // 显示基础网格线
      grid: true,
      gridStroke: '#e6e6e6', // 网格线颜色
      gridLineWidth: 2, // 网格线宽度
      gridStrokeOpacity: 0.7, // 网格线透明度
      gridLineDash: [0, 0],
    },
    x: {
      title: '月份',
      // x 轴通常不需要网格线
      grid: false,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'line',
  width: 600,
  height: 400,
  data: [
    { 时间: '9:00', 温度: 18 },
    { 时间: '12:00', 温度: 24 },
    { 时间: '15:00', 温度: 28 },
    { 时间: '18:00', 温度: 22 },
    { 时间: '21:00', 温度: 20 },
  ],
  encode: { x: '时间', y: '温度' },
  style: { stroke: '#5B8FF9', lineWidth: 2 },
  axis: {
    y: {
      title: '温度（°C）',
      grid: true,
      gridStroke: '#d9d9d9',
      gridLineDash: [4, 4], // 虚线配置：4px 实线，4px 空白
      gridStrokeOpacity: 0.8,
    },
    x: {
      title: '时间',
      grid: true,
      gridStroke: '#f0f0f0',
      gridLineDash: [2, 2], // 更细的虚线
      gridStrokeOpacity: 0.6,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 600,
  height: 400,
  data: [
    { 产品: 'A产品', 销量: 120 },
    { 产品: 'B产品', 销量: 200 },
    { 产品: 'C产品', 销量: 150 },
    { 产品: 'D产品', 销量: 300 },
    { 产品: 'E产品', 销量: 250 },
  ],
  encode: { x: '产品', y: '销量', color: '产品' },
  axis: {
    y: {
      title: '销量（件）',
      grid: true,
      gridStroke: '#e8e8e8',
      gridLineWidth: 1,
      gridAreaFill: ['#fafafa', '#ffffff'], // 交替填充颜色
      gridOpacity: 0.9,
    },
    x: {
      title: '产品类型',
      grid: false,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'area',
  width: 600,
  height: 400,
  data: [
    { 季度: 'Q1', 收入: 100, 支出: 80 },
    { 季度: 'Q2', 收入: 120, 支出: 90 },
    { 季度: 'Q3', 收入: 150, 支出: 110 },
    { 季度: 'Q4', 收入: 180, 支出: 140 },
  ],
  encode: { x: '季度', y: '收入' },
  style: { fillOpacity: 0.6 },
  axis: {
    y: {
      title: '金额（万元）',
      grid: true,
      gridStroke: '#cccccc',
      gridLineWidth: 1,
      // 只显示偶数索引的网格线
      gridFilter: (datum, index) => index % 2 === 0,
      gridStrokeOpacity: 0.8,
    },
    x: {
      title: '季度',
      grid: true,
      gridStroke: '#e6e6e6',
      gridLineDash: [3, 3],
      gridStrokeOpacity: 0.5,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval', // 设置图表类型为柱状图
  marginTop: 40, // 设置图表的上边距像素
  data: [
    { id: 1, label: 'x 轴刻度值标签1', value: 200 },
    { id: 3, label: 'x 轴刻度值标签2', value: 300 },
    { id: 4, label: 'x 轴刻度值标签3', value: 400 },
    { id: 5, label: 'x 轴刻度值标签4', value: 500 },
    { id: 6, label: 'x 轴刻度值标签5', value: 600 },
    { id: 7, label: 'x 轴刻度值标签6', value: 700 },
  ],
  // 设置数据编码
  encode: { x: 'label', y: 'value' },
  axis: {
    // 配置 x 轴
    x: {
      position: 'bottom', // 设置坐标轴的位置

      // 这部分是轴标题的配置
      title: 'x 轴标题', // 轴标题内容
      titleFontWeight: 500, // 标题文字字体粗细
      titleSpacing: 15, // 标题到坐标轴的距离
      titlePosition: 'bottom', // 标题相对坐标轴的位置
      titleFontSize: 14, // 标题文字大小
      titleFill: '#333', // 标题文字填充色

      // 这部分是网格线的配置
      grid: true, // 是否显示网格线
      gridLineWidth: 2, // 网格线描边宽度
      gridStroke: '#f0f0f0', // 网格线描边颜色
      gridStrokeOpacity: 0.8, // 网格线描边透明度
      gridLineDash: [3, 3], // 网格线描边虚线配置
      gridOpacity: 0.9, // 网格线整体透明度
      gridAreaFill: ['#fafafa', '#ffffff'], // 网格线区域填充色
      gridFilter: (_, i) => i % 2 === 0, // 网格线过滤

      // 这部分是轴线的配置
      line: true, // 是否显示轴线
      lineLineWidth: 5, // 轴线描边宽度
      lineStroke: '#f50', // 轴线描边颜色
      arrow: true, // 是否显示箭头
      lineArrowOffset: 8, // 箭头偏移长度

      // 这部分是轴刻度的配置
      tick: true, // 是否显示刻度
      tickCount: 8, // 设置推荐生成的刻度数量
      tickLineWidth: 5, // 刻度线描边宽度
      tickLength: 10, // 刻度线长度
      tickStroke: '#3366ff', // 刻度线描边颜色
      tickDirection: 'positive', // 刻度朝向
      tickOpacity: 0.9, // 刻度线整体透明度

      // 这部分是轴刻度值标签的配置
      label: true, // 是否显示刻度值
      labelFontSize: 12, // 刻度标签文字大小
      labelFill: '#009900', // 刻度标签文字填充色
      labelFontWeight: 500, // 刻度标签文字字体粗细
      labelFontFamily: 'Arial', // 刻度标签文字字体
      labelTextAlign: 'center', // 刻度标签文字水平对齐方式
      labelTextBaseline: 'middle', // 刻度标签文字垂直基线
      labelAlign: 'horizontal', // 刻度值对齐方式
      labelDirection: 'positive', // 刻度值位于轴线的位置
      labelSpacing: 5, // 刻度值到其对应刻度的间距
      labelFillOpacity: 0.9, // 刻度标签文字填充透明度
      labelStroke: '#ffffff', // 刻度标签文字描边颜色
      labelStrokeOpacity: 0.5, // 刻度标签文字描边透明度
      labelLineWidth: 1, // 刻度标签文字描边宽度
      labelOpacity: 1, // 刻度标签文字整体透明度
      labelDx: 2, // 刻度标签文字水平偏移量
      labelDy: 0, // 刻度标签文字垂直偏移量
      labelCursor: 'pointer', // 刻度标签文字鼠标样式
    },
    // 配置 y 轴
    y: {
      position: 'left', // 设置坐标轴的位置

      // 这部分是轴标题的配置
      title: 'y 轴标题', // 轴标题内容
      titleFontWeight: 500, // 标题文字字体粗细
      titleSpacing: 20, // 标题到坐标轴的距离
      titlePosition: 'left', // 标题相对坐标轴的位置
      titleFontSize: 14, // 标题文字大小
      titleFill: '#333', // 标题文字填充色

      // 这部分是网格线的配置
      grid: true, // 是否显示网格线
      gridLineWidth: 2, // 网格线描边宽度
      gridStroke: '#e6e6e6', // 网格线描边颜色
      gridStrokeOpacity: 0.7, // 网格线描边透明度
      gridLineDash: [5, 5], // 网格线描边虚线配置
      gridOpacity: 0.8, // 网格线整体透明度

      // 这部分是轴线的配置
      line: true, // 是否显示轴线
      lineLineWidth: 5, // 轴线描边宽度
      lineStroke: '#f50', // 轴线描边颜色
      arrow: false, // 是否显示箭头
      lineOpacity: 1, // 轴线整体透明度

      // 这部分是轴刻度的配置
      tick: true, // 是否显示刻度
      tickCount: 8, // 设置推荐生成的刻度数量
      tickLineWidth: 5, // 刻度线描边宽度
      tickLength: 10, // 刻度线长度
      tickStroke: '#3366ff', // 刻度线描边颜色
      tickDirection: 'negative', // 刻度朝向
      tickStrokeOpacity: 0.8, // 刻度线描边透明度

      // 这部分是轴刻度值标签的配置
      label: true, // 是否显示刻度值
      labelFontSize: 12, // 刻度标签文字大小
      labelFill: '#009900', // 刻度标签文字填充色
      labelFontWeight: 500, // 刻度标签文字字体粗细
      labelFontFamily: 'Helvetica', // 刻度标签文字字体
      labelTextAlign: 'right', // 刻度标签文字水平对齐方式
      labelTextBaseline: 'middle', // 刻度标签文字垂直基线
      labelAlign: 'perpendicular', // 刻度值对齐方式
      labelSpacing: 8, // 刻度值到其对应刻度的间距
      labelLineHeight: 1.2, // 刻度标签文字行高
      labelFormatter: (d) => `${d}万`, // 刻度值格式化
    },
  },
});

chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'line',
  width: 600,
  height: 400,
  data: [
    { date: '2024-01-01', price: 23.45, volume: 120000 },
    { date: '2024-01-02', price: 24.12, volume: 150000 },
    { date: '2024-01-03', price: 23.89, volume: 98000 },
    { date: '2024-01-04', price: 25.3, volume: 200000 },
    { date: '2024-01-05', price: 24.78, volume: 175000 },
    { date: '2024-01-08', price: 26.15, volume: 220000 },
  ],
  encode: { x: 'date', y: 'price' },
  style: { stroke: '#ff6b35', lineWidth: 2 },
  axis: {
    x: {
      title: '交易日期',
      // 时间格式化需要自定义函数
      labelFormatter: (d) => {
        const date = new Date(d);
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${month}-${day}`;
      },
      labelFontSize: 11,
    },
    y: {
      title: '股价（¥）',
      // 使用 d3-format：固定2位小数
      labelFormatter: '.2f', // 相当于 d.toFixed(2)
      grid: true,
      gridStroke: '#f5f5f5',
      tickCount: 6,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 600,
  height: 400,
  data: [
    { category: '电子产品', sales: 8500000 },
    { category: '服装鞋帽', sales: 12300000 },
    { category: '家居用品', sales: 6800000 },
    { category: '美妆护肤', sales: 15600000 },
    { category: '食品饮料', sales: 9200000 },
  ],
  encode: { x: 'category', y: 'sales', color: 'category' },
  axis: {
    x: {
      title: '商品类别',
      labelFontSize: 12,
    },
    y: {
      title: '销售额',
      // 使用 d3-format：SI前缀格式，自动K/M单位
      labelFormatter: '~s', // 8.5M, 12.3M, 6.8M, 15.6M, 9.2M
      grid: true,
      gridStroke: '#e8e8e8',
      tickCount: 5,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart2 = new Chart({
  container: 'container',
});

chart2.options({
  type: 'interval',
  width: 600,
  height: 400,
  data: [
    { category: '电子产品', sales: 8500000 },
    { category: '服装鞋帽', sales: 12300000 },
    { category: '家居用品', sales: 6800000 },
    { category: '美妆护肤', sales: 15600000 },
    { category: '食品饮料', sales: 9200000 },
  ],
  encode: { x: 'category', y: 'sales', color: 'category' },
  axis: {
    x: {
      title: '商品类别',
      labelFontSize: 12,
    },
    y: {
      title: '销售额',
      // 自定义中文单位格式
      labelFormatter: (value) => {
        if (value >= 100000000) {
          return `${(value / 100000000).toFixed(1)}亿`;
        } else if (value >= 10000) {
          return `${(value / 10000).toFixed(0)}万`;
        } else {
          return value.toString();
        }
      },
      grid: true,
      gridStroke: '#e8e8e8',
      tickCount: 5,
    },
  },
});
chart2.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'area',
  width: 600,
  height: 400,
  data: [
    { quarter: '2023 Q1', users: 125000 },
    { quarter: '2023 Q2', users: 158000 },
    { quarter: '2023 Q3', users: 234000 },
    { quarter: '2023 Q4', users: 312000 },
    { quarter: '2024 Q1', users: 425000 },
    { quarter: '2024 Q2', users: 586000 },
  ],
  encode: { x: 'quarter', y: 'users' },
  style: {
    fill: 'linear-gradient(270deg, #667eea 0%, #764ba2 100%)',
    fillOpacity: 0.6,
  },
  axis: {
    x: {
      title: '季度',
      // 时间字符串处理需要自定义函数
      labelFormatter: (d) => {
        return d.replace('2023 ', '').replace('2024 ', '24');
      },
      labelFontSize: 11,
    },
    y: {
      title: '用户数量',
      // 使用 d3-format：国际标准K/M格式
      labelFormatter: '.0s', // 125k, 158k, 234k, 312k, 425k, 586k
      grid: true,
      gridStroke: '#f0f0f0',
      gridLineDash: [3, 3],
      tickCount: 6,
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 650, // 适当减小宽度以触发缩略
  data: [
    { product: 'iPhone 15 Pro Max', sales: 2500 },
    { product: 'Samsung Galaxy S24 Ultra 512GB 幻夜黑色版本', sales: 1800 },
    {
      product: 'Apple MacBook Pro 16英寸 M3 Max芯片 1TB 深空灰色',
      sales: 1200,
    },
    { product: 'Sony WH-1000XM5 无线降噪头戴式耳机 午夜黑色', sales: 3200 },
    { product: '小米14 Ultra 摄影套装版 16GB+1TB 白色限量版', sales: 2100 },
    { product: 'iPad Pro 12.9英寸 M2芯片 1TB WiFi版 深空灰色', sales: 1600 },
    { product: 'MacBook Air 15英寸 M2芯片 512GB 星光色', sales: 1400 },
    { product: 'AirPods Pro 第二代 主动降噪无线耳机', sales: 2800 },
  ],
  encode: { x: 'product', y: 'sales', color: 'product' },
  axis: {
    x: {
      title: '热销产品',
      labelFontSize: 11,
      // 缩略方案：适合产品名称场景
      size: 100,
      transform: [
        {
          type: 'ellipsis',
          suffix: '...', // 缩略符号
        },
      ],
    },
    y: {
      title: '销量（台）',
      labelFormatter: ',.0f', // 千分位格式
      grid: true,
      gridStroke: '#f0f0f0',
    },
  },
  tooltip: {
    // 悬浮时显示完整产品名称
    title: (d) => d.product,
    items: [{ field: 'sales', name: '销量', formatter: ',.0f' }],
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'line',
  width: 600, // 减小宽度以触发旋转
  marginBottom: 30, // 预留旋转的空间
  data: [
    { time: '2024-01-15 08:00', activeUsers: 1200 },
    { time: '2024-01-15 09:00', activeUsers: 1800 },
    { time: '2024-01-15 10:00', activeUsers: 2800 },
    { time: '2024-01-15 11:00', activeUsers: 3200 },
    { time: '2024-01-15 12:00', activeUsers: 4500 },
    { time: '2024-01-15 13:00', activeUsers: 4200 },
    { time: '2024-01-15 14:00', activeUsers: 3200 },
    { time: '2024-01-15 15:00', activeUsers: 3600 },
    { time: '2024-01-15 16:00', activeUsers: 3800 },
    { time: '2024-01-15 17:00', activeUsers: 4800 },
    { time: '2024-01-15 18:00', activeUsers: 5200 },
    { time: '2024-01-15 19:00', activeUsers: 4800 },
    { time: '2024-01-15 20:00', activeUsers: 4100 },
    { time: '2024-01-15 21:00', activeUsers: 3500 },
    { time: '2024-01-15 22:00', activeUsers: 2600 },
    { time: '2024-01-15 23:00', activeUsers: 1900 },
  ],
  encode: { x: 'time', y: 'activeUsers' },
  style: { stroke: '#5B8FF9', lineWidth: 2 },
  axis: {
    x: {
      title: '时间',
      labelFontSize: 10,
      // 旋转方案：适合时间标签
      size: 100,
      transform: [
        {
          type: 'rotate',
          optionalAngles: [0, 30, 45, 60, 90], // 尝试多个角度
          recoverWhenFailed: true, // 失败时恢复默认角度
        },
      ],
    },
    y: {
      title: '活跃用户数',
      labelFormatter: ',.0f',
      grid: true,
      gridStroke: '#e6e6e6',
      gridLineDash: [3, 3],
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 800,
  data: [
    { department: '市场营销部门', score: 85 },
    { department: '产品研发中心', score: 92 },
    { department: '客户服务部', score: 78 },
    { department: '人力资源管理部', score: 81 },
    { department: '财务审计部门', score: 89 },
    { department: '战略规划中心', score: 87 },
  ],
  encode: { x: 'department', y: 'score', color: 'department' },
  axis: {
    x: {
      title: '部门',
      labelFontSize: 12,
      // 换行方案：适合部门名称
      size: 100,
      transform: [
        {
          type: 'wrap',
          wordWrapWidth: 60, // 单行最大60像素
          maxLines: 2, // 最多显示2行
          recoverWhenFailed: true, // 换行失败时恢复默认布局
        },
      ],
    },
    y: {
      title: '绩效得分',
      grid: true,
      gridStroke: '#f5f5f5',
      domain: [0, 100],
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

// 生成模拟股价数据
const generateStockData = () => {
  const data = [];
  let price = 100;
  const startDate = new Date('2024-01-01');

  for (let i = 0; i < 90; i++) {
    // 增加到90个数据点
    const currentDate = new Date(startDate);
    currentDate.setDate(startDate.getDate() + i);

    // 随机价格波动
    price += (Math.random() - 0.5) * 4;
    price = Math.max(80, Math.min(120, price)); // 限制在80-120范围

    data.push({
      date: currentDate.toISOString().split('T')[0],
      price: Math.round(price * 100) / 100,
    });
  }
  return data;
};

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'line',
  width: 700, // 减小宽度增加密度
  marginRight: 30, // 预留右侧保留最后一个刻度值的宽度
  data: generateStockData(),
  encode: { x: 'date', y: 'price' },
  style: { stroke: '#722ed1', lineWidth: 1.5 },
  axis: {
    x: {
      title: '交易日期',
      labelFontSize: 9,
      // 隐藏方案：适合密集数据
      size: 100,
      transform: [
        {
          type: 'hide',
          keepHeader: true, // 保留第一个日期
          keepTail: true, // 保留最后一个日期
        },
      ],
    },
    y: {
      title: '股价（元）',
      labelFormatter: '.2f',
      grid: true,
      gridStroke: '#f0f0f0',
      gridLineDash: [2, 2],
    },
  },
});
chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'interval',
  width: 650, // 减小宽度以触发变换效果
  marginBottom: 50, // 为多重变换预留空间
  marginRight: 100,
  data: [
    { region: '北京市朝阳区CBD核心商务区金融中心', revenue: 8500 },
    { region: '上海市浦东新区陆家嘴金融贸易区总部基地', revenue: 9200 },
    { region: '深圳市南山区高新技术产业园区', revenue: 7800 },
    { region: '广州市天河区珠江新城国际商务中心', revenue: 6900 },
    { region: '杭州市西湖区互联网创新产业园区', revenue: 5600 },
    { region: '成都市高新区软件产业园科技创新区', revenue: 4800 },
    { region: '苏州市工业园区生物纳米科技园', revenue: 5200 },
    { region: '南京市江宁区未来科技城创新基地', revenue: 4500 },
  ],
  encode: { x: 'region', y: 'revenue', color: 'region' },
  axis: {
    x: {
      title: '业务区域',
      labelFontSize: 10,
      size: 100,
      // 快捷配置，等价于 transform 数组
      labelAutoEllipsis: true, // 启用自动缩略
      labelAutoRotate: true, // 启用自动旋转
      labelAutoHide: true, // 启用自动隐藏
      labelAutoWrap: true, // 启用自动换行
    },
    y: {
      title: '营收（万元）',
      labelFormatter: ',.0f',
      grid: true,
      gridStroke: '#e8e8e8',
    },
  },
});
chart.render();