图表介绍

  1. echarts

    https://echarts.baidu.com/

    百度开源, 如果要在react 项目中使用, 需要下载echarts-for-react

  2. G2

    https://antv.alipay.com/zh-cn/g2/3.x/index.html

    阿里开源

  3. bizcharts

    https://bizcharts.net/products/bizCharts

    基于react 包装G2 的开源库，需要额外下载@antv/data-set

  4. d3

    https://d3js.org.cn/

    国外的免费可视化图表库

简单使用

安装插件

1
yarn add echarts echarts-for-react bizcharts @antv/data-set

柱形图

image-20201122152242096

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import React, { Component } from 'react'
import { Card, Button } from 'antd'
import ReactEcharts from 'echarts-for-react'

/*
后台管理的柱状图路由组件
 */
export default class Bar extends Component {
    state = {
        sales: [5, 20, 36, 10, 10, 20], // 销量的数组
        stores: [6, 10, 25, 20, 15, 10] // 库存的数组
    }
update = () => {
    this.setState((state) => ({
        sales: state.sales.map((sale) => sale + 1),
        stores: state.stores.reduce((pre, store) => {
            pre.push(store - 1)
            return pre
        }, [])
    }))
}

// 返回柱状图配置对象
getOptions = (sales, stores) => {
    return {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量', '库存']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: sales
            },
            {
                name: '库存',
                type: 'bar',
                data: stores
            }
        ]
    }
}
render() {
    const { sales, stores } = this.state
    return (
        <div>
            <Card>
                <Button type='primary' onClick={this.update}>
                    更新
                </Button>
            </Card>

            <Card title='柱状图一'>
                <ReactEcharts option={this.getOptions(sales, stores)} />
            </Card>
        </div>
    )
}
}

404设置

1
2
3
4
5
6
7
8
9
10
11
12
13
<Switch>
    <Redirect exact from='/' to='/home'></Redirect>
    <Route path='/home' component={Home} />
    <Route path='/category' component={Category} />
    <Route path='/product' component={Product} />
    <Route path='/role' component={Role} />
    <Route path='/user' component={User} />
    <Route path='/charts/bar' component={Bar} />
    <Route path='/charts/line' component={Line} />
    <Route path='/charts/pie' component={Pie} />
    <Route path='/order' component={Order} />
    <Route component={NotFound} />
</Switch>

打包-无跨域

1
yarn build

将打包生成的文件直接放入服务器的public目录。

打包-跨域

对请求路径进行处理 ， 例如/api/xx等请求路径。

通过serve build命令运行打包后的文件。配置Nginx进行反向代理。

1
2
3
4
5
6
7
8
9
10
11
server {
    listen        8080;
    server_name  location;
    location / {
        proxy_pass http://localhost:5217;
    }
    location /api/ {
        proxy_pass http://localhost:5000;
    }
}