全球疫情可视化实时更新_4月全球疫情升级版本-优快云博客

本文链接：https://blog.youkuaiyun.com/Hui_R_Q_XIONGDA/article/details/105176341

使用ECharts和jQuery实现全球疫情实时地图，从API获取并处理数据，解决国家名称匹配问题，自定义鼠标悬浮提示，设置颜色映射。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全球疫情可视化实时更新

1. 配置

boostrap为前端框架，echarts可视化，jQuery获取、处理数据

2. 思路

前端框架搭好，这里不细说
后端用JQuery从API中获取数据

3. 如何用echarts做全球疫情地图

以累计确诊病例分布图为例

数据源为https://lab.isaaclin.cn/nCoV/api/area?latest=1

获取数据的框架

 $.get("https://lab.isaaclin.cn/nCoV/api/area?latest=1",
  function (data, status) {
  //处理数据
  });

处理Json数据

var arr = [];
            // 处理数据，成地图需要的数据结构
data.results.forEach(item => {
   
   
    // 循环的过程中，向空数组中加入所需的内容
    if(item.countryName==item.provinceName){
   
     
    //这个判断是因为，这个数据还统计了中国省份和城市的数据，所以这个条件用于判断这个元组是否为国家的数据                  
    arr.push({
   
   
        name: item.countryEnglishName, // name固定
        value: item.confirmedCount, // value固定
        nowconfirm: item.currentConfirmedCount, // 当前确诊
        heal: item.curedCount,//治愈数
        dead: item.deadCount,//死亡数
        CName:item.countryName//国家的中文名字
    });
}  
});

因为echarts的world.js对应的国家名是英文的，但是从丁香园获取的国家的英文名与echarts地图里存储的英文名之间可能出现不匹配的问题，因此，我自己一个个筛选了那些名字不匹配的国家，进行名字替换，可能还有没有考虑到的国家。

//统一替换名称不匹配的问题
arr.forEach(item => {
   
   
if(item.name=='United States of America'){
   
   
    item.name='United States'
}
else if(item.name=='The Islamic Republic of Mauritania'){
   
   
    item.name='Mauritania'
}
else if(item.name=='Kazakstan'){
   
   
    item.name='Kazakhstan'
}
else if(item.name=='Somali'){
   
   
    item.name='Somalia'
}
else if(item.name=='Central African Republic'){
   
   
    item.name='Central African Rep.'
}
else if(item.name=='Papua New Cuinea'){
   
   
    item