在react中用g2plot画折柱图,并且折线数据和柱状图数据不一样,加上slider

要在 React 中使用 G2Plot，你需要先安装 `@antv/g2plot` 和 `react` 两个依赖包。然后你可以在 React 的组件中引入 `@antv/g2plot` 并使用它提供的组件来渲染图表。以下是一个使用 G2Plot 渲染折柱图的示例代码：

import React, { useRef, useEffect } from 'react';
import { Chart } from '@antv/g2';
import { Column, Line } from '@antv/g2plot';

const MyChart = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const data = [
      { date: '2022-01-01', value: 30, visits: 20 },
      { date: '2022-01-02', value: 40, visits: 40 },
      { date: '2022-01-03', value: 50, visits: 60 },
      { date: '2022-01-04', value: 60, visits: 80 },
      { date: '2022-01-05', value: 70, visits: 100 },
      { date: '2022-01-06', value: 80, visits: 120 },
      { date: '2022-01-07', value: 90, visits: 140 },
    ];

    const columnPlot = new Column(chartRef.current, {
      data,
      xField: 'date',
      yField: 'value',
      yAxis: {
        label: {
          formatter: (v) => `${v}k`,
        },
      },
      data: data.map(item => ({ date: item.date, value: item.value })),
      tooltip: {
        shared: true,
        showMarkers: false,
      },
      slider: {
        start: 0.1,
        end: 0.5,
      }
    });

    const linePlot = new Line(chartRef.current, {
      data,
      xField: 'date',
      yField: 'visits',
      seriesField: '',
      yAxis: {
        label: {
          formatter: (v) => `${v}k`,
        },
      },
      data: data.map(item => ({ date: item.date, visits: item.visits })),
      tooltip: {
        shared: true,
        showMarkers: false,
      },
    });

    columnPlot.render();
    linePlot.render();

    return () => {
      columnPlot.destroy();
      linePlot.destroy();
    };
  }, []);

  return <div ref={chartRef} />;
};

export default MyChart;

在这个示例代码中，我们使用了 `useRef` 和 `useEffect` 两个 React Hook 来创建和渲染 G2Plot 的图表。我们首先定义了一个 `data` 数组来存储折线图和柱状图的数据，然后分别创建了一个 `Column` 和一个 `Line` 实例来绘制柱状图和折线图。我们还使用了 `tooltip`、`slider` 等选项来增强图表的交互性和可视化效果。最后，我们将图表渲染到一个 `div` 元素中，并在组件销毁时销毁图表实例。