antPro 类组件和函数组件中分别引入Echarts

在类组件中引入Echarts

 npm i echearts 或 yarn add echarts 

// 引入 ECharts 主模块

import echarts from 'echarts/lib/echarts';

// 引入饼图

import  'echarts/lib/chart/bar';

// 引入提示框和标题组件

import 'echarts/lib/component/tooltip';

import 'echarts/lib/component/title';

import 'echarts/lib/component/legend';

在函数组件中引入Echearts

   npm i echearts 或 yarn add echarts 

   npm i echarts-for-react 或 yarn add echarts-for-react

import React, { useState, useEffect } from 'react';

import ReactEcharts from 'echarts-for-react';

const BarChart = () => {

  const info = () => {

    let colors = ['#A38AFE', '#F8F246', '#FA7A7A', '#1996F3'];

    return {

      color: colors,

      tooltip: {

        trigger: 'item',

      },

      legend: {

        orient: 'vertical',

        bottom: 'bottom',

        color: '#fff',

      },

      series: [

        {

          name: 'Access From',

          type: 'pie',

          radius: ['30%', '50%'],

          avoidLabelOverlap: false,

          label: {

            show: false,

            position: 'center',

          },

          emphasis: {

            label: {

              show: true,

              fontSize: '16',

              fontWeight: 'bold',

              color: '#fff',

            },

          },

          labelLine: {

            show: false,

          },

          data: [

            { value: 1048, name: '日环比' },

            { value: 735, name: '周环比' },

            { value: 580, name: '月环比' },

            { value: 484, name: '年环比' },

          ],

        },

      ],

    };

  };

  useEffect(() => {

    // info();

  }, []);

  return (

    <>

      {/* <div id="charts1" style={{width:'100%',height:'180px'}}></div> */}

      <ReactEcharts style={{ width: '100%', height: '180px' }} option={info()}></ReactEcharts>

    </>

  );

};

export default BarChart;