碼上歡樂
相關內容    簡體    繁體

Echarts之美國新冠疫情地圖制作

本文轉載自   查看原文   2021-10-26 16:06   1176    Echarts可視化圖表/ FYK

之前參加軟件杯a10賽題做的美國地圖，期間研究了一段時間，echarts社區看很少有人寫美國地圖，還是發出來吧，以后說不定有人能用到，有人需要后面再更吧。

 

美國新冠疫情地圖制作


1、先看效果(數據我剛開始寫的死的，想着先用的靜態數據，后期改成ajax異步加載數據庫中數據)：現有確診人數：累計確診人數-累計死亡人數


 






通過左上角按鈕查看現有確診人數：(數據截止5/29/21)

 

 

修改源碼


參考了https://www.makeapie.com/editor.html?c=xrkbxPqa6f中國地圖的配置，



這里把地圖注冊為USA，保證下面map的名稱和注冊名稱相同，

1、注冊地圖

把阿拉斯加等地區移動到合適位置：

$.get('usageo.json', function(usaJson) {
                    echarts.registerMap('USA', usaJson, {
                        Alaska: { // 把阿拉斯加移到美國主大陸左下方
                            left: -131,
                            top: 25,
                            width: 15
                        },
                        Hawaii: {
                            left: -110, // 夏威夷
                            top: 28,
                            width: 5
                        },
                        'Puerto Rico': { // 波多黎各
                            left: -76,
                            top: 26,
                            width: 2
                        }
                    });

 



注冊地圖時要保證注冊地圖和地圖map命名一樣就行了，

注冊地圖：引入了美國地圖geojson文件，這個文件還是比較好找的，就不發了

 





map類型：注意這里和注冊的名稱要保持一致就行（上下兩個箭頭所指）


 




修改柱狀圖排行功能


參考https://www.makeapie.com/editor.html?c=xrkbxPqa6f，原作者寫了排序的函數，

data.sort(function(o1, o2) {
    if (isNaN(o1.value) || o1.value == null) return -1;
    if (isNaN(o2.value) || o2.value == null) return 1;
    return o1.value - o2.value;
});

 



我把它封裝了一下，可以直接拿來使用，很香。

function NumDescSort(a,b){
        if (isNaN(a.value) || a.value === null) return -1;
        if (isNaN(b.value) || b.value === null) return 1;
        return a.value - b.value;
}

 



然后調用就可以了：

resultdata0.sort(NumDescSort);
resultdata1.sort(NumDescSort);
resultdata2.sort(NumDescSort);

 



尤其是關於y軸name跟隨value配置，之前一直只是排序了value，但是name卻沒有跟隨value變化，就很煩

var yData = [];
for (var i = 0; i < data.length; i++) {
    yData.push(data[i].name);
}

 



然后在下面給y軸賦值 ： data: yData 就很完美的解決問題了


數據來源


建議用梯子官網找



https://covidtracking.com/about-data/data-summary

[CDC COVID 數據跟蹤器](https://covid.cdc.gov/covid-data-tracker/#datatracker-home)

 

數據加載



通過加載usageo.json加載地圖數據，也可以通過js加載

美國地圖json數據太大了，我就不放了，有人想要的話后面再貼上來



地圖數據：usajeo.json

 



​                                                                    



疫情數據格式：MapDatas.json

 

 



 

 

加載疫情數據

這里只是通過jQuery加載靜態數據，有后端的話建議把數據存到數據庫中讀取。

 

 

var data = $.parseJSON($.ajax({
url: "usaMapData.json", //json文件位置，文件名
dataType: "json", //返回數據格式為json
async: false
}).responseText);
// console.log(data);

 

 

源碼


(還是貼一下吧，雖然基本上參考別人寫的中國地圖樣例)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>美國新冠疫情數據可視化</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts-en.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
		<style type="text/css">
			#dv_left_top {
				width: 95%;
				height: 100%;
				position: absolute;
				top: 50px;
				left: 20px;
			}
		</style>
		<script type="text/jscript">
			$(function() {
				initChart();
			})
			function initChart() {
				myChart = echarts.init(document.getElementById('dv_left_top'));
				// function 11 {
				//     return Math.round(Math.random() * 1000);
				// }
				$.get('usageo.json', function(usaJson) {
					echarts.registerMap('USA', usaJson, {
						Alaska: { // 把阿拉斯加移到美國主大陸左下方
							left: -127,
							top: 25,
							width: 15
						},
						Hawaii: {
							left: -110, // 夏威夷
							top: 28,
							width: 5
						},
						'Puerto Rico': { // 波多黎各
							left: -76,
							top: 26,
							width: 2
						}
					});

					var data = $.parseJSON($.ajax({
						url: "usaMapData.json", //json文件位置，文件名
						dataType: "json", //返回數據格式為json
						async: false
					}).responseText);
					// console.log(data);
					
					var resultdata0 = [];
					var resultdata1 = [];
					var resultdata2 = [];
					var resultdata3 = [];
					var sum0 = 0;
					var sum1 = 0;
					var sum2 = 0;
					var sum3 = 0;

					var titledata = [];
					for (var i = 0; i < data.length; i++) {
						var d0 = {
							name: data[i].name,
							value: data[i].value1 - data[i].value2 - data[i].value3,
						};
						var d1 = {
							name: data[i].name,
							value: data[i].value1,
						};
						var d2 = {
							name: data[i].name,
							value: data[i].value2,
						};
						var d3 = {
							name: data[i].name,
							value: data[i].value3,
						}
						titledata.push(data[i].name);
						resultdata0.push(d0);
						resultdata1.push(d1);
						resultdata2.push(d2);
						resultdata3.push(d3);
						sum0 += data[i].value1 - data[i].value2 - data[i].value3;
						sum1 += data[i].value1;
						sum2 += data[i].value2;
						sum3 += data[i].value3;
					}

					function NumDescSort(a, b) {
						if (isNaN(a.value) || a.value === null) return -1;
						if (isNaN(b.value) || b.value === null) return 1;
						return a.value - b.value;
					}

					resultdata0.sort(NumDescSort);
					resultdata1.sort(NumDescSort);
					resultdata2.sort(NumDescSort);
					resultdata3.sort(NumDescSort);
					var yData = [];
					for (var i = 0; i < resultdata0.length; i++) {
						yData.push(resultdata0[i].name);
					}


					option = {
						title: [{
								text: '美國新冠疫情',
								subtext: '數據截至5/29/21',
								left: 'center',
							},
							{
								text: '累計確診人數: ' + sum1,
								right: 320,
								top: 20,
								width: 100,
								textStyle: {
									color: '#000',
									fontSize: 16,
								},
							},
							{
								text: '現有確診人數: ' + sum0,
								right: 120,
								top: 20,
								width: 100,
								textStyle: {
									color: '#000',
									fontSize: 16,
								},
							},
							{
								text: '累計死亡人數: ' + sum2,
								right: 130,
								top: 40,
								width: 100,
								textStyle: {
									color: '#000',
									fontSize: 16,
								},
							}, {
								text: '累計治愈人數: ' + sum3,
								right: 320,
								top: 40,
								width: 100,
								textStyle: {
									color: '#000',
									fontSize: 16,
								},
							},
						],
						tooltip: {
							trigger: 'item',
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data: ['累計確診人數', '現有確診人數', '累計死亡人數', '累計治愈人數'],
							selectedMode: 'single',
						},
						visualMap: {
							min: 0,
							max: 3000000,
							left: 'center',
							top: 'bottom',
							text: ['高', '低'],
							calculable: true,
							colorLightness: [0.2, 100],
							color: ['#ff0000', '#c05050', '#e5cf0d', '#5ab1ef', ],
							dimension: 0,
						},
						// toolbox: {
						// 	show: true,
						// 	orient: 'vertical',
						// 	left: 'right',
						// 	top: 'center',
						// 	feature: {
						// 		dataView: {
						// 			readOnly: false,
						// 		},
						// 		restore: {},
						// 		saveAsImage: {},
						// 	},
						// },
						grid: {
							right: 40,
							top: 100,
							bottom: 0,
							width: '30%',
						},
						xAxis: [{
							position: 'top',
							type: 'value',
							boundaryGap: false,
							splitLine: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
						}],
						yAxis: [{
							type: 'category',
							data: titledata,
							axisTick: {
								alignWithLabel: true,
							},
							axisLabel: {
								show: true,
								textStyle: {
									//   color: '#c3dbff',  //更改坐標軸文字顏色
									fontSize: 11 //更改坐標軸文字大小
								}
							},
							data: yData
						}, ],
						series: [{
								z: 1,
								name: '累計確診人數',
								type: 'map',
								map: 'USA',
								left: '10',
								right: '35%',
								top: 1,
								bottom: '25%',
								zoom: 0.75,
								label: {
									normal: {
										show: true,
									},
									emphasis: {
										show: true,
									},
								},
								//roam: true,
								data: resultdata1,
							},
							{
								z: 1,
								name: '現有確診人數',
								type: 'map',
								map: 'USA',
								left: '10',
								right: '35%',
								top: 1,
								bottom: '35%',
								zoom: 0.75,
								label: {
									normal: {
										show: true,
									},
									emphasis: {
										show: true,
									},
								},
								//roam: true,
								data: resultdata0,
							},
							{
								z: 1,
								name: '累計死亡人數',
								type: 'map',
								map: 'USA',
								left: '10',
								right: '35%',
								top: 1,
								bottom: '35%',
								zoom: 0.75,
								label: {
									normal: {
										show: true,
									},
									emphasis: {
										show: true,
									},
								},
								//roam: true,
								data: resultdata2,
							},
							{
								z: 1,
								name: '累計治愈人數',
								type: 'map',
								map: 'USA',
								left: '10',
								right: '35%',
								top: 1,
								bottom: '35%',
								zoom: 0.75,
								label: {
									normal: {
										show: true,
										// position: "right",
										// fontSize: 10,
									},
									emphasis: {
										show: true,
									},
								},
								//roam: true,
								data: resultdata3,
							},
							{
								name: '累計確診人數',
								z: 2,
								type: 'bar',
								label: {
									normal: {
										show: true,
										position: "right",
										fontSize: 10,
									},
									emphasis: {
										show: true,
									},
								},
								itemStyle: {
									emphasis: {
										color: 'rgb(254,153,78)',
									},
								},
								barWidth: 5,
								data: resultdata1,
							},
							{
								name: '現有確診人數',
								z: 2,
								type: 'bar',
								label: {
									normal: {
										show: true,
										position: "right",
										fontSize: 10,
									},
									emphasis: {
										show: true,
									},
								},
								itemStyle: {
									emphasis: {
										color: 'rgb(254,153,78)',
									},
								},
								barWidth: 5,
								data: resultdata0,
							},
							{
								name: '累計死亡人數',
								z: 2,
								type: 'bar',
								label: {
									normal: {
										show: true,
										position: "right",
										fontSize: 10,
									},
									emphasis: {
										show: true,
									},
								},
								itemStyle: {
									emphasis: {
										color: 'rgb(254,153,78)',
									},
								},
								barWidth: 5,

								data: resultdata2,
							},
							{
								z: 2,
								name: '累計治愈人數',
								type: 'bar',
								map: 'USA',
								left: '10',
								right: '35%',
								top: 100,
								bottom: '35%',
								zoom: 0.85,
								label: {
									normal: {
										show: true,
										position: "right",
										fontSize: 10,
									},
									emphasis: {
										show: true,
									},
								},
								barWidth: 5,
								data: resultdata3,
							},
							{
								name: '累計確診人數',
								z: 2,
								type: 'pie',
								radius: ['10%', '20%'],
								center: ['12%', '85.5%'],
								label: {
									normal: {
										show: true,
									},
									emphasis: {
										show: true,
									},
								},
								itemStyle: {
									emphasis: {
										color: 'rgb(254,153,78)',
									},
								},
								data: resultdata1,
							},
							{
								name: '現有確診人數',
								z: 2,
								type: 'pie',
								radius: ['10%', '20%'],
								center: ['12%', '85.5%'],
								label: {
									normal: {
										show: true,
									},
									emphasis: {
										show: true,
									},
								},
								itemStyle: {
									emphasis: {
										color: 'rgb(254,153,78)',
									},
								},
								data: resultdata0,
							},
							{
								name: '累計死亡人數',
								z: 2,
								type: 'pie',
								radius: ['10%', '20%'],
								center: ['12%', '85.5%'],
								label: {
									normal: {
										show: true,
									},
									emphasis: {
										show: true,
									},
								},
								itemStyle: {
									emphasis: {
										color: 'rgb(254,153,78)',
									},
								},
								data: resultdata2,
							}, {
								name: '累計治愈人數',
								z: 2,
								type: 'pie',
								radius: ['10%', '20%'],
								center: ['12%', '85.5%'],
								label: {
									normal: {
										show: true,
										position: "right",
										fontSize: 10,
									},
									emphasis: {
										show: true,
									},
								},
								itemStyle: {
									emphasis: {
										color: 'rgb(254,153,78)',
									},
								},
								data: resultdata3,
							},
						],
					};
					myChart.setOption(option);

					window.addEventListener("resize", () => {
						myChart.resize(); //resize 頁面大小改變，調整大小
					});

					var index = 0; //播放所在下標
					this.mTime = setInterval(function() {
						myChart.dispatchAction({
							type: 'showTip',
							seriesIndex: 0,
							dataIndex: index
						});
						index++;
						if (index >= option.series[0].data.length) {
							index = 0;
						}
					}, 1500);
				})
			}
		</script>
	</head>
	<body>
		<div id="dv_left_top"></div>
	</body>
</html>
 



需要引入兩個json文件才能運行，需要的后面再更

 


研究了一下Echarts，自己上傳了，嘿嘿嘿，果然成功了，地址放這里了，不過搞得有點丑，懶得優化了

已經上傳到Make a Pie，拿去用吧哈哈哈

(Makeapie社區服務器已經關閉導致鏈接打不開了，害)

 

 水平有限，如有錯誤，請指正，謝謝！

 


參考：

【1】：修復柱狀圖排行功能

https://www.makeapie.com/editor.html?c=xrkbxPqa6f

【2】：地圖配置

https://www.makeapie.com/editor.html?c=xSkFFABj0e

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Python模塊---制作新冠疫情世界地圖 新冠病毒疫情地圖實現 新冠疫情預測 利用Python中pyecharts組件繪制2020“新冠”疫情地圖 利用Python爬取新冠肺炎疫情實時數據，Pyecharts畫2019-nCoV疫情地圖 Python 使用爬蟲獲取新冠疫情歷史數據 ECharts實現中國疫情地圖 新冠疫情數據分析報告 關於新冠疫情數據的可視化分析 python 爬取新冠肺炎疫情數據
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM