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

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