十行代码搞定React图表需求

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

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

搞起！！！

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

yarn add @openapplus/react-auto-chart --save
复制代码

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

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

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

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

十分钟就搞定了一周的工做。