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’;
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 Blist extends React.Component{
constructor(props){
super(props)
}
render(){
return (
中国病例
地区
确诊
死亡
治愈
{
this.props.list.map((item,index)=>{
return (
{item.province}
{item.confirm}
{item.dead}
{item.heal}
)
})
}
)
}
}
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 (
);
}
}
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)'}
]},
