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 ;
};

ReactDOM.render(, 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 ;
};
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 (
        

            
        
    )

}

export default NodeCfg;

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


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

    return (
        

            
        
    )

}

export default NodeCfg;