十行代码搞定React图表需求

老板安排了一个图表需求，让我未使用过的React框架上编写一个图表，查询了一圈之后头晕脑胀的，一大堆图表工具echarts , G2什么的，傻傻搞不清楚。明天就要交需求的，想来想去，只有像Excel那种生成图表的工具才能救我。搜索了一圈之后，只有居然都是收费的，还卖得很贵。想去发帖求助，觉得花两千雇个来帮我写一下，一时半会也找不到。公司就我一个前端程序员，也没有后端来帮忙一下。咋整！

搜索一圈之后，发现居然有一个工具叫做react-auto-chart，看说明应该很容易使用，可以通过后台编译出让图表，我就简简单单的填一下数据，前端引入基础库就可以了。

搞起！！！

1、如果还有学过前端包管理软件npm的就用不了，还好这事简单，我会。安装了Node之后，就有npm命令行可以使用了。在teminal中敲击：

yarn add @openapplus/react-auto-chart --save

2、在React 的组件class中使用组件代码。

export default class Chart extends Component  {
    render() {
        const {
            match: {
                params: { code },
            }
        } = this.props;
        return (<GraphreportTempletAutoChart code={code} ></GraphreportTempletAutoChart>);
    }
}

这里code是从url中获取的。不过首先还是的有一个code，其实就是图表的ID。

3、读了Readme之后，找到开放的服务管理后台。注册登录一下。进入链接，在后台创建一下数据源，哈哈，MYSQL的，有各种驱动可以选择。我们公司就MySQL的数据库。然后创建一下chart，选择一个图表的样式，一个数据源可以生成多种样式，然后到组合图表里面把创建的chart关联起来。果然生成了一张大的复杂图表了。美滋滋！
4、把系统生成的图表链接的URL的最后一段数字拿出来，拼接React App的URL，就可以了。

十分钟就搞定了一周的工作。 Screen Shot 2020-02-29 at 9.49.10 PM.png