我想使用G2plot创建一个堆积图。因此,我必须为该组件创建2个文件。另一个用于使用动态I调用组件的页面
import React, { useEffect, useRef } from "react";
import { Bar } from "@antv/g2plot";
const data = [
{
year: "1991",
value: 3,
type: "Lon",
},
{
year: "1992",
value: 4,
type: "Lon",
},
{
year: "1993",
value: 3.5,
type: "Lon",
},
{
year: "1994",
value: 5,
type: "Lon",
},
{
year: "1995",
value: 4.9,
type: "Lon",
},
{
year: "1996",
value: 6,
type: "Lon",
},
{
year: "1997",
value: 7,
type: "Lon",
},
{
year: "1998",
value: 9,
type: "Lon",
},
{
year: "1999",
value: 13,
type: "Lon",
},
{
year: "1991",
value: 3,
type: "Bor",
},
{
year: "1992",
value: 4,
type: "Bor",
},
{
year: "1993",
value: 3.5,
type: "Bor",
},
{
year: "1994",
value: 5,
type: "Bor",
},
{
year: "1995",
value: 4.9,
type: "Bor",
},
{
year: "1996",
value: 6,
type: "Bor",
},
{
year: "1997",
value: 7,
type: "Bor",
},
{
year: "1998",
value: 9,
type: "Bor",
},
{
year: "1999",
value: 13,
type: "Bor",
},
];
const Main = (
{
// data,
// xAxis = "xAxis",
// yAxis = "yAxis",
// color = "#0D0E68",
}
) => {
const containerRef = useRef(null);
let stackedBarPlot;
useEffect(() => {
stackedBarPlot = new Bar(containerRef.current, {
data: data.reverse(),
isStack: true,
xField: "value",
yField: "year",
seriesField: "type",
autoFit: true,
label: {
position: "left", // 'left', 'middle', 'right'
layout: [
{ type: "interval-adjust-position" },
{ type: "interval-hide-overlap" },
{ type: "adjust-color" },
],
},
});
}, []);
useEffect(() => {
stackedBarPlot.render();
}, []);
return (
<>
<div ref={containerRef}></div>
</>
);
};
export default Main;
将动态导入的文件
import React from "react";
import dynamic from "next/dynamic";
const Main = () => {
const StackedBar = dynamic(
() => import("../../../src/Components/StackedBar"),
{
ssr: false,
}
);
return (
<>
<StackedBar />
</>
);
};
export default Main;
PS。我正在使用nextjs 10这是我预期行为的codesandbox https://codesandbox.io/s/optimistic-banach-up3i0?file=/index.js
事实证明,我必须安装@ antv / g2plot。在那之前,我有@ antv / g2。安装软件包后,一切工作都会很完美。