During the epidemic, various application systems and big data systems have brought great help to epidemic prevention and fighting. The National Museum listed the code as a collection for the first time, which is the first line of code written by Ali programmers and the signatures of the R&D personnel during the fight against the epidemic. This shows the professional responsibility of the majority of programmers to strive to be brave "rebels" in the face of the epidemic and contribute to the fight against the "epidemic". The spirit of responsibility is an important part of the Chinese spirit in the new era. In the fight against the epidemic, the people of the whole country joined hands to fight the epidemic with practical actions, demonstrating the spirit of responsibility of the Chinese nation. We must learn the spirit of responsibility in the new era shown in the fight against the epidemic, so as to improve moral quality and cultivate the awareness of responsibility; strengthen knowledge learning and cultivate the ability to take responsibility; pay attention to social practice and cultivate the ability to take responsibility; and the spirit of responsibility in the epidemic It is internalized in the heart and externalized in action.
1 Case presentation
This chapter will comprehensively use the knowledge of ECMAScript, BOM, DOM and Ajax to realize the real-time epidemic monitoring system based on ECharts as shown in Figure 11-5.
2 Case study
The real-time epidemic monitoring system is divided into the following modules: real-time time, real-time global new crown vaccine vaccination data, national real-time epidemic tracking, cumulative vaccination trend in China, vaccination trend per 100 people in China, epidemic map, TOP10 existing confirmed cases in the country, and risk areas. Chapter 10 has already introduced how to obtain the epidemic data from the Tencent server through Ajax technology. The main work of this chapter is to process the epidemic data and visualize the data through ECharts line charts, pie charts, and data maps.
Before starting to write JavaScript code, first create a folder to store external js files used, a folder to store CSS files, and a folder to store materials; then create a new index.html file and index.js file. Introduce all js files in the webpage file index.html, including echarts.min.js, china.js, jquery.min.js and index.js.
The sample code is as follows:
<body>
//此处省略其他html代码
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
3 page layout
As shown in Figure 11-6, we can divide the data display page into 9 areas, as shown in Figure 11-6. The division of the page area is not unique, and readers can divide it by themselves. For HTML and CSS codes, see the supporting source code.
Figure 11-6 Page layout diagram
4 Real Time Module
Use the toLocaleString() method provided by the built-in object Date to convert the time into the native format for display. Using a timer method, execute a function every second to get the latest time. The sample code is as follows:
function showTime(){
//获取页面中时间显示区域，并将内容赋值为当前时间的本地格式
document.querySelector('#kyjs-wrap .time').innerText = (new Date()).toLocaleString();
}
showTime();//先执行一次函数，显示当前时间
setInterval(showTime,1000); //每隔一秒执行一次函数
The above code realizes the effect, as shown in Figure 11-7.
Figure 11-7 Real time
5 Global new crown vaccine real-time vaccination data module
Render the data at the specified position on the page, the sample code is as follows:
1 //渲染全球累计接种数据
2 document.getElementById('world-all').innerHTML = f(data.VaccineTopData.全球.total_vaccinations);
3 //渲染全球较上日新增数据
4 document.getElementById('world-add').innerHTML = f(data.VaccineTopData.全球.new_vaccinations);
5 //渲染全球每百人接种数据
6 document.getElementById('world-per').innerHTML = f(data.VaccineTopData.全球.total_vaccinations_per_hundred);
7 //渲染中国累计接种数据
8 document.getElementById('china-all').innerHTML = f(data.VaccineTopData.中国.total_vaccinations);
9 document.getElementById('china-add').innerHTML = f(data.VaccineTopData.中国.new_vaccinations);//渲染中国较上日新增数据
10 //渲染中国每百人接种数据
11 document.getElementById('china-per').innerHTML = f(data.VaccineTopData.中国.total_vaccinations_per_hundred);
12 function f(value){//数量过亿转换为以亿计量，过万转换为以万计量
13 if (value >= 100000000) {
14 return (value / 100000000).toFixed(1) + "<span>亿剂<\/span>";
15 }
16 else if (value >= 10000){
17 return (value / 10000).toFixed(1) + "<span>万剂<\/span>";
18 }
19 else
20 return value+ "<span>剂<\/span>";
21 }
In the above code, lines 1 to 11 display the global real-time vaccination data of the new crown vaccine acquired by Ajax on the corresponding position of the page. Due to the large amount of data, when displaying, the encapsulation function f() converts the number of vaccines exceeding 100 million doses into "100 million doses", and converting over 10,000 doses into "10,000 doses". The above code realizes the effect, as shown in Figure 11-8.
Figure 11-8 Global new crown vaccine real-time vaccination data module
6 Cumulative Vaccination Trend Data Module in China
Set the configuration items in the ECharts line chart, the sample code is as follows.
var option = {
//X轴
xAxis: [{
data: []
}],
//Y轴
yAxis: [{
axisLabel: {//坐标轴刻度标签的相关设置
formatter: function(value) {//Y轴文本样式自定义设置
if (value >= 100000000) {//如果数值大于1亿
value = value / 100000000 + '亿';
}
return value;
}
}
}],
//系列列表
series: [{
type: 'line',// 图形类型
data: []
}]
};
In the above code, option.xAxis[0].data stores the date data of the X-axis, option.series[0].data stores the daily cumulative inoculation data, and the option.yAxis[0].axisLabel.Formatter method customizes the text style of the Y-axis .
Data rendering, filling the X-axis date data and series data, the sample code is as follows:
for(var i=0;i< data.ChinaVaccineTrendData.length;i++)
{
option.xAxis[0].data.push(data.ChinaVaccineTrendData[i].date);
option.series[0].data.push(data.ChinaVaccineTrendData[i].total_vaccinations);
}
Traverse the returned cumulative vaccination trend data in China, store the date attribute value of each item in option.xAxis[0].data of the line chart configuration item, and store the total_vaccinations attribute value in option.series[0] of the line chart configuration item In .data, the implementation effect is shown in Figure 11-9.
Figure 11-9 China cumulative vaccination trend data module
7 Data module of vaccination trend per 100 people in China
Differences between China’s vaccination trend data module per 100 people and China’s cumulative vaccination trend data module:
(1) Due to the small quantity, the configuration item option.yAxis[0].data.axisLabel.Formatter does not need to be customized.
(2) The total_vaccinations_per_hundred attribute saves the vaccination data per hundred people in China; the total_vaccinations attribute saves the cumulative vaccination data in China, so this module stores the total_vaccinations_per_hundred attribute value in option.series[0].data of the line chart configuration item, and the rest of the configuration Items and JavaScript code do not need to be changed. The implementation effect is shown in Figure 11-10.
Figure 11-10 Data module of vaccination trend per 100 people in China
8 National Epidemic Real-time Tracking Data Module
Render the data at the specified position on the page, the sample code is as follows:
//渲染本土现有确诊数据
document.getElementById('localConfirm').innerHTML =data.chinaTotal.localConfirm;
//渲染现有确诊数据
document.getElementById('nowConfirm').innerHTML =data.chinaTotal.nowConfirm;
//渲染累计确诊数据
document.getElementById('confirm').innerHTML =data.chinaTotal.confirm;
//渲染无症状感染者数据
document.getElementById('nowSevere').innerHTML =data.chinaTotal.noInfect;
//渲染境外输入数据
document.getElementById('import').innerHTML =data.chinaTotal.importedCase;
//渲染累计死亡数据
document.getElementById('dead').innerHTML =data.chinaTotal.dead;
The above code realizes the effect, as shown in Figure 11-11.
Figure 11-11 National Epidemic Real-time Tracking Data Module
9 National Epidemic Columnar Module
(1) The national real-time epidemic tracking data format is shown in Figure 11-12. Among them, data.areaTree[0].children is an array, the name attribute of each item saves the name of the province, and the nowConfirm of the total attribute saves the number of existing diagnoses.
Figure 11-12 Real-time tracking data of the national epidemic situation
(2) Set the configuration items in the ECharts histogram, the sample code is as follows. For the complete configuration item code, see the "line chart, pie chart, histogram_configuration item.js" file in the case of this book for details.
var option = {
yAxis: {
type: 'category',
data: []
},
series: [
{
type: 'bar',// 图形类型
data: []// 数值
}
]
};
Among them, the data rendered on the histogram is saved in option.series[0].data, and the name of each province is saved in yAxis.data.
(3) Data rendering, fill in the data of each province, the sample code is as follows:
var provinces = data.areaTree[0].children;//获取所有省份数组
for (var i = 0; i < provinces.length; i++) {
if(provinces[i].name=='香港'||provinces[i].name=='澳门'||provinces[i].name=='台湾')
continue;
option.series[0].data.push(provinces[i].total.nowConfirm);
option.yAxis.data.push(provinces[i].name);
}
The above code realizes the effect, as shown in Figure 11-13.
Figure 11-13 National epidemic histogram module
10 TOP10 modules of the number of existing confirmed cases in the country
(1) Sort the total number of confirmed cases in each province obtained in 9, and calculate the top 10 provincial data. The sample code is as follows:
var provinces = data.areaTree[0].children; //获取所有省份数组
var topData = [];
//所有省份数据放入数组topData中
for(var i=0;i< provinces.length;i++){
topData.push({
'name':provinces[i].name,
'value':provinces[i].total.nowConfirm
});
}
// 降序排列
topData.sort(function(a,b){
return b.value-a.value;
});
// 只保留前10条
topData.length = 10;
(2) Set the configuration items of the pie chart in ECharts, the sample code is as follows.
var option = {
//系列列表
series: [
{
type: 'pie',// 图形类型
data:[],//数据
}
]
};
Among them, option.series[0].data stores the data for rendering the pie chart.
(3) Data rendering, filling the top 10 provincial data, the sample code is as follows:
for(var i=0;i< topData.length;i++)
{
option.series[0].data.push(topData[i]);
}
The running effect of the above code is shown in Figure 11-14.
Figure 11-14 TOP10 modules of the number of existing confirmed cases in the country
Video explanation: HTML+CSS+JavaScript+Ajax+ECharts realizes real-time monitoring of the epidemic on a large screen_哔哩哔哩_bilibili