react 使用 g2实现一个双y轴的面积图 如何实现函数组件代码演示

在React中使用G2.js库创建双Y轴的面积图，首先你需要安装G2.js和其他必要的依赖。假设你已经安装了`@antv/g2`库，你可以按照以下步骤编写一个函数组件的示例：

import React, { useEffect } from 'react';
import { Chart } from '@antv/g2';

const DualYAxisAreaChart = ({ data }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      // 初始化图表
      const chart = new Chart({
        container: chartRef.current,
        width: 800,
        height: 600,
        autoFit: true,
      });

      // 创建两个独立的Y轴
      chart.scale('y1', {
        type: 'category',
        range: [0, chart.height],
        nice: false,
      });
      chart.scale('y2', {
        domain: [{ min: 0 }, { max: 100 }],
        nice: false,
        orient: 'right',
      });

      // 添加数据系列，注意设置不同的y轴
      chart.area()
        .position('x*y1')
        .color('category')
        .shape('area');

      chart.area()
        .position('x*y2')
        .color('category')
        .shape('area')
        .yScale('y2'); // 使用右Y轴

      // 绑定数据并渲染
      chart.data(data);
      chart.render();
    }
  }, [data, chartRef]);

  return (
    <div ref={chartRef}>
      {/* 渲染图表容器 */}
      <canvas />
    </div>
  );
};

// 使用示例数据
const sampleData = [
  { x: 'A', y1: '10', y2: 50 },
  { x: 'B', y1: '20', y2: 70 },
  { x: 'C', y1: '30', y2: 90 },
  // 更多数据...
];

export default DualYAxisAreaChart;

在这个例子中，我们首先创建了一个`Chart`实例，并设置了两个Y轴，一个为主轴，一个为副轴。然后添加了两个面积图系列，每个系列都对应一个Y轴。最后，我们将数据绑定到图表上并渲染。