本地图组件提供了完整的全国疫情查看功能,并提供增加聚焦到省显示市级数据与回到省级的功能。 @author: shadowingszy,yarray
- resolution: 时间精度。
- data: echarts 中每个区域的疫情数据。
- type: 三种不同的charts显示方式(可选值为: overview, pc, mobile)。
传入参数的数据格式为:
interface Props {
resolution: number; // 地图放大的程度
type: 'overview' | 'pc' | 'mobile'; // 三种不同的显示模式,分别对应总览(不支持下钻,无折线图)、pc端(支持下钻,折线图在地图右方)、移动端(支持下钻,折线图在地图下方)
data: {
provinceSeries: {
[time: number]: ProvinceData
},
countrySeries: {
[time: number]: CountryData
}
}; //echarts 中每个区域的疫情数据。
}
interface ProvinceData {
name: string;
timestamp: number;
confirmed: number;
suspected: number;
cured: number;
dead: number;
cities: {
[name: string]: PatientStatData
}
}
interface PatientStatData {
name: string,
timestamp: 1580699799130,
confirmed: number;
suspected: number;
cured: number;
dead: number;
}
interface CountryData {
confirmedCount: number;
suspectedCount: number;
curedCount: number;
deadCount: number;
seriousCount: number;
updateTime: number;
}
data属性数据样例:
{
"provincesSeries":{
"1580659200000": {
"name": "福建",
"timestamp": 1580699799130,
"cities": {
"福州": {
"name": "福州",
"timestamp": 1580699799130,
"confirmed": 47,
"suspected": 0,
"cured": 0,
"dead": 0,
},
"莆田": {
"name": "莆田",
"timestamp": 1580699799130,
"confirmed": 47,
"suspected": 0,
"cured": 0,
"dead": 0,
}
},
"confirmed": 179,
"suspected": 0,
"cured": 0,
"dead": 0,
},
"1580572800000": {
"name": "福建",
"timestamp": 1580699799130,
"cities": {
"福州": {
"name": "福州",
"timestamp": 1580699799130,
"confirmed": 97,
"suspected": 0,
"cured": 0,
"dead": 0,
},
"莆田": {
"name": "莆田",
"timestamp": 1580699799130,
"confirmed": 107,
"suspected": 0,
"cured": 0,
"dead": 0,
}
},
"confirmed": 219,
"suspected": 0,
"cured": 0,
"dead": 0,
}
},
"countrySeries": {
"1580659200000": {
"confirmedCount": 14490,
"suspectedCount": 19544,
"curedCount": 434,
"deadCount": 304,
"seriousCount": 0,
"updateTime": 1580659262067
},
"1580572800000": {
"confirmedCount": 14490,
"suspectedCount": 19544,
"curedCount": 434,
"deadCount": 304,
"seriousCount": 0,
"updateTime": 1580572800000
},
}
}
<HierarchicalVirusMap data={data} resolution={resolution} type={'overview'} />
<HierarchicalVirusMap data={data} resolution={resolution} type={'pc'} />
<HierarchicalVirusMap data={data} resolution={resolution} type={'mobile'} />