7、谷粒后台后续操作

图表介绍

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/

   国外的免费可视化图表库

简单使用

安装插件

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

柱形图

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设置

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

打包-无跨域

yarn build

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

打包-跨域

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

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

server {
    listen        8080;
    server_name  location;
    location / {
        proxy_pass http://localhost:5217;
    }
    location /api/ {
        proxy_pass http://localhost:5000;
    }
}