React雾霾数据分析平台最佳实现

原谅我有点标题党，本项目只是一个课程作业，就拿自己最近使用比较多的React实现了，不得不说蚂蚁金服的 Ant-Design 真的是企业级后台的最佳组件库，点个赞

项目的思路很简单，首先是利用 node 爬虫获取源数据，之后把数据交给
React 去渲染。
在这个过程中自己加了很多的小想法：

• 利用 Echarts 进行地图展示，传统的图表展示实在是太不直观，而且雾霾这么严肃的事情就应该一览无余嘛。
• 爬虫的服务器定时任务，写代码就是为了偷懒嘛，这种事情当然能自动化就自动化啦
• 项目用到了很多库，Webpack 的构建速度越来越难以忍受，所以对 Webpack 的构建性能也进行了优化。这里推荐一篇性能专栏：https://segmentfault.com/a/1190000007891318

废话不多说，直接上项目
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/

数据来源

http://datacenter.mep.gov.cn 里面原来的数据展示简直不是给人看的

分析工具

• ECharts
• Ant-Design
  百度的 Echarts ，阿里的 Ant-Design ，瞬间感觉逼格满满

爬虫部署

可以将 spider 文件夹放到远程服务器然后建立一个 crontab 定时任务

> crontab -e
> 00 12 * * * /usr/local/bin/node /dev/spider/index.js 2>&1 # 每天12：00执行

项目效果

1. 全国地图

   
   Map

2. 所有城市

   
   City

3. 城市折线

   
   Line

喜欢的话可以给个 star 哦~