双人结对作业疫情可视化（html）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>GXFC</title>
<link href="favicon.ico" rel="shortcut icon">
<script src="../static/js/echarts.min.js"></script>
<script src="../static/js/china.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/jquery/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="header" style="position:absolute;background:#888888;height:10%;80%;top:0;left:20%">
<div id="title" style="position:absolute;background:#666666;height:10%;40%;left:20%;top:0;text-align:center;font-size:40px;">中国疫情图</div>
<div id="time" style="position:absolute;background:#555555;height:10%;40%;right:0;font-size:25px;text-align:center;top:0;"></div>
</div>
<div id="item" style="position:absolute;background:#444444;height:100%;20%;top:0;left:0;"></div>
<div id="map" style="position:absolute;height:60%;50%;top:10%;left:20%;"></div>
<div id="picture" style="position:absolute;background:#666666;height:40%;30%;top:10%;right:0;">
<div id="1" style="position:absolute;background:#333333;height:10%;50%;top:0;left:0;">
<button id="b1" style="position:absolute;height:100%;100%" >扇形图</button>
</div>
<div id="2" style="position:absolute;background:#444444;height:10%;50%;top:0;right:0;">
<button id="b2" style="position:absolute;height:100%;100%" >折线图</button>
</div>
<div id="action" style="position:absolute;background:#333333;height:90%;100%;top:10%;left:0;"></div>
</div>
<div id="list" style="position:absolute;background:#555555;height:30%;50%;bottom:0;left:20%;">
<!-- <div id="" style="position:absolute;background:#333333;height:10%;20%;top:0;left:0;"></div>-->
<!-- <div id="" style="position:absolute;background:#444444;height:10%;20%;top:0;left:20%;"></div>-->
<!-- <div id="" style="position:absolute;background:#333333;height:10%;20%;top:0;left:40%;"></div>-->
<!-- <div id="" style="position:absolute;background:#444444;height:10%;20%;top:0;right:20%;"></div>-->
<!-- <div id="" style="position:absolute;background:#333333;height:10%;20%;top:0;right:0%;"></div>-->
<ul style="position:absolute;height:90%; 94%;left:0;overflow:hidden; overflow-y:scroll;">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>Link 11</li>
<li>Link 13</li>
<li>Link 13</li>
</ul>
</div>
<div id="图2" style="position:absolute;background:#444444;height:50%;30%;bottom:0;right:0;"></div>
<script src="../static/js/time.js"></script>
<!--<script src="../static/js/option.js" ></script>-->
<script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('action'));
// 指定图表的配置项和数据
var optionp = {
tooltip: {//提示框组件
show:true,
trigger: 'item',
formatter:function(params,ticket, callback){//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
return params.name;
}//数据格式化
},//提示框样式
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
roseType: 'angle',
label: {
normal: {
show: true,
formatter: '{b}: {c}({d}%)'
}
},
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(optionp);
</script>
<script>
var myChart2 = echarts.init(document.getElementById('action'));
var optionl = {
title : {
text: '某楼盘销售情况',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['意向','预购','成交']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'成交',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[10, 12, 21, 54, 260, 830, 710]
},
{
name:'预购',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[30, 182, 434, 791, 390, 30, 10]
},
{
name:'意向',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[1320, 1132, 601, 234, 120, 90, 20]
}
]
};
myChart.setOption(optionl);
</script>
<script>
var opt1 = echarts.init(document.getElementById('b1'));//初始化
var opt2 = echarts.init(document.getElementById('b2'));//初始化
b1.on('click', function (params) {
})
</script>
<script>
var map = echarts.init(document.getElementById('map'));//初始化
var COLORS = ["#ffffff", "#faebd2", "#e9a188", "#d56355", "#bb3937", "#772526", "#480f10"];//图例里的颜色
var data=[]
var option={//配置项（名称）
tooltip: {//提示框组件
show:true,
trigger: 'item',
formatter:function(params,ticket, callback){//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
var res=params.name+'<br />';
//定义一个变量来保存series数据系列
var myseries=option.series;
//循环遍历series数据系列
for(var i=0;i<myseries.length;i++){
//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
for(var k=0;k<myseries[i].data.length;k++){
//console.log(myseries[i].data[k].name);
//如果data数据中的name和地区名称一样
if(myseries[i].data[k].name==params.name){
//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
res+=myseries[i].name+':'+myseries[i].data[k].value+'<br />';
}
}
}
//返回res
//console.log(res);
return res;
}//数据格式化
},//提示框样式
backgroundColor:'#474747',//背景色
//----------------------------------------------------------------------------------------------------------------------
visualMap: {//visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
type: 'piecewise',//分段型视觉映射组件
orient: 'horizontal',//方向
left: 'left',//位置
top: 'bottom',//位置
pieces: [{//自定义『分段式视觉映射组件』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。
value: 0, color: COLORS[0]
}, {
min: 1, max: 9, color: COLORS[1]
}, {
min: 10, max: 99, color: COLORS[2]
}, {
min: 100, max: 499, color: COLORS[3]
}, {
min: 500, max: 999, color: COLORS[4]
}, {
min: 1000, max: 10000, color: COLORS[5]
}, {
min: 10000, color: COLORS[6]
}],
inRange: {
color:COLORS //取值范围的颜色
},
show:true//图注
},
//----------------------------------------------------------------------------------------------------------------------
geo: {//地理坐标系组件用于地图的绘制
map: 'china',
roam: true,//不开启缩放和平移
zoom:1.23,//视角缩放比例1.23 地图大小
label: {
normal: {
show: true,
fontSize:'10',//省份字体大小
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(20, 200 ,200, 0.8)'//rgba(0, 0, 0, 0.2) rgba(144, 238 ,144, 0.5) 边缘颜色
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色 #F3B329
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 3,//边缘宽度
shadowColor: 'rgba(255,252,153,0.5)'//rgba(255,252,153,0.5) rgba(0, 0, 0, 0.5)
}
}
},
//----------------------------------------------------------------------------------------------------------------------
series : [//系列列表。（图表）
{
name: '感染人数',
type: 'map',//图表类型
geoIndex: 0,
data: data
},
{
name: '疑似人数',
type: 'map',//图表类型
geoIndex: 0,
data: data
},
{
name: '治愈人数',
type: 'map',//图表类型
geoIndex: 0,
data: data
},
{
name: '死亡人数',
type: 'map',//图表类型
geoIndex: 0,
data: data
}
]
}
function get_data1(){
$.ajax({
//type:"post",//请求类型
url:"/c2",//请求地址
//data:{}//数据
//datatype:"json"//返回的数据类型
success:function (data) {
option.series[0].data=data["confirm"]
option.series[1].data=data["suspect"]
option.series[2].data=data["heal"]
option.series[3].data=data["dead"]
map.setOption(option)
},
error:function (xhr, type, errorThrown) {
alert("发送请求失败")
}
})
}
get_data1()
</script>
<script >
//地图点击事件
map.on('click', function (params) {
document.getElementById("title").innerHTML=params.name+"疫情地图"//设置名字
$.getJSON("../static/geojson/"+params.name+".json", function (data) {
if(data != null) {
echarts.registerMap(params.name, data);// 注册地图
var mapData = [];
var features = data.features;
$.each(features, function(i, item) {
mapData.push({id : i+1, name: item.properties.name});
// alert(i+" "+mapData[i]["name"])
})
var chart = echarts.init(document.getElementById("map"));
var option2={//配置项（名称）
tooltip: {//提示框组件
show:true,
trigger: 'item',
formatter:function(params,ticket, callback){//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
var res=params.name+'<br />';
//定义一个变量来保存series数据系列
var myseries=option2.series;
//循环遍历series数据系列
for(var i=0;i<myseries.length;i++){
//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
for(var k=0;k<myseries[i].data.length;k++){
//console.log(myseries[i].data[k].name);
//如果data数据中的name和地区名称一样
if(myseries[i].data[k].name==params.name){
//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
res+=myseries[i].name+':'+myseries[i].data[k].value+'<br />';
}
}
}
//返回res
//console.log(res);
return res;
}//数据格式化
},//提示框样式
backgroundColor:'#474747',//背景色
visualMap: {//visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
type: 'piecewise',//分段型视觉映射组件
orient: 'vertical',//方向horizontal vertical
left: 'left',//位置
top: 'bottom',//位置
pieces: [{//自定义『分段式视觉映射组件』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。
value: 0, color: COLORS[0]
}, {
min: 1, max: 9, color: COLORS[1]
}, {
min: 10, max: 99, color: COLORS[2]
}, {
min: 100, max: 499, color: COLORS[3]
}, {
min: 500, max: 999, color: COLORS[4]
}, {
min: 1000, max: 10000, color: COLORS[5]
}, {
min: 10000, color: COLORS[6]
}],
inRange: {
color:COLORS //取值范围的颜色
},
show:true//图注
},
geo: {//地理坐标系组件用于地图的绘制
show:true,
map:params.name,
roam:true,
zoom:1,
label: {
normal: {
show: true,
fontSize:'15',//省份字体大小
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(20, 200 ,200, 0.8)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色 #F3B329
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 3,//边缘宽度
shadowColor: 'rgba(255,252,153,0.5)'
}
}
},
series: [
{
name: '感染人数',
type: 'map',//图表类型
geoIndex: 0,
data: data
},
{
name: '疑似人数',
type: 'map',//图表类型
geoIndex: 0,
data: data
},
{
name: '治愈人数',
type: 'map',//图表类型
geoIndex: 0,
data: data
},
{
name: '死亡人数',
type: 'map',//图表类型
geoIndex: 0,
data: data
}
]
}
}
$.ajax({
type:"post",//请求类型
url:"/c3",//请求地址
data:{"name":params.name},//数据
//datatype:"json",//返回的数据类型
success:function (data) {
option2.series[0].data=data["confirm"]
option2.series[1].data=data["suspect"]
option2.series[2].data=data["heal"]
option2.series[3].data=data["dead"]
map.setOption(option2)
},
error:function (xhr, type, errorThrown) {
alert("请求失败")
}
})
})
});
</script>
</body>
</html>