AntV使用（https://antv.antgroup.com/）

import React, { useEffect } from "react";

// npm install @antv/g2

import { Chart } from "@antv/g2";

const Charts = () => {

function Ccc() {

// 准备数据

const data = [

{ genre: "Sports", sold: 300 },

{ genre: "Strategy", sold: 115 },

{ genre: "Action", sold: 120 },

{ genre: "Shooter", sold: 350 },

{ genre: "Other", sold: 150 },

];

// 初始化图表实例

const chart = new Chart({

container: "container",

});

// 声明可视化

chart

.interval() // 创建一个 Interval 标记

.data(data) // 绑定数据

.encode("x", "genre") // 编码 x 通道

.encode("y", "sold")// 编码 y 通道

// 渲染可视化

chart.render();

}

useEffect(() => {

Ccc();

}, []);

return (

<div>

<div id="container"></div>

</div>

);

};

export default Charts;