基于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;

 

测试效果