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

測試效果

版權聲明：本文為博主原創文章，轉載請附上原文出處鏈接和本聲明。