G2 4.x 版本应该用什么滑块插件,或者用哪个函数注册一个slider

在 G2 4.x 版本中，可以使用 G2 自带的滑块组件 `Slider` 实现滑动条的功能。以下是一个示例代码：

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
  { year: '1959 年', sales: 38 },
  { year: '1960 年', sales: 38 },
  { year: '1962 年', sales: 38 },
];

const chart = new G2.Chart({
  container: 'container',
  forceFit: true,
  height: window.innerHeight,
});

chart.source(data);

chart.line().position('year*sales');

chart.render();

// 添加滑块组件
const slider = new Slider({
  container: 'slider',
  width: 'auto',
  height: 26,
  padding: [5, 10],
  start: 0,
  end: 1,
  data,
  xAxis: 'year',
  yAxis: 'sales',
  backgroundChart: {
    type: 'line',
  },
  onChange: (range) => {
    chart.filter('year', (val) => {
      const time = new Date(val).getTime();
      return time >= range.start && time <= range.end;
    });
    chart.repaint();
  },
});

slider.render();

在上述代码中，我们首先创建了一个 G2 图表，并绘制了一条折线图。然后，我们使用 `Slider` 组件创建了一个滑块，并指定了滑块的一些属性，例如宽度、高度、数据等。最后，我们在滑块的 `onChange` 回调函数中，根据滑块的范围对图表进行了筛选过滤，并重新绘制了图表。