React +ui组件引用

antd(蚂蚁金服ui)

React组件需要下载模块手动引入

1 下载antd模块 : 

npm install antd --save/$ yarn add antd

2 引入css样式 : 

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

3 解构赋值引入antd中对应的组件: 

import { Button } from 'antd';

4 黏贴对应代码到组件中

ReactDOM.render(
  <>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <br />
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  </>,
  mountNode,//ReactDOM.render(<组件名>,mountNode(组件绑定区域))

);

echarts(京东)

1 下载echarts模块

npm install echarts --save/yarn add echarts --save

2 按需引入echart模块和组件(以下为必须引入)

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    BarChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';

// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);

3 在class类组件或者函数式组件中的钩子函数中(class:componentDidMount/函数式:useEffect)配置图表

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    ...//具体的图标代码
});