十行代碼搞定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，就能夠了。

十分鐘就搞定了一週的工做。