可以使用AntV G2Plot中提供的Slider组件，将其放置在已经存在的Plot图表组件上，并在改变Slider的值时，利用onChange事件回调函数获取当前Slider所在的位置或值，并进行相应的数据处理。

示例代码：

import React, { useState, useEffect } from 'react';
import { Slider } from '@ant-design/charts';
import { Chart, Interval } from '@ant-design/charts';

const Demo = () => {
  const [data, setData] = useState([]);
  const [sliderValue, setSliderValue] = useState(undefined);

  useEffect(() => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/663acfc4-e3d4-486c-a4a5-beb5a6924e2f.json')
      .then(response => response.json())
      .then(originData => {
        // 根据当前选中的slider位置或值，截取对应的数据片段
        const visibleData = originData.slice(sliderValue?.start, sliderValue?.end);
        setData(visibleData);
      });
  }, [sliderValue]);

  const handleChange = sliderValue => {
    setSliderValue(sliderValue);
  };

  const config = {
    data,
    xField: 'year',
    yField: 'gdp',
    xAxis: { type: 'time' },
    slider: {
      start: 0.1,
      end: 0.7,
      onChange: handleChange,
    },
  };

  return (
    

      
GDP数据可视化图表
      
        
      
      
当前Slider的值为：{JSON.stringify(sliderValue)}
    
  );
};

export default Demo;

在这个示例代码中，我们使用了@ant-design/charts和@ant-design/charts/es/slider中提供的Slider组件，用于控制图表中显示的数据片段。

在Slider组件的onChange回调函数中，我们可以获取当前Slider所在的起始和结束位置或值，并将其存储在状态中。在useEffect中，我们可以监控Slider的值的变化，并根据变化的情况，动态截取对应的数据片段，用于图表的渲染。