antv g2plot 怎么自定义缩略轴

在 antv G2Plot 中，可以通过 `slider` 配置项来自定义缩略轴。具体步骤如下：

1. 在 G2Plot 中启用缩略轴，使用 `slider: true` 配置项。

2. 使用 `slider: {}` 配置项来自定义缩略轴，其中包括以下常用配置：

- `start`: 缩略轴的起始位置，一般为 0。

- `end`: 缩略轴的结束位置，一般为 1。

- `height`: 缩略轴的高度。

- `xAxis`: 缩略轴的 X 轴配置项，包括 `type`、`grid` 等。

- `yAxis`: 缩略轴的 Y 轴配置项，包括 `type`、`grid` 等。

- `backgroundStyle`: 缩略轴的背景样式，包括 `fill`、`fillOpacity` 等。

- `data`: 缩略轴的数据，一般为原始数据的子集。

例如，下面是一个简单的自定义缩略轴的示例代码：

import { Line } from '@antv/g2plot';

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

const linePlot = new Line('container', {
  data,
  xField: 'year',
  yField: 'value',
  slider: {
    start: 0,
    end: 0.5,
    height: 26,
    xAxis: {
      type: 'time',
      grid: null,
    },
    yAxis: {
      grid: null,
    },
    backgroundStyle: {
      fill: '#f5f5f5',
      fillOpacity: 0.9,
    },
    data: data.slice(0, 4),
  },
});

linePlot.render();

在上述代码中，我们使用 `slider` 配置项来自定义缩略轴，其中：

- `start` 和 `end` 分别为缩略轴的起始位置和结束位置，这里设置为 0 和 0.5。

- `height` 为缩略轴的高度，这里设置为 26。

- `xAxis` 和 `yAxis` 分别为缩略轴的 X 轴和 Y 轴配置项，这里设置为时间轴和无网格线。

- `backgroundStyle` 为缩略轴的背景样式，这里设置为浅灰色。

- `data` 为缩略轴的数据，这里设置为原始数据的前四个点。

你可以根据实际需求修改以上配置项来自定义缩略轴。