基于ECharts的⼤数据可视化案例-----中国地区疫情数据分析与
实现
1.⼯具介绍
本次案例需要的⼯具（包括但不限于）：vscode(代码编辑器)，node.js（各类插件下载⼯具），china.js,echarts.min.js,juquery.min.js等（JavaScript相关的.js官⽅插件）
涉及到的语⾔等技术：html5+css+JavaScript ajax轮询请求
项⽬发布⼯具：gitee代码托管（静态页⾯）
2.把Echarts所需要的map的js⽂件和必要的min.js⽂件导⼊
<script src="./js/echarts.min.js"></script>
<script src="./js/china.js"></script>
<script src="./js/jquery.min.js"></script>
3.页⾯布局
在需求设定后我们需要进⾏页⾯布局，可以在画板上进⾏这⼀步。然后就是页⾯布置和样式设定，会在项⽬中创建⽹页和css⽂件。
以下是我的缩略图（图丑见笑）：
根据页⾯进⾏布局：
index.html中
<div id="title">
<span class="time"></span>
<span class="author">作者：Krystal1(秀秀)</span>
中国疫情实时展⽰
<a class="link01" href="krystaljungen.gitee.io/my-krystal1/" target="_blank">| 世界疫情展⽰</a>
<a class="link02" href="news.qq/zt2020/page/feiyan.htm?from=timeline&isappinstalled=0#/" target="_blank" >数据来源：腾讯新闻</a></div>
<div id="left1"></div>
<div id="left2"></div>
<div id="center1">
<div class="item">
<div class="number" id="confirm">123</div>
<div class="text">累计确诊</div>
</div>
<div class="item">
<div class="number" id="heal">123</div>
<div class="text">累计治愈</div>
</div>
<div class="item">
<div class="number" id="dead">123</div>
<div class="text">累计死亡</div>
</div>
<div class="item">
<div class="number" id="nowConfirm">123</div>
<div class="text">现有确诊</div>
</div>
<div class="item">
<div class="number" id="noInfect">123</div>
<div class="text">⽆症状感染</div>
</div>
<div class="item">
<div class="number" id="import">123</div>
<div class="text">输⼊</div>
</div>
</div>
<div id="center2"></div>
<div id="right1"></div>
<div id="right2"></div>
<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>
在样式表.css⽂件中：
body{
background-color: #333;
}
#title{
width: 100%;
height: 10%;
position: absolute; /*绝对定位*/
top:0;
left:0;
/*弹性布局*/
display: flex;
justify-content: center; align-items: center;
color: white;
font-size: 40px;
}
#title .time{
position: absolute;
right: 20px;
top:5px;
font-size: 20px;
}
#title .link01{
position: absolute;    left: 220px;
top:5px;
font-size: 20px;
color:red;
text-decoration:none; }
#title .link02{
position: absolute;    left: 20px;
top:5px;
font-size: 20px;
color: blue;
text-decoration:none; }
#title .author{
position: absolute;    left: 20px;
top: 30px;
font-size: 18px;
color: blueviolet;
}
#left1{
width: 30%;
height: 45%;
position: absolute;
left: 0;
top: 10%;
}
#left2{
width: 30%;
height: 45%;
position: absolute;
top: 55%;
left: 0;
}
#center1{
width: 40%;
height: 25%;
position: absolute;
left: 30%;
top: 10%;
display: flex;
flex-wrap: wrap;
}
.
item{
width: 33.33%;
}
数据可视化分析工具.number{
height: 60%;
display: flex;
justify-content: center; align-items: center;
color: gold;
font-size: 30px;
font-weight: bold;
}
.
text{
height: 40%;
display: flex;
justify-content: center; align-items: center;
color: white;
font-size: 20px;
font-weight: bold;
}
#center2{
width: 40%;
height: 65%;
position: absolute;
top: 35%;
left: 30%;
}
#right1{
width: 30%;
height: 45%;
position: absolute;
top: 10%;
right: 0;
}
#right2{
width: 30%;
height:45%;
position: absolute;
top: 55%;
right: 0;
}
4.到这步页⾯布局已经完成了，我们也初始化了各个图表的容器，开始编写JavaScript⽂件，进⾏图表的渲染4.1 时间在线显⽰
写⼀个刷新时间的函数显⽰在前端，表⽰实时更新的数据
/**
* 实时显⽰时间
*/
function showTime(){
var time = new Date();
var year = FullYear();
var month = (Month()+1+'').padStart(2,'0');
var day = (Date()+'').padStart(2,'0');
var hour = (Hours()+'').padStart(2,'0');
var minute = (Minutes()+'').padStart(2,'0');
var second = (Seconds()+'').padStart(2,'0');
var content = `${year}年${month}⽉${day}⽇${hour}:${minute}:${second}`;
$('#title .time').text(content);
}
showTime();
setInterval(showTime,1000);      //每秒运⾏⼀次
效果如下：
4.2 中国地图渲染（地图）
数据来源，腾讯新闻，数据爬取在⽂章末尾介绍 js代码：
function center2(data){
var myChart=echarts.init($('#center2')[0],'dark');
var option={
title:{
text:'\n\n中国地区累计确诊分布',
left:'center',
textStyle: {
fontSize: 20,
color: "rgba(255, 0, 0, 1)"
},
//subtext: "@腾讯新闻",
//sublink:'www.baidu'
},
tooltip:{
//show:true,
trigger:'item'
},
visualMap:{ //左侧⼩导航图标
show:true,
x:'left',
y:'bottom',
textStyle:{
fontSize:8,
},
splitList:[{start:1,end: 9},
{start:10,end:99},
{start:100,end:999},
{start:1000,end:9999},
{start:10000}],
color:['#8A3310','#C64918','#E55B25','#F2AD92','#F9DCD1']
},
series:[{
name:'累计确诊⼈数',
type:'map',
mapType:'china',
roam:false,  //禁⽤拖动和缩放
itemStyle:{  //图形样式
normal:{
borderWidth: .3,//区域边框宽度
borderColor:'#009fe8',//区域边框颜⾊
areaColor:'#ffefd5',      //区域颜⾊
},
emphasis:{      //⿏标滑过地图⾼亮的相关设置
borderWidth: .5,
borderColor:'#4b0082',
areaColor:'#fff',
}
},
label:{ // 图形上的⽂本标签
normal:{
show:true,  //省份名称
fontSize:10,
},
emphasis:{
show:true,
fontSize:8,
}
},
data:[]    //[{'name':'上海'，'value':318},{'name':'江苏'，'value':308}]  }]
};
var provinces = data.areaTree[0].children;
for(var province of provinces){
option.series[0].data.push({
'name':province.name,
'value':firm
});
}
myChart.setOption(option);
}
效果如下：
4.3 疫情数据⼤致总览
function center1(data){
$('#confirm').text(firm);
$('#heal').text(data.chinaTotal.heal);
$('#dead').text(data.chinaTotal.dead);
$('#nowConfirm').text(wConfirm);
$('#noInfect').text(Infect);
$('#import').text(data.chinaTotal.importedCase);
}
效果如下：
4.4 全国确诊前10的省市（柱状图）
function right1(data){
var myChart = echarts.init($('#right1')[0],'dark');
var option={
title:{
text:"全国确诊省市TOP10",
textStyle:{
color:'white',
},
left:'left'
},
color:['#3398DB'],
tooltip:{
trigger:'axis',
//指⽰器
axisPointer:{
type:'shadow'  //默认为直线，可选为： ‘line’ | 'shadow'
}
},
xAxis:{
tpye:'category',
data:[]  //['湖北','⼴州','北京']
},
yAxis:{
type:'value',
//y轴字体设置
axisLable:{
show:true,
color:'white',
fontSize:12,
formatter:function(value){
if(value>=1000){
value = value/1000 + 'k';
}
return value;
}
},
},
series:[{
data:[],//[582,300,100],
type:'bar',
barMaxWidth:"50%"
}]
};
var provinces = data.areaTree[0].children;
var topData = [];
for(var province of provinces){
topData.push({
'name':province.name,
'value':firm
});
}
//降序排列
topData.sort(function(a,b){
return b.value-a.value;
});
//只保留前10个
topData.length = 10;
//console.log(topData);
//分别取出省份名称和数值
for(var province of topData){
option.xAxis.data.push(province.name) ;
option.series[0].data.push(province.value); }
myChart.setOption(option);
}
效果如下：
4.5 输⼊前5省市（饼状图）function right2(data){
var myChart = echarts.init($('#right2')[0],'dark'); var option = {
title: {
text: '输⼊确诊省市TOP5',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data:[],
},
series: [
{
name: '省市名称',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data:[],
emphasis: {
itemStyle: {
shadowBlur: 10,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。