500 lines
7.7 KiB
HTML
500 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="js/layui-v2.5.6/layui/layui.all.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="chartArea" id="data7" style="height:350px;width: 1200px;margin: 0 auto;"></div>
|
|
<div class="" style="width: 1500px;margin: 0 auto;margin-top: 20px!important;height: 350px;">
|
|
<div class="" id="main2" style="height:350px;width: 500px;float: left;"></div>
|
|
<div class="" id="main3" style="height:350px;width: 500px;float: left;"></div>
|
|
<div class="" id="main4" style="height:350px;width: 500px;float: left;"></div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var return_data = {
|
|
"二屯镇": [878],
|
|
"黄河涯镇": [788],
|
|
"赵虎镇": [755],
|
|
"抬头寺镇": [699],
|
|
"袁桥镇": [680],
|
|
"新湖街道": [631],
|
|
"新华街道": [620],
|
|
"天衢街道": [600],
|
|
"运河街道": [580],
|
|
"广川街道": [550],
|
|
"长河街道": [480],
|
|
"宋官屯街道": [358]
|
|
}
|
|
|
|
;
|
|
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('main2'));
|
|
var myChart3 = echarts.init(document.getElementById('main3'));
|
|
var myChart4 = echarts.init(document.getElementById('main4'));
|
|
var colorList = [];
|
|
|
|
var option = {
|
|
title: {
|
|
text: '用人单位填报档案统计',
|
|
left: 'center'
|
|
}
|
|
|
|
,
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'item',
|
|
formatter: "{c}"
|
|
}
|
|
|
|
,
|
|
toolbox: {
|
|
|
|
show: true,
|
|
feature: {
|
|
mark: {
|
|
show: true
|
|
}
|
|
|
|
,
|
|
|
|
}
|
|
}
|
|
|
|
,
|
|
legend: {
|
|
left: 'right',
|
|
data: ['用人档案数']
|
|
}
|
|
|
|
,
|
|
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: '#666', //左边线的颜色
|
|
width: '1' //坐标线的宽度
|
|
}
|
|
}
|
|
|
|
,
|
|
axisLabel: {
|
|
|
|
interval: 0,
|
|
rotate: 40,
|
|
show: true,
|
|
splitNumber: 15,
|
|
color: "#666",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
}
|
|
|
|
,
|
|
|
|
}
|
|
|
|
,
|
|
|
|
data: nameData,
|
|
|
|
axisTick: {
|
|
|
|
alignWithLabel: true
|
|
}
|
|
}
|
|
|
|
],
|
|
yAxis: [{
|
|
|
|
type: 'value',
|
|
name: '',
|
|
splitLine: {
|
|
|
|
//分割线
|
|
show: true,
|
|
// color:"#fff",
|
|
lineStyle: {
|
|
color: '#28316d'
|
|
}
|
|
}
|
|
|
|
,
|
|
axisLabel: {
|
|
|
|
interval: 0,
|
|
rotate: 0,
|
|
show: true,
|
|
splitNumber: 30,
|
|
color: "#666",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
}
|
|
}
|
|
|
|
,
|
|
|
|
}
|
|
|
|
,
|
|
|
|
],
|
|
series: [{
|
|
|
|
name: '用人档案数',
|
|
type: 'bar',
|
|
barWidth: 15,
|
|
//柱图宽度
|
|
data: valueData,
|
|
itemStyle: {
|
|
normal: {
|
|
|
|
color: '#0073c2',
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
]
|
|
}
|
|
|
|
;
|
|
|
|
|
|
|
|
option2 = {
|
|
title: {
|
|
text: '危害程度统计',
|
|
subtext: '危害程度统计',
|
|
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: [{
|
|
value: 3,
|
|
name: '一般'
|
|
}
|
|
|
|
,
|
|
{
|
|
value: 6,
|
|
name: '较重'
|
|
}
|
|
|
|
,
|
|
{
|
|
value: 5,
|
|
name: '严重'
|
|
}
|
|
|
|
,
|
|
{
|
|
value: 135,
|
|
name: '未分级'
|
|
}
|
|
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
|
|
]
|
|
}
|
|
|
|
;
|
|
|
|
option3 = {
|
|
title: {
|
|
text: '管理状况评测统计',
|
|
subtext: '管理状况评测统计',
|
|
left: 'center'
|
|
}
|
|
|
|
,
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
}
|
|
|
|
,
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['A级', 'B级', 'C级', '未分级']
|
|
}
|
|
|
|
,
|
|
series: [{
|
|
|
|
name: '访问来源',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%',
|
|
'60%'
|
|
],
|
|
data: [{
|
|
value: 335,
|
|
name: 'A级'
|
|
}
|
|
|
|
,
|
|
{
|
|
value: 310,
|
|
name: 'B级'
|
|
}
|
|
|
|
,
|
|
{
|
|
value: 234,
|
|
name: 'C级'
|
|
}
|
|
|
|
,
|
|
{
|
|
value: 135,
|
|
name: '未分级'
|
|
}
|
|
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
|
|
]
|
|
}
|
|
|
|
;
|
|
|
|
option4 = {
|
|
title: {
|
|
text: '预警统计',
|
|
subtext: '预警统计',
|
|
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: [{
|
|
value: 335,
|
|
name: '体检预警'
|
|
}
|
|
|
|
,
|
|
{
|
|
value: 310,
|
|
name: '监测预警'
|
|
}
|
|
|
|
,
|
|
{
|
|
value: 234,
|
|
name: '评价预警'
|
|
}
|
|
|
|
,
|
|
{
|
|
value: 135,
|
|
name: '申报预警'
|
|
}
|
|
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
|
|
]
|
|
}
|
|
|
|
;
|
|
myChart.setOption(option);
|
|
myChart2.setOption(option2);
|
|
myChart3.setOption(option3);
|
|
myChart4.setOption(option4);
|
|
|
|
|
|
|
|
|
|
document.getElementById("data7").onclick = function() {
|
|
|
|
// /window.location="yjtjsz.html";
|
|
layer.open({
|
|
|
|
type: 2,
|
|
area: ['50%', '70%'],
|
|
title: "员工列表档案",
|
|
maxmin: true,
|
|
content: 'yjtjsz.html',
|
|
tn: ['关闭'],
|
|
yes: function(index) {
|
|
layer.close(index);
|
|
}
|
|
}
|
|
|
|
)
|
|
}
|
|
|
|
|
|
document.getElementById("main4").onclick = function() {
|
|
|
|
// /window.location="yjtjsz.html";
|
|
layer.open({
|
|
|
|
type: 2,
|
|
area: ['50%', '70%'],
|
|
title: "预警条件设置",
|
|
maxmin: true,
|
|
content: 'yjtjsz.html',
|
|
tn: ['关闭'],
|
|
yes: function(index) {
|
|
layer.close(index);
|
|
}
|
|
}
|
|
|
|
)
|
|
}
|
|
|
|
document.getElementById("main2").onclick = function() {
|
|
|
|
// /window.location="yjtjsz.html";
|
|
layer.open({
|
|
|
|
type: 2,
|
|
area: ['50%', '70%'],
|
|
title: "危害程度",
|
|
maxmin: true,
|
|
content: 'pjbglb.html',
|
|
tn: ['关闭'],
|
|
yes: function(index) {
|
|
layer.close(index);
|
|
}
|
|
}
|
|
|
|
)
|
|
}
|
|
|
|
document.getElementById("main3").onclick = function() {
|
|
|
|
// /window.location="yjtjsz.html";
|
|
layer.open({
|
|
|
|
type: 2,
|
|
area: ['50%', '70%'],
|
|
title: "管理状况评测统计",
|
|
maxmin: true,
|
|
content: 'pjbglb.html',
|
|
tn: ['关闭'],
|
|
yes: function(index) {
|
|
layer.close(index);
|
|
}
|
|
}
|
|
|
|
)
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|