续react实现echarts的疫情地图
实现实时获取外部json
参考:
react axios 跨域访问一个或多个域名问题
react+axios用node代理解决跨域
首先package.json
加一句proxy
"proxy":"https://c.m.163.com"
然后spider.js
中写一个异步函数(返回的是promis)
axios是需要用npm install axios
下载的
let axios = require('axios');
exports.getf= async function(){
let httpUrl = 'ug/api/wuhan/app/index/feiyan-data-list?t='
let res = await axios.get(httpUrl+new Date().getTime())
return res.data;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
//import jsonData from './feiyan-data-list.json'//https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list
import './index.css'
import echarts from 'echarts';
import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import {getf} from './spider.js';
//拿到函数之后用异步返回,把渲染的部分都放到then中
getf().then((data)=>{
let jsonData;
jsonData=data;
let provincesObj=[];
jsonData.data.list.map((item)=>{
if(!provincesObj[item.province])
provincesObj[item.province]={
'province':item.province,
"confirm":0,
"heal":0,
"dead":0,
};
provincesObj[item.province].confirm+=item.confirm;
provincesObj[item.province].heal+=item.heal;
provincesObj[item.province].dead+=item.dead;
})
let prok=[];
for(let key in provincesObj){
prok.push(provincesObj[key]);
}
prok.sort((a,b)=>b.confirm-a.confirm)
console.log(new Date(jsonData.timestamp).toLocaleString(),'二月份的数据(数据不全已废弃)')
//console.log(prok)
let province=[];
let num=[];
let map=[];
prok.map((item)=>{
province.push(item.province)
num.push(item.confirm)
map.push({name:item.province,value:item.confirm})
})
class Bili extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div>
<h1>中国病例</h1>
<ul>
<li>
<span>地区</span>
<span>确诊</span>
<span>死亡</span>
<span>治愈</span>
</li>
{
this.props.list.map((item,index)=>{
return (
<li key={index}>
<span>{item.province}</span>
<span>{item.confirm}</span>
<span>{item.dead}</span>
<span>{item.heal}</span>
</li>
)
})
}
</ul>
</div>
)
}
}
class EchartsTest extends React.Component {
componentDidMount() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts'));
// 绘制图表
myChart.setOption({
title: { text: 'ECharts 中国疫情' },
tooltip: {},
xAxis: {
data: province
},
yAxis: {},
series: [{
name: '确诊',
type: 'bar',
data: num
}]
});
}
render() {
return (
<div id="echarts" style={{ width: '80vw', height: "80vh" }}></div>
);
}
}
class Emap extends React.Component{
constructor(props){
super(props)
}
componentDidMount(){
var myChart = echarts.init(document.getElementById('echartsmap'));
myChart.showLoading();
myChart.hideLoading();
echarts.registerMap('China', geoJson);
let option={
title: {
text: '中国疫情图',
subtext: '数据来自163',
sublink: 'https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list'
},
// dataRange: {//分段标色
// x: 'left',
// y: 'center',
// splitList: [
// {start: 2000, label: '2000以上', color: 'rgb(50,0,50)'},
// {start: 1000, end: 2000, label: '1000-2000', color: "rgb(100,50,30)"},
// {start: 500, end: 1000, label: '500-1000', color:' rgb(200,50,100)'},
// {start: 200, end: 500, label: '200-500', color: 'rgb(200,100,100)'},
// {start: 50, end: 200, label: '50-200', color:' rgb(255,100,100)'},
// {start: 10, end: 50, label: '10-50', color: 'rgb(255,255,100)'},
// {start: 1, end: 10, label: '0-10', color:' rgb(255,255,200)'},
// {start: 0, end: 1, label: '0', color:' rgb(255,255,255)'}
// ]},
tooltip: {},
visualMap:{
min : 0,
max : 2000,
left:'left',
top:'bottom',
text:['多','少'],
inRange:{
color:['#F5deB3','#880000']
},
show:true,
calculable: true,
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '确诊',
type: 'map',
mapType: 'china', // 自定义扩展图表类型
label: {
show: true
},
data: this.props.map
}
]
};
myChart.setOption(option);
}
render() {
return (
<div id="echartsmap" style={{ width: '80vw', height: "80vh" }}></div>
);
}
}
ReactDOM.render(
<div>
<Bili list={prok}></Bili>
<EchartsTest />
<Emap map={map}/>
</div>,
document.getElementById('root')
)
});
如图的时间戳是随刷新获取的