g2plot2.4.7版本 dualaxes不能加slider,应该怎么昨

如果你使用的是 g2plot 2.4.7 版本，那么可以使用 g2plot 自带的 slider 组件来实现对 dualaxes 折线图的滑动控制。具体实现方式如下：

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

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

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

chart.data(data);

chart.scale({
  value: {
    nice: true,
  },
  value1: {
    nice: true,
  },
});

chart.tooltip({
  showCrosshairs: true,
  shared: true,
});

chart.axis('year', {
  tickLine: null,
});

chart.axis('value', {
  position: 'right',
  tickLine: null,
});

chart.axis('value1', {
  position: 'right',
  tickLine: null,
});

chart
  .line()
  .position('year*value')
  .style({
    lineWidth: 2,
  });

chart
  .line()
  .position('year*value1')
  .color('#5B8FF9')
  .style({
    lineWidth: 2,
  });

const slider = new Slider({
  container: 'slider-container',
  data,
  width: 'auto',
  height: 26,
  xField: 'year',
  start: 0,
  end: 0.5,
  trendCfg: {
    isArea: false,
  },
  onChange: ({ startValue, endValue }) => {
    chart.filter('year', (val) => {
      const year = parseInt(val, 10);
      return year >= startValue && year <= endValue;
    });
    chart.render();
  },
});

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

在这个例子中，我们首先定义了一个 dualaxes 折线图，其中包含两条折线。然后，我们使用 g2plot 的 slider 组件来实现对折线图的滑动控制。具体来说，我们通过调整 slider 的 start 和 end 参数来筛选数据，并在 slider 的 onChange 回调函数中更新折线图的数据范围，并重新渲染图表。

需要注意的是，在使用 slider 组件时，我们需要指定 xField 参数来指定 slider 的 x 轴对应的数据字段。对于 dualaxes 折线图，我们需要将其设置为 'year'。另外，由于 slider 组件默认是绘制填充区域的，而我们希望它只绘制一条线段，所以需要将 trendCfg.isArea 参数设置为 false。

最后，需要将 slider 组件和折线图组件分别渲染到相应的容器中。