此博客通过Echarts和D3.js库，结合CSV数据，动态展示了2020年1月24日至4月18日期间的疫情地图，包括每日新增和累计确诊人数。代码中读取CSV文件，统计各省份每日和累计确诊数，并利用时间轴展示变化。同时，使用了jQuery获取地图数据，并注册到Echarts中，实现了地图的可视化效果。
代码原文
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>实验4</title>
<script src = "echarts.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!--jquery是一种数据存放的形式，引入该数据库-->
<script src = "https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:600px;"></div>
<div id = 'demo' style = "width:800px;height:800px;"></div>
<script type = "text/javascript">
var myChart_1 = echarts.init(document.getElementById('main'));//创建时间轴地图
var myChart_2 = echarts.init(document.getElementById('demo'));//创建累计到4月1日确诊的病例
var option_1 = {
baseOption:{ //时间轴参数基本设置
backgroundColor: '#fff',
title:[
{//时间轴标题
textAlign: 'center', //整体的水平对齐方式
left: '22%',
top: '80%',
textStyle:{
fontSize:40,
// color:'rgba(255,255,255,0.7)'
}
},
{//图表标题
text: '疫情地图',
subtext: '2020年1月24日-4月18日统计结果',
left: '25%',
top: '3%',
textStyle:{
fontSize: 50,
// color: 'rgba(255,255,255,0.7)',
}
}
],
tooltip:{},
toolbox:{ //工具栏
show: true,
orient: 'horizontal',
left: 'left',
top: 'top',
feature: {
dataView : {readOnly: false},
restore: {}, //重新开始播放
saveAsImage: {} //以图片形式保存
}
},
visualMap:{ //视觉映射
orient: 'vertical',
left: '4%',
bottom: '25%',
pieces: [ //分段映射颜色
{gt:10000},
{gt:5000,lte:10000},
{gt:1500,lte:5000},
{gt:900,lte:1500},
{gt:500,lte:1000},
{gt:200,lte:500},
{gt:50,lte:200},
{lte:50}
],
color:[ //与片段一一对映
'#404350',
'#d73027',
'#fdae61',
'#313695',
'#74add1',
'#a1d99b',
'#ffffbf',
'#e0f3f8'
],
align: 'right', //色块位置
textStyle: {color: '#666'},
},
timeline:{ //时间线
axisType: 'category',
show: true,
orient: 'horizontal',
autoPlay: true,
inverse:false, //是否反向放置
playInterval: 500, //播放速度
left: 'center',
top: '90%',
width: '80%',
label:{
normal: {
textStyle:{
color: '#999'
}
},
emphasis:{
textStyle:{color: '#fff'}
}
},
symbol: 'none', //时间线上代表点样式
controlStyle:{ //控制元件样式
showNextBtn: false,
showPrevBtn: false,
normal:{
color: '#666',
borderColor: '#666'
},
emphasis:{
color: '#fff',
borderColor: '#fff'
}
},
data:[], //时间点数据集
},
},
options:[] //对应时间点的可变参数
};
d3.csv("CityData.csv",function(error,csvdata){ //读取csv文件
if(error){
console.log(error);
}else{ //读取成功时
var date = csvdata[0].updateTime; //时间信息
var province = csvdata[0].provinceName; //省份
var confirm = 0; //确诊人数
var oneDayData = []; //一天中全国各省的确诊人数
var Day = []; //时间信息集
var data = []; //1/24-4/18时间段内每天各省确诊人数数据集
var sum = [ //统计4月1日前各省累积确诊人数
{name: '北京市',value: 0 },{name: '天津市',value: 0 },
{name: '上海市',value: 0 },{name: '重庆市',value: 0 },
{name: '河北省',value: 0 },{name: '河南省',value: 0 },
{name: '云南省',value: 0 },{name: '辽宁省',value: 0 },
{name: '黑龙江省',value: 0 },{name: '湖南省',value: 0 },
{name: '安徽省',value: 0 },{name: '山东省',value: 0 },
{name: '新疆省',value: 0 },{name: '江苏省',value: 0 },
{name: '浙江省',value: 0 },{name: '江西省',value: 0 },
{name: '湖北省',value: 0 },{name: '广西省',value: 0 },
{name: '甘肃省',value: 0 },{name: '山西省',value: 0 },
{name: '内蒙古自治区',value: 0},{name: '陕西省',value: 0 },
{name: '吉林省',value: 0 },{name: '福建省',value: 0 },
{name: '贵州省',value: 0 },{name: '广东省',value: 0 },
{name: '青海省',value: 0 },{name: '西藏自治区',value: 0 },
{name: '四川省',value: 0 },{name: '宁夏回族自治区',value: 0 },
{name: '海南省',value: 0 },{name: '台湾省',value: 0 },
{name: '香港',value: 0 },{name: '澳门',value: 0 }
];
for(var i=0; i<csvdata.length; i++){ //遍历读入的文件数据
if(date == csvdata[i].updateTime){ //统计各省每天确诊总人数
if(province == csvdata[i].provinceName){ //若当天该省信息已存在，则只进行累加
confirm += parseInt(csvdata[i].city_confirmedCount);
}else{ //当天该省信息不存在，更新oneDayData及判断条件
oneDayData.push({'name':province,'value':confirm});
province = csvdata[i].provinceName;
confirm = parseInt(csvdata[i].city_confirmedCount);
}
}else{ //日期改变，则更新Day[]和判断条件
Day.push(date);
oneDayData.push({'name':province,'value':confirm});
data.push(oneDayData);
oneDayData = [];
date = csvdata[i].updateTime;
province = csvdata[i].provinceName;
confirm = parseInt(csvdata[i].city_confirmedCount);
}
}
//存放最后一天累加的各省确诊人数
Day.push(date);
oneDayData.push({'name':province,'value':confirm});
data.push(oneDayData);
for(var i=Day.length-1; i>=0; i--){ //统计4月1日前各省累计确诊人数
if(Day[i]=="2020/4/1"){
break;
}
for(var j=0; j<data[i].length;j++){
for(var r=0; r<sum.length; r++){
if( sum[r].name == data[i][j].name){
sum[r].value += data[i][j].value;
break;
}
}
}
}
console.log(sum);
console.log(data);
console.log(Day);
//绘制地图
var ROOT_PATH = 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json';
//使用http get请求到地图信息并取回结果
$.get(ROOT_PATH,function(chinaJson){
echarts.registerMap('China',chinaJson); //注册地图
var option_2 = { //统计图2的配置信息
title:{
text: '截至4月1日累计确诊人数统计',
left: 'center',
top: '3%',
textStyle:{
fontSize: 40,
}
},
tooltip:{},
visualMap:{
orient: 'vertical',
left: '4%',
bottom: '25%',
pieces: [
{gt:50000},
{gt:30000,lte:50000},
{gt:20000,lte:30000},
{gt:10000,lte:20000},
{gt:5000,lte:10000},
{gt:1000,lte:5000},
{gt:50,lte:1000},
{lte:50}
],
color:[
'#404350',
'#d73027',
'#fdae61',
'#313695',
'#74add1',
'#a1d99b',
'#ffffbf',
'#e0f3f8'
],
align: 'right',
textStyle: {color: '#666'},
},
series:{
type:'map',
data:sum,
map:'China',
}
}
//依次存放各时间点对应的可变数据
for(var n=Day.length-1; n>=0; n--){
option_1.baseOption.timeline.data.push(Day[n]); //设置时间轴数据集
option_1.options.push({ //设置可变数据集
title:{
show:true,
text:Day[n]+''
},
series:{
name:Day[n],
type:'map',
map:'China',
data:data[n]
}
});
}
myChart_1.setOption(option_1);
myChart_2.setOption(option_2);
});
}
});
</script>
</body>
</html>
1662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
