999 lines
19 KiB
HTML
999 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html style="height: 100%;">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
</head>
|
|
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="js/layui-v2.5.4/layui/layui.js" type="text/javascript" charset="utf-8"></script>
|
|
<link rel="stylesheet" type="text/css" href="./js/layui-v2.5.4/layui/css/layui.css" />
|
|
<script src="js/layui-v2.5.6/layui/layui.all.js"></script>
|
|
<style type="text/css">
|
|
.clear_box::after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.daping_box {
|
|
background: #24293d;
|
|
}
|
|
|
|
.daping_top_box {
|
|
height: 150px;
|
|
}
|
|
|
|
.daping_top_box_one {
|
|
float: left;
|
|
width: 10%;
|
|
margin-top: 30px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.input_date {
|
|
background: none;
|
|
color: #FFF;
|
|
border: 1px solid #FFF;
|
|
}
|
|
|
|
.daping_top_box_two {
|
|
background: #2e3347;
|
|
float: left;
|
|
width: 20%;
|
|
height: 130px;
|
|
margin-top: 10px;
|
|
margin-left: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.back_img {
|
|
background: url(img/icon.png)no-repeat;
|
|
display: block;
|
|
float: left;
|
|
width: 25%;
|
|
height: 80px;
|
|
margin-top: 30px;
|
|
margin-left: 20px;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.rignt_cont {
|
|
width: 68%;
|
|
float: left;
|
|
margin-top: 35px;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.a_tit {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
color: #FFF;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.a_tj {
|
|
font-size: 26px;
|
|
color: #e1b44d;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.a_wei {
|
|
color: #e1b44d;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.daping_top_box_three {
|
|
width: 15%;
|
|
text-align: center;
|
|
float: left;
|
|
background: #2e3347;
|
|
height: 130px;
|
|
margin-top: 10px;
|
|
margin-left: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.title_a {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
color: #FFF;
|
|
font-size: 24px;
|
|
margin-top: 30px;
|
|
margin-left: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.daping_box_con {}
|
|
|
|
.cont_daping_left {
|
|
width: 34%;
|
|
float: left;
|
|
background: #2e3347;
|
|
border-radius: 8px;
|
|
margin-left: 10px;
|
|
margin-top: 10px;
|
|
padding-top: 5px;
|
|
box-sizing: border-box;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.cont_daping_con {
|
|
width: 28%;
|
|
float: left;
|
|
background: #2e3347;
|
|
padding-left: 10px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
margin-left: 20px;
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.cont_daping_right {
|
|
width: 34%;
|
|
float: left;
|
|
background: #2e3347;
|
|
border-radius: 8px;
|
|
padding-top: 10px;
|
|
padding-left: 10px;
|
|
box-sizing: border-box;
|
|
margin-top: 10px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.daping_box_bottom_left {
|
|
width: 34%;
|
|
float: left;
|
|
margin-left: 10px;
|
|
margin-top: 10px;
|
|
padding-top: 5px;
|
|
box-sizing: border-box;
|
|
margin-left: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.sjtj {
|
|
position: absolute;
|
|
font-size: 16px;
|
|
color: #FFF;
|
|
left: 250px;
|
|
top: 10px;
|
|
font-weight: bolder;
|
|
color: #f26947;
|
|
}
|
|
|
|
.sapn_yu {
|
|
margin-left: 10px;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.daping_box_bottom_con {
|
|
width: 28%;
|
|
float: left;
|
|
padding-left: 10px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
margin-left: 20px;
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.bottom_right_top a {
|
|
color: #FFF;
|
|
font-weight: bold;
|
|
display: block;
|
|
float: left;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.a_one {
|
|
width: 30%;
|
|
}
|
|
|
|
.a_two {
|
|
width: 20%;
|
|
}
|
|
|
|
.a_three {
|
|
width: 30%;
|
|
}
|
|
|
|
.a_four {
|
|
width: 40%;
|
|
}
|
|
|
|
.bottom_right_bottom {}
|
|
|
|
.bottom_right_top {
|
|
font-size: 16px;
|
|
color: #FFF;
|
|
height: 35px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.bottom_right_bottom ul {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
|
|
}
|
|
|
|
.bottom_right_bottom ul li a {
|
|
color: #FFF;
|
|
display: block;
|
|
float: left;
|
|
text-align: center;
|
|
display: block;
|
|
line-height: 40px;
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.bottom_right_bottom ul li {
|
|
list-style: none;
|
|
height: 40px;
|
|
}
|
|
|
|
.bottom_right_bottom ul li:hover {
|
|
cursor: pointer;
|
|
background: #102243;
|
|
}
|
|
|
|
.bottom_right_bottom ul li:hover a {
|
|
color: #54bac3 !important;
|
|
}
|
|
|
|
.daping_box_bottom_right {
|
|
width: 34%;
|
|
float: left;
|
|
padding-top: 10px;
|
|
padding-left: 10px;
|
|
box-sizing: border-box;
|
|
margin-top: 10px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.top_bottom_a {
|
|
height: 25px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.top_bottom_a a {
|
|
color: #FFF;
|
|
font-size: 20px;
|
|
font-weight: bolder;
|
|
|
|
}
|
|
|
|
.a_back {
|
|
color: #feae21 !important;
|
|
}
|
|
|
|
.back_li {
|
|
background: #33384c;
|
|
}
|
|
|
|
.dap_top {
|
|
height: 50px;
|
|
background: #111530;
|
|
}
|
|
|
|
.dap_top a {
|
|
font-size: 20px;
|
|
color: #FFF;
|
|
line-height: 50px;
|
|
margin-left: 20px;
|
|
}
|
|
</style>
|
|
|
|
<body style="height: 100%;">
|
|
<div class="dap_top">
|
|
|
|
</div>
|
|
<div class="daping_box" style="height: 100%;">
|
|
<div class="daping_top_box clear_box">
|
|
<div class="daping_top_box_one">
|
|
<input type="text" class="layui-input input_date" id="test1">
|
|
</div>
|
|
<div class="daping_top_box_two clear_box">
|
|
<span class="back_img"></span>
|
|
<div class="rignt_cont">
|
|
<a class="a_tit">职业卫生监管企业</a>
|
|
<a class="a_tj">1410</a><a class="a_wei">家</a>
|
|
</div>
|
|
</div>
|
|
<div class="daping_top_box_three">
|
|
<a class="title_a">工业企业</a>
|
|
<a class="a_tj">674</a><a class="a_wei">家</a>
|
|
</div>
|
|
<div class="daping_top_box_three">
|
|
<a class="title_a">商贸企业</a>
|
|
<a class="a_tj">561</a><a class="a_wei">家</a>
|
|
</div>
|
|
<div class="daping_top_box_three">
|
|
<a class="title_a">服务性企业</a>
|
|
<a class="a_tj">110</a><a class="a_wei">家</a>
|
|
</div>
|
|
<div class="daping_top_box_three">
|
|
<a class="title_a">省重点扶持企业</a>
|
|
<a class="a_tj">65</a><a class="a_wei">家</a>
|
|
</div>
|
|
</div>
|
|
<div class="daping_box_con clear_box">
|
|
<div class="cont_daping_left">
|
|
<div class="chartArea" id="data7" style="height:350px;width: 600px;margin: 0 auto;"></div>
|
|
</div>
|
|
<div class="cont_daping_con">
|
|
<div id="main" style="width: 500px;height:350px;"></div>
|
|
</div>
|
|
<div class="cont_daping_right">
|
|
<div id="main2" style="width: 600px;height:350px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="daping_box_bottom clear_box">
|
|
<div class="daping_box_bottom_left">
|
|
<a class="sjtj">总计:9423<span class="sapn_yu"></span></a>
|
|
<div id="main3" style="width: 600px;height:350px;"></div>
|
|
</div>
|
|
<div class="daping_box_bottom_con">
|
|
<div id="main4" style="width: 500px;height:350px;"></div>
|
|
</div>
|
|
<div class="daping_box_bottom_right clear_box">
|
|
<div class="top_bottom_a">
|
|
<a class="a_botom">近3年职业病综合监管</a>
|
|
</div>
|
|
<div style="border: 1px solid #FFF;">
|
|
<div class="bottom_right_top clear_box">
|
|
<a class="a_one">名称</a><a class="a_two">2017</a><a class="a_two">2018</a><a class="a_two">2019</a>
|
|
</div>
|
|
<div class="bottom_right_bottom">
|
|
<ul>
|
|
<li class="back_li">
|
|
<a class="a_one">德州华泰石油天然气有限公司</a><a class="a_two a_back">164</a><a class="a_two a_back">182</a>
|
|
<a class="a_two a_back">117</a>
|
|
</li>
|
|
<li>
|
|
<a class="a_one">山东禹城博大能源有限公司</a><a class="a_two a_back">174</a><a class="a_two a_back">166</a>
|
|
<a class="a_two a_back">91</a>
|
|
</li>
|
|
<li class="back_li">
|
|
<a class="a_one">山东禹城博大能源有限公司</a><a class="a_two a_back">142</a><a class="a_two a_back">125</a>
|
|
<a class="a_two a_back">191</a>
|
|
</li>
|
|
<li>
|
|
<a class="a_one">山东田丰生物科技有限公司</a><a class="a_two a_back">113</a><a class="a_two a_back">151</a>
|
|
<a class="a_two a_back">98</a>>
|
|
</li>
|
|
<li class="back_li">
|
|
< <a class="a_one">山东银飞达医药有限公司</a><a class="a_two a_back">124</a><a class="a_two a_back">121</a>
|
|
<a class="a_two a_back">78</a>
|
|
</li>
|
|
<li>
|
|
<a class="a_one">山东银飞达医药有限公司</a><a class="a_two a_back">234</a><a class="a_two a_back">168</a>
|
|
<a class="a_two a_back">64</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
layui.use('laydate', function() {
|
|
var laydate = layui.laydate;
|
|
|
|
//年选择器
|
|
laydate.render({
|
|
elem: '#test1',
|
|
type: 'year',
|
|
value: new Date()
|
|
});
|
|
});
|
|
var return_data = {
|
|
//"德州市": [579],
|
|
"德城区": [72.5],
|
|
"陵城区": [58.4],
|
|
"乐陵市": [67.6],
|
|
"禹城区": [51.8],
|
|
"宁津县": [46.7],
|
|
"庆云县": [30.7],
|
|
"临邑县": [53.3],
|
|
"齐河县": [62.0],
|
|
"平原县": [45.9],
|
|
"夏津县": [52.0],
|
|
"武城县": [38.5]
|
|
};
|
|
var nameData = [];
|
|
var valueData = [];
|
|
var valueData2 = [];
|
|
var sum = 0,
|
|
sum1 = 0;
|
|
for (let k in return_data) {
|
|
nameData.push(k);
|
|
valueData.push(return_data[k][0]);
|
|
valueData2.push(return_data[k][1]);
|
|
sum = sum + return_data[k][0];
|
|
sum1 = sum1 + return_data[k][1];
|
|
}
|
|
// $('#sum').append("(注册数量：" + sum +",发证数量：" + sum1+")");
|
|
var myChart = echarts.init(document.getElementById('data7'));
|
|
var myChart2 = echarts.init(document.getElementById('main'));
|
|
var myChart3 = echarts.init(document.getElementById('main2'));
|
|
var myChart4 = echarts.init(document.getElementById('main3'));
|
|
var myChart5 = echarts.init(document.getElementById('main4'));
|
|
var colorList = [
|
|
'#ff2600',
|
|
'#ffc000',
|
|
'#00ad4e',
|
|
'#0073c2',
|
|
'#165868',
|
|
'#e76f00',
|
|
'#316194',
|
|
'#723761',
|
|
'#00b2f1',
|
|
'#4d6022',
|
|
'#4b83bf',
|
|
'#f9c813',
|
|
'#0176c0',
|
|
'#D7504B', '#C6E579', '#F4E001'
|
|
];
|
|
var option = {
|
|
title: {
|
|
text: '德州市各区县人口总数',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'item',
|
|
formatter: "{c}"
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
mark: {
|
|
show: true
|
|
},
|
|
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '3%',
|
|
height: '85%',
|
|
width: '95%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#FFF', //左边线的颜色
|
|
width: '1' //坐标线的宽度
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 40,
|
|
show: true,
|
|
splitNumber: 15,
|
|
color: "#FFF",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
|
|
},
|
|
|
|
data: nameData,
|
|
|
|
axisTick: {
|
|
|
|
alignWithLabel: true
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
name: '',
|
|
splitLine: { //分割线
|
|
show: true,
|
|
color: "#fff",
|
|
lineStyle: {
|
|
color: '#FFF'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#FFF', //左边线的颜色
|
|
width: '1' //坐标线的宽度
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
show: true,
|
|
splitNumber: 30,
|
|
color: "#FFF",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
series: [{
|
|
name: '总人口数量（万）',
|
|
type: 'bar',
|
|
barWidth: 15, //柱图宽度
|
|
data: valueData,
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
// build a color map as your need.
|
|
var colorList = [
|
|
'#ff2600',
|
|
'#ffc000',
|
|
'#00ad4e',
|
|
'#0073c2',
|
|
'#165868',
|
|
'#e76f00',
|
|
'#316194',
|
|
'#723761',
|
|
'#00b2f1',
|
|
'#4d6022',
|
|
'#4b83bf',
|
|
'#f9c813',
|
|
'#0176c0',
|
|
'#D7504B', '#C6E579', '#F4E001'
|
|
];
|
|
return colorList[params.dataIndex]
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '老年人80岁以上数量',
|
|
type: 'bar',
|
|
barWidth: 15, //柱图宽度
|
|
data: valueData2,
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
// build a color map as your need.
|
|
var colorList = [
|
|
'#ff2600',
|
|
'#ffc000',
|
|
'#00ad4e',
|
|
'#0073c2',
|
|
'#165868',
|
|
'#e76f00',
|
|
'#316194',
|
|
'#723761',
|
|
'#00b2f1',
|
|
'#4d6022',
|
|
'#4b83bf',
|
|
'#f9c813',
|
|
'#0176c0',
|
|
'#D7504B', '#C6E579', '#F4E001'
|
|
];
|
|
return colorList[params.dataIndex]
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
option2 = {
|
|
title: {
|
|
text: '接害因素体检人数占比',
|
|
left: 'left',
|
|
textStyle: {
|
|
color: '#FFF'
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'right',
|
|
top: '40%',
|
|
data: ['铅及其无机化合物', '四乙基铅', '汞及其无机化合物', '氧化铅', '砷'],
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
series: [{
|
|
name: '访问来源',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '60%'],
|
|
data: [{
|
|
value: 335,
|
|
name: '铅及其无机化合物'
|
|
},
|
|
{
|
|
value: 310,
|
|
name: '四乙基铅'
|
|
},
|
|
{
|
|
value: 234,
|
|
name: '汞及其无机化合物'
|
|
},
|
|
{
|
|
value: 245,
|
|
name: '氧化铅'
|
|
},
|
|
{
|
|
value: 78,
|
|
name: '砷'
|
|
}
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
option3 = {
|
|
title: {
|
|
text: '完成学习人数',
|
|
left: 'left',
|
|
textStyle: {
|
|
color: '#FFF'
|
|
}
|
|
},
|
|
color: ['#3398DB'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['8月', '9月', '10月', '11月', '12月', '1月', '2月'],
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#FFF', //左边线的颜色
|
|
width: '1' //坐标线的宽度
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 40,
|
|
show: true,
|
|
splitNumber: 15,
|
|
color: "#FFF",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
|
|
},
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
splitLine: { //分割线
|
|
show: true,
|
|
color: "#fff",
|
|
lineStyle: {
|
|
color: '#FFF'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#FFF', //左边线的颜色
|
|
width: '1' //坐标线的宽度
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
show: true,
|
|
splitNumber: 30,
|
|
color: "#FFF",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
}],
|
|
series: [{
|
|
name: '完成学习人数',
|
|
type: 'bar',
|
|
barWidth: '60%',
|
|
data: [163, 254, 283, 125, 195, 190, 220]
|
|
}]
|
|
};
|
|
option4 = {
|
|
title: {
|
|
text: '世界人口总量',
|
|
left: 'left',
|
|
textStyle: {
|
|
color: '#FFF'
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01],
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#FFF', //左边线的颜色
|
|
width: '1' //坐标线的宽度
|
|
}
|
|
},
|
|
splitLine: { //分割线
|
|
show: true,
|
|
color: "#fff",
|
|
lineStyle: {
|
|
color: '#24293d'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 40,
|
|
show: true,
|
|
splitNumber: 15,
|
|
color: "#FFF",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
|
|
},
|
|
}],
|
|
yAxis: [{
|
|
type: 'category',
|
|
data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
|
|
splitLine: { //分割线
|
|
show: true,
|
|
color: "#fff",
|
|
lineStyle: {
|
|
color: '#24293d'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#fff', //左边线的颜色
|
|
width: '1' //坐标线的宽度
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
show: true,
|
|
splitNumber: 30,
|
|
color: "#FFF",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
}],
|
|
series: [{
|
|
name: '2011年',
|
|
type: 'bar',
|
|
data: [18203, 23489, 29034, 104970, 131744, 630230]
|
|
}]
|
|
};
|
|
var option5 = {
|
|
|
|
tooltip: {},
|
|
color: ['#4F9AFF', '#5ADBDC', '#f06b42'],
|
|
title: {
|
|
text: '体检年龄',
|
|
// subtext: 7789,
|
|
|
|
textStyle: {
|
|
color: '#f2f2f2',
|
|
fontSize: 20,
|
|
top: '10px'
|
|
// align: 'center'
|
|
},
|
|
//x: 'center',
|
|
//y: 'center'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'right',
|
|
top: '40%',
|
|
data: ['20-40岁', '40-60岁', '60岁以上'],
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
grid: {
|
|
bottom: 150,
|
|
left: 100,
|
|
right: '10%'
|
|
},
|
|
series: [
|
|
// 主要展示层的
|
|
{
|
|
radius: ['40%', '81%'],
|
|
center: ['50%', '50%'],
|
|
type: 'pie',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
formatter: '{b}{d}%',
|
|
textStyle: {
|
|
fontSize: 14
|
|
},
|
|
//position:['50%','50%'],// 'outside',
|
|
top: 10
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 5, //分支长度
|
|
length2: 5,
|
|
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
data: [{
|
|
name: '40-60岁',
|
|
value: 1335
|
|
},
|
|
{
|
|
name: '20-40岁',
|
|
value: 547
|
|
},
|
|
{
|
|
name: '60岁以上',
|
|
value: 252
|
|
},
|
|
]
|
|
},
|
|
// 边框的设置
|
|
{
|
|
radius: ['40%', '44%'],
|
|
center: ['50%', '50%'],
|
|
type: 'pie',
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
animation: false,
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
value: 1,
|
|
itemStyle: {
|
|
color: 'rgba(250,250,250,0.3)'
|
|
}
|
|
}]
|
|
},
|
|
{
|
|
name: '外边框',
|
|
type: 'pie',
|
|
clockWise: false, //顺时加载
|
|
hoverAnimation: false, //鼠标移入变大
|
|
center: ['50%', '50%'],
|
|
radius: ['65%', '65%'],
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: [{
|
|
value: '',
|
|
name: '',
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 2,
|
|
borderColor: '#0b5263'
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
]
|
|
}
|
|
|
|
myChart.setOption(option);
|
|
myChart2.setOption(option2);
|
|
myChart3.setOption(option3);
|
|
myChart4.setOption(option4);
|
|
myChart5.setOption(option5);
|
|
|
|
document.getElementById("main2").onclick = function() {
|
|
// /window.location="yjtjsz.html";
|
|
layer.open({
|
|
type: 2,
|
|
area: ['50%', '70%'],
|
|
title: "完成学习人数",
|
|
maxmin: true,
|
|
content: 'lxjl.html',
|
|
tn: ['关闭'],
|
|
yes: function(index) {
|
|
layer.close(index);
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|