/Covid-19

疫情实时数据报告可视化(Echarts + nodeJS爬虫)

Primary LanguageJavaScript

Echarts 学习实践,赶在国内疫情末尾写了个疫情展示页面

🔗 展示页面连接

1. 使用

a. 安装依赖包
b. server 目录下先修改crawler.js中的万矿ID和万矿密码,然后 node crawler.js app.js 启动即可(首次启动需修改 crawler.js 中的抓取时间,不然要等好久才会有数据哒!)
c. Selenium+Node+无界面Chrome爬取数据
d. 图形界面下把与Chrome版本对应的chromedriver文件放在脚本目录即可

2. 注意事项

1. flexible.js

修改了 flexible.js 默认的宽度分割

 function setRemUnit () {
+    var rem = docEl.clientWidth / 32;
     docEl.style.fontSize = rem + "px";
  }

所以引入的是本地的 flexible.js,你可以根据自身需求来选择。
flexible.js 安装

npm i -S flexible.js 安装 npm 包,然后用以下两种方式引入

import flexible from 'flexible.js' // 1.引入页面适应模块 flexible
flexible()

或者

require('flexible.js')() // 2.或者require引入

2. CleanWebpackPlugin 插件

我使用的 webpack4.43.0 版本,在引入 CleanWebpackPlugin 插件时发现老版本的引入写法已经弃用了,新版本的引入方法是

const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 这里必须这样引入,不然会报错,原写法改了
...

配置:
new CleanWebpackPlugin(),

3. 数据源及定时抓取

3.1 丁香园

https://ncov.dxy.cn/ncovh5/view/pneumonia

3.2 万矿

需注册万矿账号 官方 Web API 使用说明

3.3 微博热搜词

https://s.weibo.com/top/summary?cate=realtimehot

以上数据均用 NodeJS nodeSchedule 定时抓取,数据的延迟取决于你的抓取时间设置,我们是练习使用,不要过度调用接口,让疫情数据及时更新到更有价值的地方去。

4.Node nodeSchedule 的用法

const schedule = require('node-schedule')

const scheduleCronstyle = () => {
  //每分钟的第30秒定时执行一次:
  schedule.scheduleJob('30 * * * * *', () => {
    console.log('scheduleCronstyle:' + new Date())
  })
}
scheduleCronstyle()

* 代表通配符

*  *  *  *  *  *
     
      |
      day of week (0 - 7) (0 or 7 is Sun)
    └───── month (1 - 12)
   └────────── day of month (1 - 31)
  └─────────────── hour (0 - 23)
 └──────────────────── minute (0 - 59)
└───────────────────────── second (0 - 59, OPTIONAL)

6 个占位符从左到右分别代表:秒、分、时、日、月、周几

* 表示通配符,匹配任意,当秒是 * 时,表示任意秒数都触发,其它类推

示例:

每分钟的第30秒触发: '30 * * * * *'

每小时的1分30秒触发 '30 1 * * * *'

每天的凌晨1点1分30秒触发 '30 1 1 * * *'

每月的1日1点1分30秒触发 '30 1 1 1 * *'

2016年的1月1日1点1分30秒触发 '30 1 1 1 2016 *'

每周1的1点1分30秒触发 '30 1 1 * * 1'

每个参数还可以传入数值范围:

const task1 = () => {
  //每分钟的1-10秒都会触发,其它通配符依次类推
  schedule.scheduleJob('1-10 * * * * *', () => {
    console.log('scheduleCronstyle:' + new Date())
  })
}

task1()

3. 最后

代码写的很乱,后续有空了会抽离优化,或者考虑重构,多端适配也需要优化,目前就先这样吧。


努力让自己在前端的路上走的更远一点 🎉 🎉 🎉 💯 , 最后,求个 ⭐ , 我这前端小白的仓库太白啦~