用react框架g2plot2.4版本 DualAxes slider的交互,例子

以下是使用 React 和 G2Plot 2.4 版本实现 DualAxes slider 交互的示例代码：

import React, { useState } from 'react';
import { DualAxes } from '@antv/g2plot';
import { Slider } from 'antd';

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

const DualAxesSlider = () => {
  const [sliderValue, setSliderValue] = useState([0, 1]);

  const handleSliderChange = (value) => {
    setSliderValue(value);
  };

  const chartRef = React.useRef();

  React.useEffect(() => {
    const dualAxes = new DualAxes(chartRef.current, {
      data: [data, data],
      xField: 'year',
      yField: ['value', 'count'],
      geometryOptions: [
        {
          geometry: 'line',
          smooth: true,
          lineStyle: { lineWidth: 2 },
          color: '#5B8FF9',
        },
        {
          geometry: 'column',
          color: '#5AD8A6',
        },
      ],
      tooltip: {
        showMarkers: false,
        shared: true,
      },
      slider: {
        start: sliderValue[0],
        end: sliderValue[1],
        trendCfg: {
          isArea: false,
        },
        backgroundChart: {
          type: 'line',
        },
      },
    });

    dualAxes.render();

    return () => {
      dualAxes.destroy();
    };
  }, [sliderValue]);

  return (
    <div>
      <div ref={chartRef} />
      <Slider range max={1} step={0.01} value={sliderValue} onChange={handleSliderChange} />
    </div>
  );
};

export default DualAxesSlider;

这个例子展示了如何使用 G2Plot 的 DualAxes 组件和 Ant Design 的 Slider 组件实现 slider 交互。Slider 组件的值变化会触发 DualAxes 组件的重新渲染，从而实现动态更新图形。注意，这个例子使用的是 G2Plot 2.4 版本，如果你使用的是其他版本，一些 API 可能会有所不同。