摘要
資料是我們每天都在接觸的東西，我們需要清晰的了解去了解資料的變化趨勢，就需要讓資料可視化，最近在接觸學習antd的社區精選組件，上一篇文章主要是講了高德地圖的應用，這次我們就來分享下G2Plot在react中實作可視化資料圖表的簡單應用，
Ant Design Charts的使用方法
安裝
npm install @ant-design/charts
React用法
import { Rader } from '@ant-design/charts'; 引入基于Charts的雷達圖表組件，根據案例檔案配置雷達圖表，更多系列圖表組件配置請參考：https://g2plot.antv.vision/zh/examples/gallery，
import React from 'react';
import { Radar } from '@ant-design/charts';
import './g2.less';
class Page2 extends React.Component {
render() {
const data =https://www.cnblogs.com/BlueBerryCode/p/ [
{
item: 'Design',
score: 70,
},
{
item: 'Development',
score: 60,
},
{
item: 'Marketing',
score: 60,
},
{
item: 'Users',
score: 40,
},
{
item: 'Test',
score: 60,
},
{
item: 'Language',
score: 70,
},
{
item: 'Technology',
score: 50,
},
{
item: 'Support',
score: 30,
},
{
item: 'Sales',
score: 60,
},
{
item: 'UX',
score: 50,
},
];
const config = {
data,
angleField: 'item',
radiusField: 'score',
radiusAxis: {
gridType: 'arc',
gridAlternateColor: 'rgba(0, 0, 0, 0.04)',
},
};
return (
<div className="g2">
<h1>React-G2的簡單應用</h1>
<Radar {...config} />;
</div>
)
}
}
export default Page2;
測驗效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/67762.html
標籤：JavaScript