290 lines
7.3 KiB
HTML
290 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title></title>
|
||
<style type="text/css">
|
||
.num_box{
|
||
width: 13%;
|
||
margin: 0 auto;
|
||
padding: 10px 10px 61px 10px;
|
||
position: absolute;
|
||
top: 10%;
|
||
left: 20%;
|
||
}
|
||
.num{
|
||
width: 100%;
|
||
margin-top: 25px;
|
||
float: left;
|
||
height: 60px;
|
||
position: relative;
|
||
border: 1px solid #ccc;
|
||
border-image:linear-gradient(to right, #45ded6, #1099d1) 1 10;
|
||
margin-right: 2%;
|
||
float: left;
|
||
line-height: 60px;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
background: linear-gradient(to right, #45ded6, #1099d1);/*url(img/back_fen.jpg)no-repeat;*/
|
||
}
|
||
.num_one{
|
||
background: linear-gradient(to right, #649fd9, #19498f);
|
||
}
|
||
.num::before{
|
||
content: '';
|
||
position: absolute;
|
||
border: #e1e1e1 solid 1px;
|
||
border-image:linear-gradient(to right, #45ded6, #1099d1) 1 10;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
-webkit-transition-duration: .3s;
|
||
transition-duration: .3s;
|
||
-webkit-transition-property: top,right,bottom,left;
|
||
transition-property: top,right,bottom,left;
|
||
}
|
||
.num:hover::before{
|
||
border-image:linear-gradient(to right, #45ded6, #1099d1) 1 10;
|
||
top: -8px;
|
||
right: -8px;
|
||
bottom: -8px;
|
||
left: -8px;
|
||
|
||
}
|
||
.clearBox::after{
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
.content_box{
|
||
position: relative;
|
||
}
|
||
</style>
|
||
<script src="echarts/echarts.min.js"></script>
|
||
<script src="js/deC.js"></script>
|
||
<script src="js/jquery.min.js" rel="script"></script>
|
||
</head>
|
||
<body>
|
||
<div class="top">德州市职业健康管理中心</div>
|
||
<div class="banner"></div>
|
||
|
||
<div class="content_box">
|
||
<div id="main" style="width:80% ;height: 700px;margin: 0 auto;"></div>
|
||
<div class="num_box clearBox">
|
||
|
||
<a href="all.html" class="a_qs">
|
||
<div class="num num_one num3">全市</div>
|
||
</a>
|
||
<!-- <div class="num num3">德城区
|
||
|
||
</div>
|
||
<div class="num num3">武城县</div>
|
||
<div class="num num3">夏津县</div>
|
||
<div class="num num3">平原县</div>
|
||
<div class="num num3">禹城市</div>
|
||
<div class="num num3">齐河县</div>
|
||
<div class="num num3">临邑县</div>
|
||
<div class="num num3">陵城区</div>
|
||
<div class="num num3">宁津县</div>
|
||
<div class="num num3">乐陵市</div>
|
||
<div class="num num3">庆云县</div> -->
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">———————————————— 技术支持：山东新医路信息科技有限公司 ——————————————————</div>
|
||
|
||
<style type="text/css">
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.top {
|
||
background: url(img/bg.jpg) no-repeat center;
|
||
line-height: 90px;
|
||
color: #FFFFFF;
|
||
padding-left: 50px;
|
||
font-size: 35px;
|
||
font-weight: bold;
|
||
letter-spacing: 3px;
|
||
text-shadow: 2px 2px 2px #000;
|
||
}
|
||
|
||
.banner {
|
||
height: 300px;
|
||
background: url(img/banner.jpg) no-repeat center;
|
||
}
|
||
|
||
.banner img {
|
||
width: 100%;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.li {
|
||
width: 20%;
|
||
position: relative;
|
||
cursor: pointer;
|
||
margin: 0 2.5%;
|
||
}
|
||
|
||
.tilte {
|
||
position: absolute;
|
||
top: 60px;
|
||
font-family: "microsoft sans serif";
|
||
color: #FFFFFF;
|
||
font-size: 27px;
|
||
left: 30px;
|
||
}
|
||
|
||
.li img {
|
||
width: 100%;
|
||
}
|
||
|
||
.xian {
|
||
position: absolute;
|
||
left: 30px;
|
||
top: 105px;
|
||
width: 55px;
|
||
background: #FFFFFF;
|
||
height: 3px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.footer {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: url(img/bg.jpg) no-repeat center;
|
||
font-size: 12px;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
var myChart1 = echarts.init(document.getElementById('main'));
|
||
|
||
$(document).ready(function() {
|
||
var dataList= [
|
||
{name: '德城区', value: 3000},//randomValue()
|
||
{name: '武陵县', value: 2000},
|
||
{name: '宁津县', value: 4000},
|
||
{name: '乐陵市', value: 5000},
|
||
{name: '庆云县', value: 1000},
|
||
{name: '陵城区', value: 2800},
|
||
{name: '夏津县', value: 3500},
|
||
{name: '平原县', value: 4230},
|
||
{name: '临邑县', value: 5060},
|
||
{name: '禹城市', value: 2020},
|
||
{name: '武城县', value: 2530},
|
||
{name: '齐河县', value: 4800}
|
||
]
|
||
function randomValue() {
|
||
return Math.round(Math.random()*1000);
|
||
}
|
||
myChart1.on('click', function (params) {
|
||
console.log(params);
|
||
if(params.name === "德城区"){
|
||
console.log("点击的德城区")
|
||
}
|
||
//逻辑控制
|
||
});
|
||
$.get('js/dc.Json', function (geoJson) {
|
||
|
||
myChart1.hideLoading();
|
||
//console.log(geoJson)
|
||
echarts.registerMap('德城区', geoJson);
|
||
|
||
myChart1.setOption(option = {
|
||
// tooltip: {
|
||
// trigger: 'item',
|
||
// formatter: '{b}<br/>{c}'
|
||
// },
|
||
tooltip: {
|
||
formatter:function(params){
|
||
return '体检总人数统计'+'<br />'+params.name+'：'+params.value
|
||
}//数据格式化
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
left: 'right',
|
||
top: 'center',
|
||
feature: {
|
||
dataView: {readOnly: false},
|
||
restore: {},
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
visualMap: {
|
||
min: 800,
|
||
max: 5000,
|
||
text: ['High', 'Low'],
|
||
textStyle:{
|
||
color:"#FFF",
|
||
},
|
||
realtime: false,
|
||
calculable: true,
|
||
inRange: {
|
||
color: ['lightskyblue', 'yellow', 'orangered']
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'map',
|
||
mapType: '德州', // 自定义扩展图表类型
|
||
itemStyle: {
|
||
normal: {label: {show: true}},
|
||
emphasis: {label: {show: true}},
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1,
|
||
[
|
||
|
||
{
|
||
offset: 0,
|
||
color: '#fc5da0'
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: '#c767d0'
|
||
}
|
||
]
|
||
)
|
||
}
|
||
},
|
||
data:dataList,
|
||
},
|
||
|
||
]
|
||
});
|
||
})
|
||
})
|
||
</script>
|
||
</script>
|
||
</body>
|
||
</html>
|