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}`,
      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();