2019新型冠状病毒疫情分析

├── dist └── index.html ├── README.md ├── index.html ├── package.json ├── LICENSE ├── .gitignore ├── tsconfig.json └── js └── source.ts /dist/index.html: -------------------------------------------------------------------------------- 1 | 2019新型冠状病毒疫情分析

-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 2019新型冠状病毒疫情发展统计 2 | 3 | 我在此项目中使用了来自新浪的数据接口，并对数据使用做了如下约定 4 | 5 | 1. 只使用2019年1月21日及以后的数据，之前的数据由于没有进入紧急情况，所以统计有可能不能反映真实情况。 6 | 2. 只考虑增量，累积量用来反应形式发展并不直观。 7 | 8 | 由于新浪的新增疑似病例计算有问题，我在后期又整合了网易的数据增加准确率。 9 | 10 | ## 项目部署 11 | 12 | clone 此项目代码后在浏览器里打开 `dist` 目录下的 `index.html` 文件即可看到数据。数据是实时从远程接口获取。 13 | 14 | 如果需要修改代码，或者自己编译，需要安装 `parcel` 15 | 16 | ``` 17 | npm install -g parcel-bundler 18 | ``` 19 | 20 | 安装完以后执行 21 | 22 | ``` 23 | npm run build 24 | ``` 25 | 26 | 即可完成编译，如果缺失npm包，别忘了执行 27 | 28 | ``` 29 | npm install 30 | ``` -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 2019新型冠状病毒疫情分析 7 | 8 | 9 |

10 |

11 | 12 |

