React项目中用ts引入和使用 Ant Design Charts

 安装命令:

// 推荐用法
npm install @ant-design/charts --save

使用:

// 官方图例中的引入方式
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Gauge } from '@ant-design/plots';

const DemoGauge = () => {
  const config = {
    percent: 0.75,
    range: {
      color: 'l(0) 0:#B8E1FF 1:#3D76DD',
    },
    startAngle: Math.PI,
    endAngle: 2 * Math.PI,
    indicator: null,
    statistic: {
      title: {
        offsetY: -36,
        style: {
          fontSize: '36px',
          color: '#4B535E',
        },
        formatter: () => '70%',
      },
      content: {
        style: {
          fontSize: '24px',
          lineHeight: '44px',
          color: '#4B535E',
        },
        formatter: () => '加载进度',
      },
    },
  };
  return <Gauge {...config} />;
};

ReactDOM.render(<DemoGauge />, document.getElementById('container'));

官方的另一种快速使用:

import React from 'react';
import { Line } from '@ant-design/charts';

const Page: React.FC = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];

  const config = {
    data,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };
  return <Line {...config} />;
};
export default Page;

我自己使用:

// 第一种:
import React, { useState, useEffect } from 'react';
import { Gauge } from '@ant-design/plots';


const NodeCfg: React.FC = () => {

    const config = {
        height: 100,
        percent: 0.75,
        range: {
          color: 'l(0) 0:#F4664A 1:#FAAD14',
        },
        startAngle: Math.PI,
        endAngle: 2 * Math.PI,
        indicator: null,
        statistic: {
          title: {
            offsetY: -36,
            style: {
              fontSize: '36px',
              color: '#4B535E',
            },
          },
        },
      };



    return (
        <div style={
   
   {weight:'200px',height:'200px'}}>
            <Gauge {...config} />
        </div>
    )

}

export default NodeCfg;

// 第二种:
import React, { useState, useEffect } from 'react';
import { Gauge } from '@ant-design/plots';


const NodeCfg: React.FC = () => {

    return (
        <div style={
   
   {weight:'200px',height:'200px'}}>
            <Gauge
               height={100}
               percent={0.75}
               range={
   
   {
                 color: 'l(0) 0:#F4664A 1:#FAAD14'
               }}
               startAngle={Math.PI}
               endAngle={2 * Math.PI}
               indicator={null}
               statistic={
   
   {
                 title: {
                   offsetY: -36,
                   style: {
                     fontSize: '36px',
                     color: '#4B535E'
                   }
                 }
               }}
            />
        </div>
    )

}

export default NodeCfg;