在 React 中使用 echarts-for-react / react ，如，柱状图，折线图，饼图

1、下载依赖文件

npm install --save echarts-for-react
npm install --save echarts

2、引入 " echarts-for-react "

import ReactEcharts from 'echarts-for-react';

3、使用

<ReactEcharts option={getOption(sales,stores)} />

4、完整代码

(1) 柱状图:

import React, { useState } from 'react';
import { Card, Row, Col, } from 'antd';
import ReactEcharts from 'echarts-for-react';
import "./index.less";

const HomePage = (props) => {
    const [sales, setSales] = useState([5, 20, 36, 10, 10, 20]);
    const [stores, setStores] = useState([15, 120, 36, 110, 110, 20]);
    // 配置对象
    const getOption = (sal, sto) => {
        return {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量', '库存']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: sales
            },
            {
                name: '库存',
                type: 'bar',
                data: stores
            }]
        }
    };

    return (
        <div>
            <Row gutter={24}>
                <Col span={14}>
                    <Card title="用户新增情况统计" className="shadowBox" >
                        <ReactEcharts option={getOption(sales, stores)} />
                    </Card>
                </Col>
                <Col span={10}>
                    <Card title="用户新增情况统计" className="shadowBox" >
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

export default HomePage

(2) 折线图:

把 type 改成 line

import React, { useState } from 'react';
import { Card, Row, Col, } from 'antd';
import ReactEcharts from 'echarts-for-react';
import "./index.less";

const HomePage = (props) => {
    const [sales, setSales] = useState([5, 20, 36, 10, 10, 20]);
    const [stores, setStores] = useState([15, 120, 36, 110, 110, 20]);
    // 配置对象
    const getOption = (sal, sto) => {
        return {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量', '库存']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: sales
            },
            {
                name: '库存',
                type: 'line',
                data: stores
            }]
        }
    };

    return (
        <div>
            <Row gutter={24}>
                <Col span={14}>
                    <Card title="用户新增情况统计" className="shadowBox" >
                        <ReactEcharts option={getOption(sales, stores)} />
                    </Card>
                </Col>
                <Col span={10}>
                    <Card title="用户新增情况统计" className="shadowBox" >
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

export default HomePage

(3) 饼图:

import React, { useState } from 'react';
import { Card, Row, Col, } from 'antd';
import ReactEcharts from 'echarts-for-react';
import "./index.less";

const HomePage = (props) => {
    const [sales, setSales] = useState([5, 20, 36, 10, 10, 20]);
    const [stores, setStores] = useState([15, 120, 36, 110, 110, 20]);
    // 配置对象
    const getOption = (sal, sto) => {
        return {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 1548, name: '搜索引擎' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
    };

    return (
        <div>
            <Row gutter={24}>
                <Col span={14}>
                    <Card title="用户新增情况统计" className="shadowBox" >
                        <ReactEcharts option={getOption(sales, stores)} />
                    </Card>
                </Col>
                <Col span={10}>
                    <Card title="用户新增情况统计" className="shadowBox" >
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

export default HomePage

参考了这位柠檬不萌只是酸i写的，区别是我用的是函数组件展示的，这个博主用的是class组件写的。