原諒我有點(diǎn)標(biāo)題黨，本項(xiàng)目只是一個課程作業(yè)晾嘶，就拿自己最近使用比較多的React實(shí)現(xiàn)了，不得不說螞蟻金服的 Ant-Design 真的是企業(yè)級后臺的最佳組件庫，點(diǎn)個贊
項(xiàng)目的思路很簡單颓芭，首先是利用 node 爬蟲獲取源數(shù)據(jù)，之后把數(shù)據(jù)交給
React 去渲染柬赐。
在這個過程中自己加了很多的小想法：
- 利用 Echarts 進(jìn)行地圖展示亡问，傳統(tǒng)的圖表展示實(shí)在是太不直觀，而且霧霾這么嚴(yán)肅的事情就應(yīng)該一覽無余嘛。
- 爬蟲的服務(wù)器定時任務(wù)州藕，寫代碼就是為了偷懶嘛束世，這種事情當(dāng)然能自動化就自動化啦
- 項(xiàng)目用到了很多庫，Webpack 的構(gòu)建速度越來越難以忍受床玻，所以對 Webpack 的構(gòu)建性能也進(jìn)行了優(yōu)化毁涉。這里推薦一篇性能專欄：https://segmentfault.com/a/1190000007891318
廢話不多說，直接上項(xiàng)目
Github倉庫地址：https://github.com/yanm1ng/react-visualized-platform
step1
git clone https://github.com/yanm1ng/react-visualized-platform.git
# cd project folder
npm i
npm run dev
step2
open bowser at http://localhost:8980/
數(shù)據(jù)來源
http://datacenter.mep.gov.cn 里面原來的數(shù)據(jù)展示簡直不是給人看的
分析工具
- ECharts
- Ant-Design
百度的 Echarts 锈死，阿里的 Ant-Design 贫堰，瞬間感覺逼格滿滿
爬蟲部署
可以將 spider 文件夾放到遠(yuǎn)程服務(wù)器然后建立一個 crontab 定時任務(wù)
> crontab -e
> 00 12 * * * /usr/local/bin/node /dev/spider/index.js 2>&1 # 每天12：00執(zhí)行
項(xiàng)目效果
-
全國地圖
Map -
所有城市
City -
城市折線
Line
喜歡的話可以給個 star 哦~
