基于Echart的疫情时空演变规律可视化

本文借助echert库，尝试利用疫情数据实现对国内二三月间的各省疫情情况进行分层可视化。其中，主要对各地区确诊、现存、死亡等多种情况分层展示。用户选择相应的类别（确诊、现存、死亡等），可实现二三月间疫情分布进行轮播。

---

*治愈情况效果图

• 实验数据

1. 　　时间：选择2月13日至3月14日数据集（csv格式）
2. 　　数据结构：

    

• 设计思路

   采用js获取csv本地数据，通过日期集合获取、根据日期数据分组、根据类型指定可视化内容，来确定可视化内容。制作轮播效果，设置时间轮播功能，依次播放不同时间内的疫情分布情况。

• 核心代码

1. 日期集合获取

　　 let dayArr = []; // 记录日期

        data.forEach((item) => {//获取日期集合

          if (!dayArr.includes(item.day)) {

            dayArr.push(item.day);

          }

        });

　　

2. 根据日期数据

 1 //根据日期选数据  轮播数组
 2       function autoPlayer(dayArr,data){
 3         let dayIndax = 0;
 4         if(window.timeId_){//清除以为轮播定时器
 5             clearInterval(window.timeId_);
 6         }
 7         window.timeId_=setInterval(function () {
 8           const day_ = dayArr[dayIndax];
 9           console.log(day_ + new Date());
10           let newArr = data.filter((item) => item.day === day_); //  根据时间取数据，例如："2月13日"
11           myChartSetOption("china", newArr, day_); // 渲染地图
12           dayIndax++;
13           if (dayIndax === dayArr.length) {
14             // 轮播完毕初始化
15             dayIndax = 0;
16           }
17         }, 2000);
18       }

---

源码链接