基于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;
测试效果
赞 (0)