13 |

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ncov2019", 3 | "version": "1.0.0", 4 | "description": "从官方数据中提取我感兴趣的2019新型冠状病毒发展情况", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "rm -rf ./dist/* && parcel build index.html --no-source-maps -d dist --public-url ./" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/joyqi/ncov2019.git" 12 | }, 13 | "keywords": [ 14 | "ncov" 15 | ], 16 | "author": "joyqi", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/joyqi/ncov2019/issues" 20 | }, 21 | "homepage": "https://github.com/joyqi/ncov2019#readme", 22 | "dependencies": { 23 | "@types/chart.js": "^2.9.11", 24 | "chart.js": "^2.9.3", 25 | "chartjs-plugin-colorschemes": "^0.4.0", 26 | "fetch-jsonp": "^1.1.3", 27 | "regenerator-runtime": "^0.13.3" 28 | }, 29 | "devDependencies": { 30 | "cssnano": "^4.1.10", 31 | "typescript": "^3.7.5" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 joyqi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | 84 | # Gatsby files 85 | .cache/ 86 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 87 | # https://nextjs.org/blog/next-9-1#public-directory-support 88 | # public 89 | 90 | # vuepress build output 91 | .vuepress/dist 92 | 93 | # Serverless directories 94 | .serverless/ 95 | 96 | # FuseBox cache 97 | .fusebox/ 98 | 99 | # DynamoDB Local files 100 | .dynamodb/ 101 | 102 | # TernJS port file 103 | .tern-port 104 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | // "incremental": true, /* Enable incremental compilation */ 5 | "target": "es2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ 6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | // "lib": [], /* Specify library files to be included in the compilation. */ 8 | // "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 13 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 14 | // "outFile": "./", /* Concatenate and emit output to single file. */ 15 | "outDir": "./dist", /* Redirect output structure to the directory. */ 16 | "rootDir": "js", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 17 | // "composite": true, /* Enable project compilation */ 18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | // "types": [], /* Type declaration files to be included in compilation. */ 48 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 52 | 53 | /* Source Map Options */ 54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 58 | 59 | /* Experimental Options */ 60 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 61 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 62 | 63 | /* Advanced Options */ 64 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /js/source.ts: -------------------------------------------------------------------------------- 1 | import fetchJsonp from 'fetch-jsonp'; 2 | import 'regenerator-runtime/runtime'; 3 | import Chart, { ChartDataSets, ChartData } from 'chart.js'; 4 | import 'chartjs-plugin-colorschemes'; 5 | 6 | /** 7 | * 创建 canvas 8 | * @param sel 选择器 9 | */ 10 | function createCanvas(sel: string): CanvasRenderingContext2D { 11 | let canvas = document.createElement('canvas'), 12 | ctx = canvas.getContext('2d'); 13 | 14 | document.querySelector(sel)?.appendChild(canvas); 15 | 16 | if (null == ctx) { 17 | throw new Error("ctx is null"); 18 | } 19 | 20 | return ctx; 21 | } 22 | 23 | /** 24 | * 获取新浪接口数据 25 | * @param url 地址 26 | */ 27 | async function fetchData(url: string) { 28 | let resp = await fetchJsonp("https://interface.sina.cn/news/wap/" + url, {timeout: 10000}); 29 | return await resp.json(); 30 | } 31 | 32 | async function fetchFixedData() { 33 | let resp = await fetchJsonp("https://joyqi.com/proxy.php?url=" 34 | + encodeURIComponent("https://c.m.163.com/ug/api/wuhan/app/data/list-total"), {timeout: 10000}), 35 | result = await resp.json(); 36 | 37 | return result.contents.data.chinaDayList; 38 | } 39 | 40 | enum CountType { 41 | Sub = 1, 42 | CnAdd = 2, 43 | HbAdd = 3, 44 | Cn = 4, 45 | Hb = 5 46 | }; 47 | 48 | async function draw() { 49 | let mapData = await fetchData("fymap2020_data.d.json"), 50 | hbHistoryData = await fetchData("historydata.d.json?province=hubei"), 51 | cnData = mapData.data.historylist.slice(0).reverse().slice(9), 52 | hbData = hbHistoryData.data.historylist.slice(0).reverse().slice(9), 53 | fixedData = (await fetchFixedData()).slice(1); 54 | 55 | function drawFixed() { 56 | let datasetsA: ChartDataSets = { 57 | label: "新增疑似病例", 58 | data: [], 59 | fill: false 60 | }, 61 | datasetsB: ChartDataSets = { 62 | label: "现存疑似病例", 63 | data: [], 64 | fill: false 65 | }, 66 | datasetsC: ChartDataSets = { 67 | label: "当前湖北在院治疗", 68 | data: [], 69 | fill: false 70 | }, 71 | datasetsD: ChartDataSets = { 72 | label: "当前除湖北在院治疗", 73 | data: [], 74 | fill: false 75 | }, 76 | dataA: ChartData = { 77 | labels: [], 78 | datasets: [datasetsA, datasetsB] 79 | }, 80 | dataB: ChartData = { 81 | labels: [], 82 | datasets: [datasetsC, datasetsD] 83 | }; 84 | 85 | fixedData.forEach((value: any, i: number) => { 86 | let treating = value.total.confirm - value.total.heal - value.total.dead, 87 | treatingHb = hbData[i + 1].conNum - hbData[i + 1].cureNum - hbData[i + 1].deathNum, 88 | [year, month, day] = value.date.split('-'); 89 | 90 | dataA.labels?.push(month + '.' + day); 91 | dataB.labels?.push(month + '.' + day); 92 | datasetsA.data?.push(value.today.suspect); 93 | datasetsB.data?.push(value.total.suspect); 94 | datasetsC.data?.push(treatingHb); 95 | datasetsD.data?.push(treating - treatingHb); 96 | }); 97 | 98 | new Chart(createCanvas('#main'), { 99 | type: "line", 100 | data: dataA, 101 | options: { 102 | plugins: { 103 | colorschemes: { 104 | scheme: 'brewer.SetOne3' 105 | } 106 | } 107 | } 108 | }); 109 | 110 | new Chart(createCanvas('#main'), { 111 | type: "line", 112 | data: dataB, 113 | options: { 114 | plugins: { 115 | colorschemes: { 116 | scheme: 'brewer.DarkTwo3' 117 | } 118 | } 119 | } 120 | }); 121 | } 122 | 123 | function drawMap() { 124 | let i = 0, finished = 0, percent = 0, 125 | btn = document.querySelector('#generate'), 126 | datasets: ChartDataSets = { 127 | label: "今日全国除湖北重点新增病例分布", 128 | data: [] 129 | }, 130 | data: ChartData = { 131 | labels: [], 132 | datasets: [datasets] 133 | }, 134 | datasetsIncr: ChartDataSets = { 135 | label: "今日全国除湖北重点新增病例增幅", 136 | data: [] 137 | }, 138 | dataIncr: ChartData = { 139 | labels: [], 140 | datasets: [datasetsIncr] 141 | }, 142 | totalIncr = (mapData.data.historylist[0].cn_conNum - mapData.data.historylist[1].cn_conNum) 143 | - (hbHistoryData.data.historylist[0].conNum - hbHistoryData.data.historylist[1].conNum); 144 | 145 | btn?.addEventListener('click', () => { 146 | btn?.setAttribute('disabled', 'disabled'); 147 | 148 | let intv = setInterval(async () => { 149 | if (i == mapData.data.list.length) { 150 | clearInterval(intv); 151 | 152 | new Chart(createCanvas('#map'), { 153 | type: "doughnut", 154 | data: data, 155 | options: { 156 | plugins: { 157 | colorschemes: { 158 | scheme: 'brewer.Paired12' 159 | } 160 | } 161 | } 162 | }); 163 | 164 | new Chart(createCanvas('#map'), { 165 | type: "bar", 166 | data: dataIncr, 167 | options: { 168 | plugins: { 169 | colorschemes: { 170 | scheme: 'brewer.Paired12' 171 | } 172 | } 173 | } 174 | }); 175 | 176 | return; 177 | } 178 | 179 | let item = mapData.data.list[i]; 180 | i ++; 181 | 182 | if (item.ename == 'hubei') { 183 | finished ++; 184 | return; 185 | } 186 | 187 | let historyData = await fetchData("historydata.d.json?province=" + item.ename), 188 | incr = historyData.data.historylist[0].conNum - historyData.data.historylist[1].conNum, 189 | incrPercent = historyData.data.historylist[0].conNum / historyData.data.historylist[1].conNum; 190 | finished ++; 191 | percent = Math.ceil(finished * 100 / mapData.data.list.length); 192 | 193 | // 影响大于2%的需要重点关注 194 | if (incr / totalIncr >= 0.02) { 195 | data.labels?.push(item.name); 196 | dataIncr.labels?.push(item.name); 197 | datasets.data?.push(incr); 198 | datasetsIncr.data?.push(incrPercent); 199 | } 200 | 201 | if (btn !== null) { 202 | btn.textContent = "已获取 " + item.name + " 进度 " + percent + "%"; 203 | } 204 | }, 2000); 205 | }); 206 | } 207 | 208 | function generateData() { 209 | let data: ChartData = { 210 | labels: [], 211 | datasets: [] 212 | }; 213 | 214 | cnData.slice(1).forEach((value: any) => { 215 | data.labels?.push(value.date); 216 | }); 217 | 218 | return data; 219 | } 220 | 221 | function generateDatasets(type: string, title: string, countType: CountType) { 222 | let datasets: ChartDataSets = { 223 | label: title, 224 | data: [], 225 | fill: false 226 | }; 227 | 228 | let lastCn = cnData[0]['cn_' + type + 'Num'], 229 | lastHb = hbData[0][type + 'Num']; 230 | 231 | for (let i = 1; i < cnData.length; i ++) { 232 | let currCn = cnData[i]['cn_' + type + 'Num'], 233 | currHb = hbData[i][type + 'Num'], 234 | currCnAdd = currCn - lastCn, 235 | currHbAdd = currHb - lastHb, 236 | date = cnData[i].date, 237 | count = 0; 238 | 239 | switch (countType) { 240 | case CountType.Sub: 241 | count = currCnAdd - currHbAdd; 242 | break; 243 | case CountType.Cn: 244 | count = currCn; 245 | break 246 | case CountType.CnAdd: 247 | count = currCnAdd; 248 | break; 249 | case CountType.Hb: 250 | count = currHb; 251 | break; 252 | case CountType.HbAdd: 253 | count = currHbAdd; 254 | break; 255 | } 256 | 257 | datasets.data?.push(count); 258 | 259 | lastCn = currCn; 260 | lastHb = currHb; 261 | } 262 | 263 | return datasets; 264 | } 265 | 266 | function drawConfirmed() { 267 | let data = generateData(); 268 | 269 | data.datasets?.push(generateDatasets('con', '湖北新增确诊', CountType.HbAdd)); 270 | data.datasets?.push(generateDatasets('con', '除湖北新增确诊', CountType.Sub)); 271 | 272 | new Chart(createCanvas('#main'), { 273 | type: 'line', 274 | data: data, 275 | options: { 276 | plugins: { 277 | colorschemes: { 278 | scheme: 'office.Concourse6' 279 | } 280 | } 281 | } 282 | }); 283 | } 284 | 285 | function drawCure() { 286 | let data = generateData(); 287 | 288 | data.datasets?.push(generateDatasets('cure', '除湖北新增治愈', CountType.Sub)); 289 | data.datasets?.push(generateDatasets('cure', '湖北新增治愈', CountType.HbAdd)); 290 | data.datasets?.push(generateDatasets('death', '除湖北新增死亡', CountType.Sub)); 291 | data.datasets?.push(generateDatasets('death', '湖北新增死亡', CountType.HbAdd)); 292 | 293 | new Chart(createCanvas('#main'), { 294 | type: 'line', 295 | data: data, 296 | options: { 297 | plugins: { 298 | colorschemes: { 299 | scheme: 'office.Circuit6' 300 | } 301 | } 302 | } 303 | }); 304 | } 305 | 306 | drawFixed(); 307 | drawConfirmed(); 308 | drawCure(); 309 | drawMap(); 310 | } 311 | 312 | draw(); 313 | --------------------------------------------------------------------------------