致访客
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
第十二节
React实现新冠疫情地图
疫情数据获取
https://c.m.163.com/ug/api/wuhan/app/data/list-total
axios
npm install axios --save
例:spider.js
本节代码
请自行下载list-total.json
放置到项目src目录下
spider.js
let axios = require('axios');
(async function () {
const url = "https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=" + new Date().getTime()
let res = await axios.get(url)
console.log(res.data);
})()
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import jsonData from './list-total.json'
//jsonData 相当于向后台发ajax请求
// console.log(jsonData.data.areaTree);
// console.log(jsonData.data.areaTree[0].name);//国家名
// console.log(jsonData.data.areaTree[0].today.confirm);//今日确诊
// console.log(jsonData.data.areaTree[0].today.suspect);//今日疑似
// console.log(jsonData.data.areaTree[0].today.dead);//死亡病例
// console.log(jsonData.data.areaTree[0].today.heal);//今日治愈
let countriesObj = {}
jsonData.data.areaTree.forEach((item, i) => {
item.today.confirm = item.today.confirm ? item.today.confirm : 0;
item.today.suspect = item.today.suspect ? item.today.suspect : 0;
item.today.dead = item.today.dead ? item.today.dead : 0;
item.today.heal = item.today.heal ? item.today.heal : 0;
countriesObj[item.name] = {
confirm: item.today.confirm,
suspect: item.today.suspect,
dead: item.today.dead,
heal: item.today.heal
}
})
console.log(countriesObj);
let countriesList = []
for (const key in countriesObj) {
countriesObj[key].country = key
countriesList.push(countriesObj[key])
}
//排序
countriesList.sort((a, b) => {
return a.confirm < b.confirm ? 1 : -1;
})
console.log(countriesList)
// ----------------------------------------
class COVIDList extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<h1>全球今日疫情动态</h1>
<table style={{ 'border': '1px solid #ccc', padding: '5%' }}>
<thead style={{ backgroundColor: '#ccc' }}>
<tr>
<th>编号</th>
<th>地区</th>
<th>确诊</th>
<th>疑似</th>
<th>死亡</th>
<th>治愈</th>
</tr>
</thead>
<tbody>
{
this.props.countriesList.map((item, index) => {
return (
<tr key={index} style={{ backgroundColor: '#ddd' }}>
<td>{index + 1}</td>
<td>{item.country}</td>
<td>{item.confirm}</td>
<td>{item.suspect}</td>
<td>{item.dead}</td>
<td>{item.heal}</td>
</tr>
)
})
}
</tbody>
</table>
</div>
)
}
}
ReactDOM.render(
<COVIDList countriesList={countriesList} />
,
document.querySelector("#root")
)