<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/anhui.js"></script>
<script src="js/jilin.js"></script>
<style type="text/css">
.main{
position: absolute;
width: 100%;
height: auto;
}
</style>
<title>国内疫情状况观察</title>
</head>
<body>
<div id="main" style="width: 700px;height:800px;"></div>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var optiona;
option = {
title : {
text: '中国疫情数据地图',
left: 'center'
},
tooltip : {
trigger: 'item',
formatter: function(params) {
var res = params.name+'<br/>';
var myseries = option.series;
for (var i = 0; i < myseries.length; i++) {
for(var j=0;j<myseries[i].data.length;j++){
if(myseries[i].data[j].name==params.name){
res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
}
}
}
return res;
}
},
legend: {
orient: 'vertical',
selectedMode:'single',
left: 'left',
data:['累计确诊人数','现存病例','疑似感染者']
},
visualMap: {
min: 0,
max: 2000,
left: 'left',
top: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
left: 'right',
top: 'center',
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: '累计确诊人数',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show:true
},
emphasis: {
show:true
}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000),pos:"beijing"},
{name: '天津',value: Math.round(Math.random()*1000),pos:"tianjin"},
{name: '上海',value: Math.round(Math.random()*1000),pos:"shanghai"},
{name: '重庆',value: Math.round(Math.random()*1000),pos:"chongqing"},
{name: '河北',value: Math.round(Math.random()*1000),pos:"hebei"},
{name: '河南',value: Math.round(Math.random()*1000),pos:"henan"},
{name: '云南',value: Math.round(Math.random()*1000),pos:"yunnan"},
{name: '辽宁',value: Math.round(Math.random()*1000),pos:"liaoning"},
{name: '黑龙江',value: Math.round(Math.random()*1000),pos:"heilongjiang"},
{name: '湖南',value: Math.round(Math.random()*1000),pos:"hunan"},
{name: '安徽',value: Math.round(Math.random()*1000),pos:"anhui"},
{name: '山东',value: Math.round(Math.random()*1000),pos:"shandong"},
{name: '新疆',value: Math.round(Math.random()*1000),pos:"xinjiang"},
{name: '江苏',value: Math.round(Math.random()*1000),pos:"jiangsu"},
{name: '浙江',value: Math.round(Math.random()*1000),pos:"zhejiang"},
{name: '江西',value: Math.round(Math.random()*1000),pos:"jiangxi"},
{name: '湖北',value: Math.round(Math.random()*1000),pos:"hubei"},
{name: '广西',value: Math.round(Math.random()*1000),pos:"guangxi"},
{name: '甘肃',value: Math.round(Math.random()*1000),pos:"gansu"},
{name: '山西',value: Math.round(Math.random()*1000),pos:"shanxi"},
{name: '内蒙古',value: Math.round(Math.random()*1000),pos:"neimenggu"},
{name: '陕西',value: Math.round(Math.random()*1000),pos:"shaanxi"},
{name: '吉林',value: Math.round(Math.random()*1000),pos:"jilin"},
{name: '福建',value: Math.round(Math.random()*1000),pos:"fujian"},
{name: '贵州',value: Math.round(Math.random()*1000),pos:"guizhou"},
{name: '广东',value: Math.round(Math.random()*1000),pos:"guangdong"},
{name: '青海',value: Math.round(Math.random()*1000),pos:"qinghai"},
{name: '西藏',value: Math.round(Math.random()*1000),pos:"xizang"},
{name: '四川',value: Math.round(Math.random()*1000),pos:"sichuan"},
{name: '宁夏',value: Math.round(Math.random()*1000),pos:"ningxia"},
{name: '海南',value: Math.round(Math.random()*1000),pos:"hainan"},
{name: '台湾',value: Math.round(Math.random()*1000),pos:"taiwan"},
{name: '香港',value: Math.round(Math.random()*1000),pos:"xianggang"},
{name: '澳门',value: Math.round(Math.random()*1000),pos:"aomen"}
]
},
{
name: '现存病例',
type: 'map',
mapType: 'china',
label: {
normal: {
show:true
},
emphasis: {
show:true
}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000),pos:"beijing"},
{name: '天津',value: Math.round(Math.random()*1000),pos:"tianjin"},
{name: '上海',value: Math.round(Math.random()*1000),pos:"shanghai"},
{name: '重庆',value: Math.round(Math.random()*1000),pos:"chongqing"},
{name: '河北',value: Math.round(Math.random()*1000),pos:"hebei"},
{name: '河南',value: Math.round(Math.random()*1000),pos:"henan"},
{name: '云南',value: Math.round(Math.random()*1000),pos:"yunnan"},
{name: '辽宁',value: Math.round(Math.random()*1000),pos:"liaoning"},
{name: '黑龙江',value: Math.round(Math.random()*1000),pos:"heilongjiang"},
{name: '湖南',value: Math.round(Math.random()*1000),pos:"hunan"},
{name: '安徽',value: Math.round(Math.random()*1000),pos:"anhui"},
{name: '山东',value: Math.round(Math.random()*1000),pos:"shandong"},
{name: '新疆',value: Math.round(Math.random()*1000),pos:"xinjiang"},
{name: '江苏',value: Math.round(Math.random()*1000),pos:"jiangsu"},
{name: '浙江',value: Math.round(Math.random()*1000),pos:"zhejiang"},
{name: '江西',value: Math.round(Math.random()*1000),pos:"jiangxi"},
{name: '湖北',value: Math.round(Math.random()*1000),pos:"hubei"},
{name: '广西',value: Math.round(Math.random()*1000),pos:"guangxi"},
{name: '甘肃',value: Math.round(Math.random()*1000),pos:"gansu"},
{name: '山西',value: Math.round(Math.random()*1000),pos:"shanxi"},
{name: '内蒙古',value: Math.round(Math.random()*1000),pos:"neimenggu"},
{name: '陕西',value: Math.round(Math.random()*1000),pos:"shaanxi"},
{name: '吉林',value: Math.round(Math.random()*1000),pos:"jilin"},
{name: '福建',value: Math.round(Math.random()*1000),pos:"fujian"},
{name: '贵州',value: Math.round(Math.random()*1000),pos:"guizhou"},
{name: '广东',value: Math.round(Math.random()*1000),pos:"guangdong"},
{name: '青海',value: Math.round(Math.random()*1000),pos:"qinghai"},
{name: '西藏',value: Math.round(Math.random()*1000),pos:"xizang"},
{name: '四川',value: Math.round(Math.random()*1000),pos:"sichuan"},
{name: '宁夏',value: Math.round(Math.random()*1000),pos:"ningxia"},
{name: '海南',value: Math.round(Math.random()*1000),pos:"hainan"},
{name: '台湾',value: Math.round(Math.random()*1000),pos:"taiwan"},
{name: '香港',value: Math.round(Math.random()*1000),pos:"xianggang"},
{name: '澳门',value: Math.round(Math.random()*1000),pos:"aomen"}
]
},
{
name: '疑似感染者',
type: 'map',
mapType: 'china',
label: {
normal: {
show:true
},
emphasis: {
show:true
}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000),pos:"beijing"},
{name: '天津',value: Math.round(Math.random()*1000),pos:"tianjin"},
{name: '上海',value: Math.round(Math.random()*1000),pos:"shanghai"},
{name: '重庆',value: Math.round(Math.random()*1000),pos:"chongqing"},
{name: '河北',value: Math.round(Math.random()*1000),pos:"hebei"},
{name: '河南',value: Math.round(Math.random()*1000),pos:"henan"},
{name: '云南',value: Math.round(Math.random()*1000),pos:"yunnan"},
{name: '辽宁',value: Math.round(Math.random()*1000),pos:"liaoning"},
{name: '黑龙江',value: Math.round(Math.random()*1000),pos:"heilongjiang"},
{name: '湖南',value: Math.round(Math.random()*1000),pos:"hunan"},
{name: '安徽',value: Math.round(Math.random()*1000),pos:"anhui"},
{name: '山东',value: Math.round(Math.random()*1000),pos:"shandong"},
{name: '新疆',value: Math.round(Math.random()*1000),pos:"xinjiang"},
{name: '江苏',value: Math.round(Math.random()*1000),pos:"jiangsu"},
{name: '浙江',value: Math.round(Math.random()*1000),pos:"zhejiang"},
{name: '江西',value: Math.round(Math.random()*1000),pos:"jiangxi"},
{name: '湖北',value: Math.round(Math.random()*1000),pos:"hubei"},
{name: '广西',value: Math.round(Math.random()*1000),pos:"guangxi"},
{name: '甘肃',value: Math.round(Math.random()*1000),pos:"gansu"},
{name: '山西',value: Math.round(Math.random()*1000),pos:"shanxi"},
{name: '内蒙古',value: Math.round(Math.random()*1000),pos:"neimenggu"},
{name: '陕西',value: Math.round(Math.random()*1000),pos:"shaanxi"},
{name: '吉林',value: Math.round(Math.random()*1000),pos:"jilin"},
{name: '福建',value: Math.round(Math.random()*1000),pos:"fujian"},
{name: '贵州',value: Math.round(Math.random()*1000),pos:"guizhou"},
{name: '广东',value: Math.round(Math.random()*1000),pos:"guangdong"},
{name: '青海',value: Math.round(Math.random()*1000),pos:"qinghai"},
{name: '西藏',value: Math.round(Math.random()*1000),pos:"xizang"},
{name: '四川',value: Math.round(Math.random()*1000),pos:"sichuan"},
{name: '宁夏',value: Math.round(Math.random()*1000),pos:"ningxia"},
{name: '海南',value: Math.round(Math.random()*1000),pos:"hainan"},
{name: '台湾',value: Math.round(Math.random()*1000),pos:"taiwan"},
{name: '香港',value: Math.round(Math.random()*1000),pos:"xianggang"},
{name: '澳门',value: Math.round(Math.random()*1000),pos:"aomen"}
]
}
]
};
option && myChart.setOption(option);
myChart.on('click', function (params) {
console.log(params.data.pos);
location.href="https://www.baidu.com/"
});
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/anhui.js"></script>
<script src="js/jilin.js"></script>
<style type="text/css">
.main{
position: absolute;
width: 100%;
height: auto;
}
</style>
<title>国内疫情状况观察</title>
</head>
<body>
<div id="main" style="width: 700px;height:800px;"></div>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var optiona;
option = {
title : {
text: '中国疫情数据地图',
left: 'center'
},
tooltip : {
trigger: 'item',
formatter: function(params) {
var res = params.name+'<br/>';
var myseries = option.series;
for (var i = 0; i < myseries.length; i++) {
for(var j=0;j<myseries[i].data.length;j++){
if(myseries[i].data[j].name==params.name){
res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
}
}
}
return res;
}
},
legend: {
orient: 'vertical',
selectedMode:'single',
left: 'left',
data:['累计确诊人数','现存病例','疑似感染者']
},
visualMap: {
min: 0,
max: 2000,
left: 'left',
top: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
left: 'right',
top: 'center',
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: '累计确诊人数',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show:true
},
emphasis: {
show:true
}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000),pos:"beijing"},
{name: '天津',value: Math.round(Math.random()*1000),pos:"tianjin"},
{name: '上海',value: Math.round(Math.random()*1000),pos:"shanghai"},
{name: '重庆',value: Math.round(Math.random()*1000),pos:"chongqing"},
{name: '河北',value: Math.round(Math.random()*1000),pos:"hebei"},
{name: '河南',value: Math.round(Math.random()*1000),pos:"henan"},
{name: '云南',value: Math.round(Math.random()*1000),pos:"yunnan"},
{name: '辽宁',value: Math.round(Math.random()*1000),pos:"liaoning"},
{name: '黑龙江',value: Math.round(Math.random()*1000),pos:"heilongjiang"},
{name: '湖南',value: Math.round(Math.random()*1000),pos:"hunan"},
{name: '安徽',value: Math.round(Math.random()*1000),pos:"anhui"},
{name: '山东',value: Math.round(Math.random()*1000),pos:"shandong"},
{name: '新疆',value: Math.round(Math.random()*1000),pos:"xinjiang"},
{name: '江苏',value: Math.round(Math.random()*1000),pos:"jiangsu"},
{name: '浙江',value: Math.round(Math.random()*1000),pos:"zhejiang"},
{name: '江西',value: Math.round(Math.random()*1000),pos:"jiangxi"},
{name: '湖北',value: Math.round(Math.random()*1000),pos:"hubei"},
{name: '广西',value: Math.round(Math.random()*1000),pos:"guangxi"},
{name: '甘肃',value: Math.round(Math.random()*1000),pos:"gansu"},
{name: '山西',value: Math.round(Math.random()*1000),pos:"shanxi"},
{name: '内蒙古',value: Math.round(Math.random()*1000),pos:"neimenggu"},
{name: '陕西',value: Math.round(Math.random()*1000),pos:"shaanxi"},
{name: '吉林',value: Math.round(Math.random()*1000),pos:"jilin"},
{name: '福建',value: Math.round(Math.random()*1000),pos:"fujian"},
{name: '贵州',value: Math.round(Math.random()*1000),pos:"guizhou"},
{name: '广东',value: Math.round(Math.random()*1000),pos:"guangdong"},
{name: '青海',value: Math.round(Math.random()*1000),pos:"qinghai"},
{name: '西藏',value: Math.round(Math.random()*1000),pos:"xizang"},
{name: '四川',value: Math.round(Math.random()*1000),pos:"sichuan"},
{name: '宁夏',value: Math.round(Math.random()*1000),pos:"ningxia"},
{name: '海南',value: Math.round(Math.random()*1000),pos:"hainan"},
{name: '台湾',value: Math.round(Math.random()*1000),pos:"taiwan"},
{name: '香港',value: Math.round(Math.random()*1000),pos:"xianggang"},
{name: '澳门',value: Math.round(Math.random()*1000),pos:"aomen"}
]
},
{
name: '现存病例',
type: 'map',
mapType: 'china',
label: {
normal: {
show:true
},
emphasis: {
show:true
}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000),pos:"beijing"},
{name: '天津',value: Math.round(Math.random()*1000),pos:"tianjin"},
{name: '上海',value: Math.round(Math.random()*1000),pos:"shanghai"},
{name: '重庆',value: Math.round(Math.random()*1000),pos:"chongqing"},
{name: '河北',value: Math.round(Math.random()*1000),pos:"hebei"},
{name: '河南',value: Math.round(Math.random()*1000),pos:"henan"},
{name: '云南',value: Math.round(Math.random()*1000),pos:"yunnan"},
{name: '辽宁',value: Math.round(Math.random()*1000),pos:"liaoning"},
{name: '黑龙江',value: Math.round(Math.random()*1000),pos:"heilongjiang"},
{name: '湖南',value: Math.round(Math.random()*1000),pos:"hunan"},
{name: '安徽',value: Math.round(Math.random()*1000),pos:"anhui"},
{name: '山东',value: Math.round(Math.random()*1000),pos:"shandong"},
{name: '新疆',value: Math.round(Math.random()*1000),pos:"xinjiang"},
{name: '江苏',value: Math.round(Math.random()*1000),pos:"jiangsu"},
{name: '浙江',value: Math.round(Math.random()*1000),pos:"zhejiang"},
{name: '江西',value: Math.round(Math.random()*1000),pos:"jiangxi"},
{name: '湖北',value: Math.round(Math.random()*1000),pos:"hubei"},
{name: '广西',value: Math.round(Math.random()*1000),pos:"guangxi"},
{name: '甘肃',value: Math.round(Math.random()*1000),pos:"gansu"},
{name: '山西',value: Math.round(Math.random()*1000),pos:"shanxi"},
{name: '内蒙古',value: Math.round(Math.random()*1000),pos:"neimenggu"},
{name: '陕西',value: Math.round(Math.random()*1000),pos:"shaanxi"},
{name: '吉林',value: Math.round(Math.random()*1000),pos:"jilin"},
{name: '福建',value: Math.round(Math.random()*1000),pos:"fujian"},
{name: '贵州',value: Math.round(Math.random()*1000),pos:"guizhou"},
{name: '广东',value: Math.round(Math.random()*1000),pos:"guangdong"},
{name: '青海',value: Math.round(Math.random()*1000),pos:"qinghai"},
{name: '西藏',value: Math.round(Math.random()*1000),pos:"xizang"},
{name: '四川',value: Math.round(Math.random()*1000),pos:"sichuan"},
{name: '宁夏',value: Math.round(Math.random()*1000),pos:"ningxia"},
{name: '海南',value: Math.round(Math.random()*1000),pos:"hainan"},
{name: '台湾',value: Math.round(Math.random()*1000),pos:"taiwan"},
{name: '香港',value: Math.round(Math.random()*1000),pos:"xianggang"},
{name: '澳门',value: Math.round(Math.random()*1000),pos:"aomen"}
]
},
{
name: '疑似感染者',
type: 'map',
mapType: 'china',
label: {
normal: {
show:true
},
emphasis: {
show:true
}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000),pos:"beijing"},
{name: '天津',value: Math.round(Math.random()*1000),pos:"tianjin"},
{name: '上海',value: Math.round(Math.random()*1000),pos:"shanghai"},
{name: '重庆',value: Math.round(Math.random()*1000),pos:"chongqing"},
{name: '河北',value: Math.round(Math.random()*1000),pos:"hebei"},
{name: '河南',value: Math.round(Math.random()*1000),pos:"henan"},
{name: '云南',value: Math.round(Math.random()*1000),pos:"yunnan"},
{name: '辽宁',value: Math.round(Math.random()*1000),pos:"liaoning"},
{name: '黑龙江',value: Math.round(Math.random()*1000),pos:"heilongjiang"},
{name: '湖南',value: Math.round(Math.random()*1000),pos:"hunan"},
{name: '安徽',value: Math.round(Math.random()*1000),pos:"anhui"},
{name: '山东',value: Math.round(Math.random()*1000),pos:"shandong"},
{name: '新疆',value: Math.round(Math.random()*1000),pos:"xinjiang"},
{name: '江苏',value: Math.round(Math.random()*1000),pos:"jiangsu"},
{name: '浙江',value: Math.round(Math.random()*1000),pos:"zhejiang"},
{name: '江西',value: Math.round(Math.random()*1000),pos:"jiangxi"},
{name: '湖北',value: Math.round(Math.random()*1000),pos:"hubei"},
{name: '广西',value: Math.round(Math.random()*1000),pos:"guangxi"},
{name: '甘肃',value: Math.round(Math.random()*1000),pos:"gansu"},
{name: '山西',value: Math.round(Math.random()*1000),pos:"shanxi"},
{name: '内蒙古',value: Math.round(Math.random()*1000),pos:"neimenggu"},
{name: '陕西',value: Math.round(Math.random()*1000),pos:"shaanxi"},
{name: '吉林',value: Math.round(Math.random()*1000),pos:"jilin"},
{name: '福建',value: Math.round(Math.random()*1000),pos:"fujian"},
{name: '贵州',value: Math.round(Math.random()*1000),pos:"guizhou"},
{name: '广东',value: Math.round(Math.random()*1000),pos:"guangdong"},
{name: '青海',value: Math.round(Math.random()*1000),pos:"qinghai"},
{name: '西藏',value: Math.round(Math.random()*1000),pos:"xizang"},
{name: '四川',value: Math.round(Math.random()*1000),pos:"sichuan"},
{name: '宁夏',value: Math.round(Math.random()*1000),pos:"ningxia"},
{name: '海南',value: Math.round(Math.random()*1000),pos:"hainan"},
{name: '台湾',value: Math.round(Math.random()*1000),pos:"taiwan"},
{name: '香港',value: Math.round(Math.random()*1000),pos:"xianggang"},
{name: '澳门',value: Math.round(Math.random()*1000),pos:"aomen"}
]
}
]
};
option && myChart.setOption(option);
myChart.on('click', function (params) {
console.log(params.data.pos);
location.href="https://www.baidu.com/"
});
</script>
</body>
</html>
浙公网安备 33010602011771号