先上效果图:
了解本次学习,先回顾《2019-nCov疫情实时趋势数据可视化Echarts学习(2):获取API数据接口后数据的清洗、处理及JSON标准格式的输出》
一,将JSON数据按照echarts的data要求进行格式化;
var area = [], confirmed = [], confirmedRelative = [], crued = [], died = [];
for (var i = 0; i < dataObj.component[0].caseList.length; i++) {
area.push(dataObj.component[0].caseList[i].area);
confirmed.push(dataObj.component[0].caseList[i].confirmed);
confirmedRelative.push(dataObj.component[0].caseList[i].confirmedRelative);
crued.push(dataObj.component[0].caseList[i].crued);
died.push(dataObj.component[0].caseList[i].died);
}
二、引入echarts.min.js,并创建echart的柱图和折线图;
var dom = document.getElementById("echart1");
var myChart = echarts.init(dom);
var option = {
title: {
text: dataObj.component[0].title,
subtext: '更新时间:' + dataObj.component[0].mapLastUpdatedTime,
x: 'center',
top: '3%',
textStyle: {
color: '#fff',
fontSize: '16'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
confine: true,
},
legend: {
data: ['确诊人数', '疑是人数', '治愈人数', '死亡人数'],
y: 'bottom',
textStyle: {
color: '#fff',
fontSize: '12'
}
},
gird: {
right: '2%',
left: '5%',
top: '10%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#fff'
}
},
data: area
},
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
{
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
}
}],
series: [{
data: confirmed,
type: 'bar',
yAxisIndex: 1,
name: '确诊人数',
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
}
}, {
data: confirmedRelative,
type: 'line',
name: '疑是人数'
}, {
data: crued,
type: 'line',
name: '治愈人数'
}, {
data: died,
type: 'line',
name: '死亡人数'
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
三、实现数据的自动刷新,匹配JSON数据的刷新时间;
var interval;
getEcharts1();
clearInterval(interval);
interval = setInterval(function () {
getEcharts1();
}, 60 * 1000);//60s刷新一次数据;
完整代码:
/*5.echarts的数据利用*/
function getEcharts1() {
var area = [], confirmed = [], confirmedRelative = [], crued = [], died = [];
for (var i = 0; i < dataObj.component[0].caseList.length; i++) {
area.push(dataObj.component[0].caseList[i].area);
confirmed.push(dataObj.component[0].caseList[i].confirmed);
confirmedRelative.push(dataObj.component[0].caseList[i].confirmedRelative);
crued.push(dataObj.component[0].caseList[i].crued);
died.push(dataObj.component[0].caseList[i].died);
}
//console.log(area);
var dom = document.getElementById("echart1");
var myChart = echarts.init(dom);
var option = {
title: {
text: dataObj.component[0].title,
subtext: '更新时间:' + dataObj.component[0].mapLastUpdatedTime,
x: 'center',
top: '3%',
textStyle: {
color: '#fff',
fontSize: '16'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
confine: true,
},
legend: {
data: ['确诊人数', '疑是人数', '治愈人数', '死亡人数'],
y: 'bottom',
textStyle: {
color: '#fff',
fontSize: '12'
}
},
gird: {
right: '2%',
left: '5%',
top: '10%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#fff'
}
},
data: area
},
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
{
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
}
}],
series: [{
data: confirmed,
type: 'bar',
yAxisIndex: 1,
name: '确诊人数',
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
}
}, {
data: confirmedRelative,
type: 'line',
name: '疑是人数'
}, {
data: crued,
type: 'line',
name: '治愈人数'
}, {
data: died,
type: 'line',
name: '死亡人数'
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
var interval;
getEcharts1();
clearInterval(interval);
interval = setInterval(function () {
getEcharts1();
}, 60 * 1000);//60s刷新一次数据;
上面只是将JSON数据和Echarts进行了整合开发,能不能按照确认人数的降序排列?能不能完成像《2019-nCov疫情实时趋势数据可视化Echarts学习(1):柱图和折线图》纵向展示呢?
Done!