清末東北大鼠疫傳播時間軸echarts scatter配置项内容和展示
清末东北大鼠疫传播时间轴
配置项如下
var uploadedDataURL = "/asset/get/s/data-1595310733356-zWz9nD4KS.json";
var years = [
"1910 春至夏",
"1910-10-25",
"1910-11-8",
"1910-12-15",
"1911-1-2",
"1911-1-3",
"1911-1-12",
"1911-1-14",
"1911-1-15",
"1911-1-16",
"1911-1-28",
"1911-2-15"
];
var value = [
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}, {
name: '滨江厅(哈尔滨)',
coord: [126.77132267833613, 45.734784033936606]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}, {
name: '滨江厅(哈尔滨)',
coord: [126.77132267833613, 45.734784033936606]
}, {
name: '呼兰府',
coord: [126.92359763708443, 46.078443381997864]
}, {
name: '龙江府(齐齐哈尔)',
coord: [123.96383945179605, 47.34499679108636]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}, {
name: '滨江厅(哈尔滨)',
coord: [126.77132267833613, 45.734784033936606]
}, {
name: '呼兰府',
coord: [126.92359763708443, 46.078443381997864]
}, {
name: '龙江府(齐齐哈尔)',
coord: [123.96383945179605, 47.34499679108636]
}, {
name: '奉天府(沈阳)',
coord: [123.41988183910792, 41.788249856620425]
}, {
name: '双城府',
coord: [126.41157992744763, 45.33714197792002]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}, {
name: '滨江厅(哈尔滨)',
coord: [126.77132267833613, 45.734784033936606]
}, {
name: '呼兰府',
coord: [126.92359763708443, 46.078443381997864]
}, {
name: '龙江府(齐齐哈尔)',
coord: [123.96383945179605, 47.34499679108636]
}, {
name: '奉天府(沈阳)',
coord: [123.41988183910792, 41.788249856620425]
}, {
name: '双城府',
coord: [126.41157992744763, 45.33714197792002]
}, {
name: '长春府',
coord: [125.34529188719735, 43.965515263542216]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}, {
name: '滨江厅(哈尔滨)',
coord: [126.77132267833613, 45.734784033936606]
}, {
name: '呼兰府',
coord: [126.92359763708443, 46.078443381997864]
}, {
name: '龙江府(齐齐哈尔)',
coord: [123.96383945179605, 47.34499679108636]
}, {
name: '奉天府(沈阳)',
coord: [123.41988183910792, 41.788249856620425]
}, {
name: '双城府',
coord: [126.41157992744763, 45.33714197792002]
}, {
name: '长春府',
coord: [125.34529188719735, 43.965515263542216]
}, {
name: '北京',
coord: [116.36800399991237, 39.931426998417315]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}, {
name: '滨江厅(哈尔滨)',
coord: [126.77132267833613, 45.734784033936606]
}, {
name: '呼兰府',
coord: [126.92359763708443, 46.078443381997864]
}, {
name: '龙江府(齐齐哈尔)',
coord: [123.96383945179605, 47.34499679108636]
}, {
name: '奉天府(沈阳)',
coord: [123.41988183910792, 41.788249856620425]
}, {
name: '双城府',
coord: [126.41157992744763, 45.33714197792002]
}, {
name: '长春府',
coord: [125.34529188719735, 43.965515263542216]
}, {
name: '北京',
coord: [116.36800399991237, 39.931426998417315]
}, {
name: '新民府',
coord: [122.77465337067382, 42.20786431897316]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}, {
name: '滨江厅(哈尔滨)',
coord: [126.77132267833613, 45.734784033936606]
}, {
name: '呼兰府',
coord: [126.92359763708443, 46.078443381997864]
}, {
name: '龙江府(齐齐哈尔)',
coord: [123.96383945179605, 47.34499679108636]
}, {
name: '奉天府(沈阳)',
coord: [123.41988183910792, 41.788249856620425]
}, {
name: '双城府',
coord: [126.41157992744763, 45.33714197792002]
}, {
name: '长春府',
coord: [125.34529188719735, 43.965515263542216]
}, {
name: '北京',
coord: [116.36800399991237, 39.931426998417315]
}, {
name: '新民府',
coord: [122.77465337067382, 42.20786431897316]
}, {
name: '永平府',
coord: [118.86627423082398, 40.00090904265058]
}, {
name: '天津府',
coord: [117.20732640534169, 39.22808205722813]
}, {
name: '烟台',
coord: [121.25247534340129, 37.569843605300456]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}, {
name: '滨江厅(哈尔滨)',
coord: [126.77132267833613, 45.734784033936606]
}, {
name: '呼兰府',
coord: [126.92359763708443, 46.078443381997864]
}, {
name: '龙江府(齐齐哈尔)',
coord: [123.96383945179605, 47.34499679108636]
}, {
name: '奉天府(沈阳)',
coord: [123.41988183910792, 41.788249856620425]
}, {
name: '双城府',
coord: [126.41157992744763, 45.33714197792002]
}, {
name: '长春府',
coord: [125.34529188719735, 43.965515263542216]
}, {
name: '北京',
coord: [116.36800399991237, 39.931426998417315]
}, {
name: '新民府',
coord: [122.77465337067382, 42.20786431897316]
}, {
name: '永平府',
coord: [118.86627423082398, 40.00090904265058]
}, {
name: '天津府',
coord: [117.20732640534169, 39.22808205722813]
}, {
name: '烟台',
coord: [121.25247534340129, 37.569843605300456]
}, {
name: '吉林府',
coord: [126.5660489534384, 43.907749215090774]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}, {
name: '滨江厅(哈尔滨)',
coord: [126.77132267833613, 45.734784033936606]
}, {
name: '呼兰府',
coord: [126.92359763708443, 46.078443381997864]
}, {
name: '龙江府(齐齐哈尔)',
coord: [123.96383945179605, 47.34499679108636]
}, {
name: '奉天府(沈阳)',
coord: [123.41988183910792, 41.788249856620425]
}, {
name: '双城府',
coord: [126.41157992744763, 45.33714197792002]
}, {
name: '长春府',
coord: [125.34529188719735, 43.965515263542216]
}, {
name: '北京',
coord: [116.36800399991237, 39.931426998417315]
}, {
name: '新民府',
coord: [122.77465337067382, 42.20786431897316]
}, {
name: '永平府',
coord: [118.86627423082398, 40.00090904265058]
}, {
name: '天津府',
coord: [117.20732640534169, 39.22808205722813]
}, {
name: '烟台',
coord: [121.25247534340129, 37.569843605300456]
}, {
name: '吉林府',
coord: [126.5660489534384, 43.907749215090774]
}, {
name: '锦州府',
coord: [121.10239491322307, 41.267947437338464]
}],
[{
name: '斯列坚斯克',
coord: [117.75323771749034, 52.117187386680726]
}, {
name: '尼古拉耶夫斯克',
coord: [140.21176808618142, 53.20894417837736]
}, {
name: '满洲里',
coord: [117.47791686819967, 49.33200166773428]
}, {
name: '滨江厅(哈尔滨)',
coord: [126.77132267833613, 45.734784033936606]
}, {
name: '呼兰府',
coord: [126.92359763708443, 46.078443381997864]
}, {
name: '龙江府(齐齐哈尔)',
coord: [123.96383945179605, 47.34499679108636]
}, {
name: '奉天府(沈阳)',
coord: [123.41988183910792, 41.788249856620425]
}, {
name: '双城府',
coord: [126.41157992744763, 45.33714197792002]
}, {
name: '长春府',
coord: [125.34529188719735, 43.965515263542216]
}, {
name: '北京',
coord: [116.36800399991237, 39.931426998417315]
}, {
name: '新民府',
coord: [122.77465337067382, 42.20786431897316]
}, {
name: '永平府',
coord: [118.86627423082398, 40.00090904265058]
}, {
name: '天津府',
coord: [117.20732640534169, 39.22808205722813]
}, {
name: '烟台',
coord: [121.25247534340129, 37.569843605300456]
}, {
name: '吉林府',
coord: [126.5660489534384, 43.907749215090774]
}, {
name: '锦州府',
coord: [121.10239491322307, 41.267947437338464]
}, {
name: '济南府',
coord: [117.00148800017651, 36.65013099754471]
}]
];
var name = [
"斯列坚斯克、尼古拉耶夫斯克",
"满洲里",
"滨江厅(哈尔滨)",
"呼兰府、龙江府(齐齐哈尔)",
"双城府、奉天府(沈阳)",
"长春府",
"北京",
"新民府",
"永平府、天津府、烟台",
"吉林府",
"锦州府",
"济南府"
];
$.getJSON(uploadedDataURL, function(geoJson) {
$('body').css({
'position': 'fixed',
'top': 0,
'left': 0,
'width': '100%',
'height': '100%',
'background-size': 'cover',
'-webkit-background-size': 'cover',
'-o-background-size': 'cover',
'background-position': 'center 0',
});
echarts.registerMap('china', geoJson);
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
baseOption: {
timeline: {
axisType: 'category',
orient: 'vertical',
autoPlay: true,
inverse: true,
playInterval: 1000,
left: null,
right: 15,
top: 15,
bottom:15,
width: 160,
height: null,
label: {
normal: {
interval:0,
textStyle: {
fontSize: 20,
fontWeight: 'bolder',
color: 'rgba(255,255,255)'
}
},
emphasis: {
textStyle: {
fontSize: 25,
fontWeight: 'bolder',
color: 'rgba(255,255,255)'
}
}
},
symbol: 'none',
lineStyle: {
color: '#555'
},
checkpointStyle: {
color: '#e4f9ff',
borderColor: '#777',
borderWidth: 3
},
controlStyle: {
showNextBtn: true,
showPrevBtn: true,
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
data: years
},
title: [{
text: '',
subtext: '',
//textAlign: 'center',
left: '70%',
bottom: 53,
textStyle: {
fontSize: 38,
color: 'rgba(255,255,255)',
},
},
{
text: '',
//textAlign: 'center',
left: '68%',
bottom: 15,
textStyle: {
fontSize: 20,
color: 'rgba(255,255,255)'
},
}
],
backgroundColor: '#363636',
geo: {
left:'8%',
top :'62%',
show: true,
map: 'china',
zoom: 2.5,
roam: true,
label: {
normal: {
show: true,
},
emphasis: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#C9E6FF',
borderColor: '#fff',
borderWidth: 2,
shadowColor: '#5AB2FE',
shadowBlur: 20
},
emphasis: {
areaColor: '#C9E6FF',
shadowColor: '#5AB2FE',
shadowBlur: 20
}
}
},
series: [{
name: 'light',
type: 'scatter',
coordinateSystem: 'geo',
//data: convertData(data),
//name: '中国',
//type: 'map',
//mapType: 'china',
//selectedMode: 'multiple',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
markPoint: {
symbol: 'pin',
symbolSize: 25,
label: {
normal: {
position: 'left',
show: true,
//color: '#cf7500',
fontSize: 17,
fontWeight: 'bolder',
formatter: function(d) {
return d.name
}
}
},
effect: {
show: true
},
}
}],
animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut',
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut',
//animationDurationUpdate: 1000,
//animationEasingUpdate: 'quinticInOut'
},
options: []
};
for (var n = 0; n < years.length; n++) {
option.options.push({
title: [{
text: years[n]
},
{
text: name[n] + " 出现肺鼠疫病例"
},
],
series: {
markPoint: {
data: value[n]
}
}
});
console.log(data[n + 1])
}
myChart.setOption(option);
});
截图如下
