Echarts之美国新冠疫情地图制作
之前参加软件杯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
