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;