antv g2plot 2.4.7版本画折柱图带有slider,每次slider变化,折线图就脱离出去,应该怎么写chart

你可以按照以下步骤来创建带有滑块的折柱图：

1. 导入需要的模块和数据：

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

const data = [
  { year: '2010', value: 10 },
  { year: '2011', value: 20 },
  { year: '2012', value: 30 },
  { year: '2013', value: 40 },
  { year: '2014', value: 50 },
  { year: '2015', value: 60 },
  { year: '2016', value: 70 },
  { year: '2017', value: 80 },
  { year: '2018', value: 90 },
  { year: '2019', value: 100 },
];

2. 创建 Chart 对象，设置图表基本属性：

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);

3. 创建滑块对象，并设置滑块属性：

const slider = new Slider({
  container: 'slider',
  width: 'auto',
  height: 26,
  start: 0,
  end: 1,
  data,
  xAxis: 'year',
  yAxis: 'value',
  backgroundChart: {
    type: 'line',
  },
});

其中，`start` 和 `end` 分别表示滑块的起始值和结束值，`data` 表示滑块的数据，`xAxis` 和 `yAxis` 分别表示滑块的 x 轴和 y 轴，`backgroundChart` 表示滑块的背景图表，这里设置为折线图。

4. 创建折柱图，并设置图表属性：

chart.interval().position('year*value');
chart.line().position('year*value');

chart.render();

5. 绑定滑块的 `change` 事件，每次滑块变化时更新图表数据：

slider.on('change', (value) => {
  const start = value[0];
  const end = value[1];
  const newData = data.slice(start * data.length, end * data.length);
  chart.changeData(newData);
});

6. 最后，记得渲染滑块对象：

slider.render();

综上所述，完整的代码如下所示：

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

const data = [
  { year: '2010', value: 10 },
  { year: '2011', value: 20 },
  { year: '2012', value: 30 },
  { year: '2013', value: 40 },
  { year: '2014', value: 50 },
  { year: '2015', value: 60 },
  { year: '2016', value: 70 },
  { year: '2017', value: 80 },
  { year: '2018', value: 90 },
  { year: '2019', value: 100 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

const slider = new Slider({
  container: 'slider',
  width: 'auto',
  height: 26,
  start: 0,
  end: 1,
  data,
  xAxis: 'year',
  yAxis: 'value',
  backgroundChart: {
    type: 'line',
  },
});

chart.data(data);

chart.interval().position('year*value');
chart.line().position('year*value');

slider.on('change', (value) => {
  const start = value[0];
  const end = value[1];
  const newData = data.slice(start * data.length, end * data.length);
  chart.changeData(newData);
});

slider.render();
chart.render();

注意，这里使用的是 g2plot 依赖的 Slider 组件，需要先安装 g2plot，再按照上述步骤创建折柱图。如果你不想使用 g2plot，也可以参照上述步骤使用 g2 的自带 Slider 组件来创建滑块。