744 lines
32 KiB
Plaintext
744 lines
32 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_CQMS.aspx.cs" Inherits="FineUIPro.Web.mainMenu_CQMS" %>
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head id="Head1" runat="server">
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<title>首页</title>
|
||
|
|
<link href="../res/indexv1/assets/css/sub_index.css" rel="stylesheet" />
|
||
|
|
<style type="text/css">
|
||
|
|
.q-rate-name {
|
||
|
|
letter-spacing:2px;
|
||
|
|
}
|
||
|
|
.sub-section-02 .q-rate-list .q-rate-box{
|
||
|
|
width: 1.25417rem !important;
|
||
|
|
height: 1.15417rem !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="sd-sub-body sd-sub-body--quality dis-flex">
|
||
|
|
<div class="sub-sections flex-1">
|
||
|
|
<div class="sub-section sub-section-01">
|
||
|
|
<div class="sub-section-header">
|
||
|
|
<span class="sub-section-title">合格率统计</span>
|
||
|
|
</div>
|
||
|
|
<div class="sub-section-inner">
|
||
|
|
<div class="q-rate-list">
|
||
|
|
<div class="q-rate-item q-rate-item--green">
|
||
|
|
<div class="q-rate-box">
|
||
|
|
<canvas class="q-rate-inner" id="qRate01" width="118" height="118" data-value="<%=One1 %>"></canvas>
|
||
|
|
</div>
|
||
|
|
<div class="q-rate-name">质量验收<br>
|
||
|
|
一次合格率</div>
|
||
|
|
</div>
|
||
|
|
<div class="q-rate-item q-rate-item--yellow">
|
||
|
|
<div class="q-rate-box">
|
||
|
|
<canvas class="q-rate-inner" id="qRate02" width="118" height="118" data-value="<%=One2 %>"></canvas>
|
||
|
|
</div>
|
||
|
|
<div class="q-rate-name">施工资料<br>
|
||
|
|
同步率</div>
|
||
|
|
</div>
|
||
|
|
<div class="q-rate-item q-rate-item--blue">
|
||
|
|
<div class="q-rate-box">
|
||
|
|
<canvas class="q-rate-inner" id="qRate03" width="118" height="118" data-value="<%=One3 %>"></canvas>
|
||
|
|
</div>
|
||
|
|
<div class="q-rate-name">质量问题<br>
|
||
|
|
整改完成率</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sub-section sub-section-02">
|
||
|
|
<div class="sub-section-header">
|
||
|
|
<span class="sub-section-title">质量控制点统计</span>
|
||
|
|
</div>
|
||
|
|
<div class="sub-section-inner">
|
||
|
|
<div class="q-rate-list" style='padding-top:0;'>
|
||
|
|
<div class="q-rate-item">
|
||
|
|
<div class="q-rate-box">
|
||
|
|
<div class="q-rate-inner" id="echarts02_1"></div>
|
||
|
|
</div>
|
||
|
|
<div class="q-rate-name">A类</div>
|
||
|
|
</div>
|
||
|
|
<div class="q-rate-item">
|
||
|
|
<div class="q-rate-box">
|
||
|
|
<div class="q-rate-inner" id="echarts02_2"></div>
|
||
|
|
</div>
|
||
|
|
<div class="q-rate-name">B类</div>
|
||
|
|
</div>
|
||
|
|
<div class="q-rate-item">
|
||
|
|
<div class="q-rate-box">
|
||
|
|
<div class="q-rate-inner" id="echarts02_3"></div>
|
||
|
|
</div>
|
||
|
|
<div class="q-rate-name">C类</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sub-section sub-section-03">
|
||
|
|
<div class="sub-section-header">
|
||
|
|
<span class="sub-section-title">施工单位质量统计</span>
|
||
|
|
<ul class="sub-sections-tabs">
|
||
|
|
<li class="sub-section-item active" data-type="sgfbs">施工分包商</li>
|
||
|
|
<li class="sub-section-item" data-type="zy">专业</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="sub-section-inner">
|
||
|
|
<div id="echarts03" class="echarts-box"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sub-sections flex-1">
|
||
|
|
<div class="sub-section sub-section-04">
|
||
|
|
<div class="sub-section-header">
|
||
|
|
<span class="sub-section-title">质量问题统计</span>
|
||
|
|
<ul class="sub-sections-tabs">
|
||
|
|
<li class="sub-section-item active" data-type="sgfbs">施工分包商</li>
|
||
|
|
<li class="sub-section-item" data-type="azdwgc">安装单位工程</li>
|
||
|
|
<li class="sub-section-item" data-type="jzdwgz">建筑单位工程</li>
|
||
|
|
<li class="sub-section-item" data-type="zy">专业</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="sub-section-inner">
|
||
|
|
<div id="echarts04" class="echarts-box"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sub-section sub-section-05">
|
||
|
|
<div class="sub-section-header">
|
||
|
|
<span class="sub-section-title">产品质量统计</span>
|
||
|
|
<ul class="sub-sections-tabs">
|
||
|
|
<li class="sub-section-item active" data-type="azdwgc">安装单位工程</li>
|
||
|
|
<li class="sub-section-item" data-type="jzdwgz">建筑单位工程</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="sub-section-inner">
|
||
|
|
<div id="echarts05" class="echarts-box"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="../res/indexv1/assets/js/jquery-2.1.1.min.js" type="text/javascript"></script>
|
||
|
|
<script src="../res/indexv1/assets/js/echarts-5.2.0.min.js" type="text/javascript"></script>
|
||
|
|
<script src="../res/indexv1/assets/js/draw-circle.js" type="text/javascript"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
$('.sub-section-03 ul li').click(function () {
|
||
|
|
var type = $(this).attr('data-type')
|
||
|
|
$(this).addClass('active').siblings().removeClass('active')
|
||
|
|
// 重新绘制图
|
||
|
|
if (type == 'sgfbs') {
|
||
|
|
// 施工分包商
|
||
|
|
initEchart03(three.categories, three.series[0].data, three.series[1].data)
|
||
|
|
} else if (type == 'zy') {
|
||
|
|
// 专业
|
||
|
|
initEchart03(three2.categories, three2.series[0].data, three2.series[1].data)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$('.sub-section-04 ul li').click(function () {
|
||
|
|
var type = $(this).attr('data-type')
|
||
|
|
$(this).addClass('active').siblings().removeClass('active')
|
||
|
|
// 重新绘制图
|
||
|
|
if (type == 'sgfbs') {
|
||
|
|
// 施工分包商
|
||
|
|
initEchart04(two.categories, two.series[0].data, two.series[1].data)
|
||
|
|
} else if (type == 'azdwgc') {
|
||
|
|
// 安装单位工程
|
||
|
|
initEchart04(two2.categories, two2.series[0].data, two2.series[1].data)
|
||
|
|
} else if (type == 'jzdwgz') {
|
||
|
|
// 建筑单位工程
|
||
|
|
initEchart04(two4.categories, two4.series[0].data, two4.series[1].data)
|
||
|
|
} else if (type == 'zy') {
|
||
|
|
// 专业
|
||
|
|
initEchart04(two3.categories, two3.series[0].data, two3.series[1].data)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$('.sub-section-05 ul li').click(function () {
|
||
|
|
var type = $(this).attr('data-type')
|
||
|
|
$(this).addClass('active').siblings().removeClass('active')
|
||
|
|
if (type == 'azdwgc') {
|
||
|
|
// 安装单位工程
|
||
|
|
initEchart05(four.categories, four.series[0].data, four.series[1].data)
|
||
|
|
} else if (type == 'jzdwgz') {
|
||
|
|
// 建筑单位工程
|
||
|
|
initEchart05(four2.categories, four2.series[0].data, four2.series[1].data)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
function initEchart01() {
|
||
|
|
drawCircle({
|
||
|
|
drawing_elem: 'qRate01',
|
||
|
|
percentfontsize: 24,
|
||
|
|
unitfontsize: 20,
|
||
|
|
lineWidth: 18,
|
||
|
|
addLeft: 4,
|
||
|
|
percentfontcolor: "#15edbb",
|
||
|
|
forecolor: [{ step: 0, color: "#15edbb" }, { step: 0.2, color: "#15edbb" }, { step: 1, color: "rgba(21,237,187,0.05)" }],
|
||
|
|
unitfontcolor: '#15edbb',
|
||
|
|
unitadd: 1,
|
||
|
|
});
|
||
|
|
drawCircle({
|
||
|
|
drawing_elem: 'qRate02',
|
||
|
|
percentfontsize: 24,
|
||
|
|
unitfontsize: 20,
|
||
|
|
lineWidth: 18,
|
||
|
|
addLeft: 4,
|
||
|
|
percentfontcolor: "#ffa600",
|
||
|
|
forecolor: [{ step: 0, color: "#ffa600" }, { step: 0.2, color: "#ffa600" }, { step: 1, color: "rgba(255,166,0,0.05)" }],
|
||
|
|
unitfontcolor: '#ffa600',
|
||
|
|
unitadd: 1,
|
||
|
|
});
|
||
|
|
drawCircle({
|
||
|
|
drawing_elem: 'qRate03',
|
||
|
|
percentfontsize: 24,
|
||
|
|
unitfontsize: 20,
|
||
|
|
lineWidth: 18,
|
||
|
|
addLeft: 4,
|
||
|
|
percentfontcolor: "#00ffff",
|
||
|
|
forecolor: [{ step: 0, color: "#00ffff" }, { step: 0.2, color: "#00ffff" }, { step: 1, color: "rgba(0,255,255,0.05)" }],
|
||
|
|
unitfontcolor: '#00ffff',
|
||
|
|
unitadd: 1,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function initEchart02(options) {
|
||
|
|
var chartDom = document.getElementById(options.canvasId);
|
||
|
|
var myChart = echarts.init(chartDom);
|
||
|
|
var option;
|
||
|
|
|
||
|
|
var data = [
|
||
|
|
{
|
||
|
|
name: '未完成', value: options.n, label: {
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: '#f24166',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
percent: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: '#f24166',
|
||
|
|
align: 'center',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '已完成', value: options.y, label: {
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: '#15edbb',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
percent: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: '#15edbb',
|
||
|
|
align: 'center',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
option = {
|
||
|
|
color: ['#f24166', '#15edbb'],
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
formatter: '{b} : {c}'
|
||
|
|
//formatter: '{b} : {d}%'
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '质量控制点统计',
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['40%', '65%'],
|
||
|
|
top: '5%',
|
||
|
|
left: 'center',
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
label: {
|
||
|
|
alignTo: 'edge',
|
||
|
|
//formatter: '{name|{b}}\n{percent|{d}%}',
|
||
|
|
formatter: '{name|{b}} {percent|{c}}',
|
||
|
|
minMargin: 5,
|
||
|
|
edgeDistance: 10,
|
||
|
|
lineHeight: 15,
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
length: 10,
|
||
|
|
length2: 0,
|
||
|
|
maxSurfaceAngle: 80
|
||
|
|
},
|
||
|
|
data: data
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
myChart.clear();//清空
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function initEchart03(dataType, data1, data2) {
|
||
|
|
var chartDom = document.getElementById('echarts03');
|
||
|
|
var myChart = echarts.init(chartDom);
|
||
|
|
var option;
|
||
|
|
|
||
|
|
var xAxisData =dataType
|
||
|
|
option = {
|
||
|
|
color: ['#15edbb', '#ffa600'],
|
||
|
|
grid: {
|
||
|
|
top: '15%',
|
||
|
|
left: '3%',
|
||
|
|
right: '3%',
|
||
|
|
bottom: '5%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: '4%',
|
||
|
|
left: 'center',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
name: '质量验收一次合格率', icon: 'roundRect', textStyle: {
|
||
|
|
color: '#15edbb'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
name: '施工资料同步率', icon: 'roundRect', textStyle: {
|
||
|
|
color: '#ffa600'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
itemWidth: 16,//图例的宽度
|
||
|
|
itemHeight: 8,//图例的高度
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: true,
|
||
|
|
data: xAxisData,
|
||
|
|
axisLabel: {
|
||
|
|
color: '#1ab1ff',
|
||
|
|
interval: 0,
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
onZero: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#1ab1ff',
|
||
|
|
width: 1,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
onZero: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#1ab1ff',
|
||
|
|
width: 1,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed',
|
||
|
|
color: '#0D3C65',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '质量验收一次合格率',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
smooth: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 0
|
||
|
|
},
|
||
|
|
showSymbol: false,
|
||
|
|
areaStyle: {
|
||
|
|
opacity: 0.8,
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(21,237,187,0.3)',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#15edbb'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: data1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '施工资料同步率',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
smooth: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 0
|
||
|
|
},
|
||
|
|
showSymbol: false,
|
||
|
|
areaStyle: {
|
||
|
|
opacity: 0.8,
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(255,166,0,0.3)',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#ffa600'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: data2
|
||
|
|
},
|
||
|
|
]
|
||
|
|
};
|
||
|
|
myChart.clear();//清空
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function initEchart04(dataType, data1, data2) {
|
||
|
|
var chartDom = document.getElementById('echarts04');
|
||
|
|
var myChart = echarts.init(chartDom);
|
||
|
|
var option;
|
||
|
|
|
||
|
|
let xAxisData = dataType;
|
||
|
|
option = {
|
||
|
|
color: ['#f24166', '#15edbb'],
|
||
|
|
grid: {
|
||
|
|
top: '15%',
|
||
|
|
left: '3%',
|
||
|
|
right: '3%',
|
||
|
|
bottom: '5%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
showDelay: 0,
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: '4%',
|
||
|
|
left: 'center',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 12,//字体大小
|
||
|
|
},
|
||
|
|
data: [{
|
||
|
|
name: '未整改', icon: 'roundRect', textStyle: {
|
||
|
|
color: '#f24166'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
name: '已整改', icon: 'roundRect', textStyle: {
|
||
|
|
color: '#15edbb'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
itemWidth: 16,//图例的宽度
|
||
|
|
itemHeight: 8,//图例的高度
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
data: xAxisData,
|
||
|
|
boundaryGap: true,
|
||
|
|
axisLabel: {
|
||
|
|
color: '#1ab1ff',
|
||
|
|
interval: 0,
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
onZero: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#1ab1ff',
|
||
|
|
width: 1,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
color: '#1ab1ff',
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed',
|
||
|
|
color: '#0D3C65',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitNumber: 5,
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '未整改',
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: 20,
|
||
|
|
data: data1,
|
||
|
|
barGap: '0%',/*多个并排柱子设置柱子之间的间距*/
|
||
|
|
barCategoryGap: '0%',/*多个并排柱子设置柱子之间的间距*/
|
||
|
|
itemStyle: {
|
||
|
|
color: '#1ab1ff',
|
||
|
|
emphasis: {
|
||
|
|
barBorderRadius: [10, 10, 0, 0],
|
||
|
|
},
|
||
|
|
normal: {
|
||
|
|
barBorderRadius: [10, 10, 0, 0],
|
||
|
|
color: new echarts.graphic.LinearGradient(
|
||
|
|
1, 1, 1, 0,
|
||
|
|
[
|
||
|
|
{ offset: 0, color: 'rgba(242,65,102,.2)' },
|
||
|
|
{ offset: 1, color: '#f24166' }
|
||
|
|
]
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '已整改',
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: 20,
|
||
|
|
data: data2,
|
||
|
|
barGap: '0%',/*多个并排柱子设置柱子之间的间距*/
|
||
|
|
barCategoryGap: '0%',/*多个并排柱子设置柱子之间的间距*/
|
||
|
|
itemStyle: {
|
||
|
|
color: '#f24166',
|
||
|
|
emphasis: {
|
||
|
|
barBorderRadius: [10, 10, 0, 0],
|
||
|
|
},
|
||
|
|
normal: {
|
||
|
|
barBorderRadius: [10, 10, 0, 0],
|
||
|
|
color: new echarts.graphic.LinearGradient(
|
||
|
|
1, 1, 1, 0,
|
||
|
|
[
|
||
|
|
{ offset: 0, color: 'rgba(21,237,187,0.2)' },
|
||
|
|
{ offset: 1, color: '#15edbb' }
|
||
|
|
]
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
myChart.clear();//清空
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function initEchart05(dataType, data1, data2) {
|
||
|
|
var chartDom = document.getElementById('echarts05');
|
||
|
|
var myChart = echarts.init(chartDom);
|
||
|
|
var option;
|
||
|
|
|
||
|
|
var xAxisData = dataType;
|
||
|
|
option = {
|
||
|
|
color: ['#101a3b', '#4f3b36'],
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '15%',
|
||
|
|
left: '3%',
|
||
|
|
right: '3%',
|
||
|
|
bottom: '5%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: '4%',
|
||
|
|
left: 'center',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 12,//字体大小
|
||
|
|
},
|
||
|
|
data: [{
|
||
|
|
name: '质量验收一次合格率', icon: 'roundRect', itemStyle: {
|
||
|
|
color: '#25c99f'
|
||
|
|
}, textStyle: {
|
||
|
|
color: '#25c99f'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
name: '施工资料同步率', icon: 'roundRect', itemStyle: {
|
||
|
|
color: '#f79c2f'
|
||
|
|
}, textStyle: {
|
||
|
|
color: '#f79c2f'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
itemWidth: 16,//图例的宽度
|
||
|
|
itemHeight: 8,//图例的高度
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: true,
|
||
|
|
data: xAxisData,
|
||
|
|
axisLabel: {
|
||
|
|
color: '#1ab1ff',
|
||
|
|
interval: 0,
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
onZero: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#1ab1ff',
|
||
|
|
width: 1,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
onZero: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#1ab1ff',
|
||
|
|
width: 1,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed',
|
||
|
|
color: '#0D3C65',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitNumber: 5,
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
name: '质量验收一次合格率',
|
||
|
|
color: '#17b1e5', //线条颜色
|
||
|
|
data: data1,
|
||
|
|
symbol: "none", // 去除小圆点
|
||
|
|
areaStyle: {
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 1,
|
||
|
|
x2: 0,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0, color: '#101a3b' // 100% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1, color: '#517257' // 0% 处的颜色
|
||
|
|
}],
|
||
|
|
global: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
lineStyle: { width: 1, color: '#25c99f' }, //隐藏线
|
||
|
|
abel: { show: false }, // 隐藏文字
|
||
|
|
itemStyle: {
|
||
|
|
color: '#25c99f',
|
||
|
|
normal: {
|
||
|
|
label: { show: false, color: '#1ac9ff' }, //顶部显示数值
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
name: '施工资料同步率',
|
||
|
|
color: '#17b1e5', //线条颜色
|
||
|
|
// smooth: true, //线条平滑
|
||
|
|
data: data2,
|
||
|
|
symbol: "none", // 去除小圆点
|
||
|
|
areaStyle: {
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 1,
|
||
|
|
x2: 0,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0, color: '#4f3b36' // 100% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1, color: '#785234' // 0% 处的颜色
|
||
|
|
}],
|
||
|
|
global: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
lineStyle: { width: 1, color: '#f79c2f' }, //隐藏线
|
||
|
|
abel: { show: false }, // 隐藏文字
|
||
|
|
itemStyle: {
|
||
|
|
color: '#f79c2f',
|
||
|
|
normal: {
|
||
|
|
label: { show: false, color: '#1ac9ff' }, //顶部显示数值
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
myChart.clear();//清空
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
initEchart01()
|
||
|
|
var one4 =<%=One4 %>;
|
||
|
|
console.log(one4)
|
||
|
|
initEchart02({ canvasId: 'echarts02_1', y: one4.num2, n: one4.num1 })
|
||
|
|
initEchart02({ canvasId: 'echarts02_2', y: one4.num5, n: one4.num4 })
|
||
|
|
initEchart02({ canvasId: 'echarts02_3', y: one4.num8, n: one4.num7 })
|
||
|
|
|
||
|
|
var three =<%=Three %>;
|
||
|
|
var three2 =<%=Three2 %>;
|
||
|
|
initEchart03(three.categories, three.series[0].data, three.series[1].data)
|
||
|
|
|
||
|
|
var two =<%=Two %>;
|
||
|
|
var two2 =<%=Two2 %>;
|
||
|
|
var two3 =<%=Two3 %>;
|
||
|
|
var two4 =<%=Two4 %>;
|
||
|
|
initEchart04(two.categories, two.series[0].data, two.series[1].data)
|
||
|
|
|
||
|
|
var four =<%=Four %>;
|
||
|
|
var four2 =<%=Four2 %>;
|
||
|
|
initEchart05(four.categories, four.series[0].data, four.series[1].data)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|