基於AntV圖表庫的Ant DeSign Charts圖表展示的簡單應用

摘要

 　　數據是我們每天都在接觸的東西，我們需要清晰的了解去了解數據的變化趨勢，就需要讓數據可視化。最近在接觸學習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 = [ { 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;

 

測試效果