1114 lines
40 KiB
Plaintext
1114 lines
40 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_QMSCheck.aspx.cs" Inherits="FineUIPro.Web.mainMenu_QMSCheck" %>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head id="Head1" runat="server">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>首页</title>
|
|
<link href="../res/index/css/reset.css" rel="stylesheet" />
|
|
<link href="../res/index/css/home.css" rel="stylesheet" />
|
|
<link href="../res/index/css/swiper-3.4.2.min.css" rel="stylesheet" />
|
|
<style type="text/css">
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.flexV {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.wrap {
|
|
height: 100%;
|
|
padding: 15px;
|
|
/*background-color: #EEEED1;*/
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.iteml {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.itemb {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.bottom-wrap {
|
|
padding: 0;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.bottom-wrap:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.bw-b-bottom {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.bw-b-bottom-up {
|
|
border-radius: 0;
|
|
height: 100%;
|
|
margin: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.bw-item-content {
|
|
padding: 5px;
|
|
}
|
|
|
|
.top {
|
|
width: 100%;
|
|
}
|
|
|
|
.top .item {
|
|
}
|
|
|
|
.bw-b {
|
|
width: 50%;
|
|
}
|
|
|
|
.bw-b-bottom-up {
|
|
}
|
|
|
|
.tab-wrap {
|
|
left: auto;
|
|
right: 15px;
|
|
top: 5px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tab .t-item {
|
|
width: auto;
|
|
padding: 5px 10px;
|
|
color: #363636;
|
|
}
|
|
|
|
.tit-item {
|
|
padding: 0 10px;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tab-wrap .tab .t-item {
|
|
color: #1C1C1C;
|
|
}
|
|
|
|
.tip-item {
|
|
margin-left: 10px;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.tip {
|
|
width: 25px;
|
|
height: 13px;
|
|
background-color: #258F76;
|
|
border-radius: 2px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.tip-next {
|
|
background-color: #4F4F4F;
|
|
}
|
|
|
|
.myTableClass {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
margin: 2px 1px;
|
|
border-collapse: collapse; /* 设置表格边框合并 */
|
|
border: 1px solid #BEBEBE;
|
|
background: #ffffff;
|
|
color: #8B8989; /* 设置表格文字颜色 */
|
|
text-align: center; /* 设置表格文字居中 */
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tab-title {
|
|
height: 48px;
|
|
color: #3CB371;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tab-header {
|
|
height: 36px;
|
|
color: #1C86EE;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
td, th {
|
|
border: 1px solid #BEBEBE;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap flex flexV">
|
|
<div class="bottom-wrap flex1">
|
|
<div class="top flex">
|
|
<div class="item flex1 iteml">
|
|
<div class="bw-b-bottom">
|
|
<div class="bw-b-bottom-up">
|
|
<div class="bw-item-content">
|
|
<div id="classifyTable" runat="server" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item flex1 iteml">
|
|
<div class="bw-b-bottom">
|
|
<div class="bw-b-bottom-up">
|
|
<div class="tab-wrap">
|
|
<div class="tab" data-value="2">
|
|
<div class="t-item active">本月</div>
|
|
<div class="spline"></div>
|
|
<div class="t-item">今年</div>
|
|
</div>
|
|
</div>
|
|
<div class="bw-item-content">
|
|
<div id="classifyBarChart" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item flex1 iteml">
|
|
<div class="bw-b-bottom">
|
|
<div class="bw-b-bottom-up">
|
|
<div class="tab-wrap">
|
|
<div class="tab" data-value="7">
|
|
<div class="t-item active">本月</div>
|
|
<div class="spline"></div>
|
|
<div class="t-item">今年</div>
|
|
</div>
|
|
</div>
|
|
<div class="bw-item-content">
|
|
<div id="natureBarChart" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-wrap flex1">
|
|
<div class="top flex">
|
|
<div class="item flex1 iteml">
|
|
<div class="bw-b-bottom">
|
|
<div class="bw-b-bottom-up">
|
|
<div class="tab-wrap">
|
|
<div class="tab" data-value="3">
|
|
<div class="t-item active">本月</div>
|
|
<div class="spline"></div>
|
|
<div class="t-item">今年</div>
|
|
</div>
|
|
</div>
|
|
<div class="bw-item-content">
|
|
<div id="q1Pie" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item flex1 iteml">
|
|
<div class="bw-b-bottom">
|
|
<div class="bw-b-bottom-up">
|
|
<div class="tab-wrap">
|
|
<div class="tab" data-value="4">
|
|
<div class="t-item active">本月</div>
|
|
<div class="spline"></div>
|
|
<div class="t-item">今年</div>
|
|
</div>
|
|
</div>
|
|
<div class="bw-item-content">
|
|
<div id="q2Pie" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-wrap flex1">
|
|
<div class="top flex">
|
|
<div class="item flex1 iteml">
|
|
<div class="bw-b-bottom">
|
|
<div class="bw-b-bottom-up">
|
|
<div class="tab-wrap">
|
|
<div class="tab" data-value="5">
|
|
<div class="t-item active">本月</div>
|
|
<div class="spline"></div>
|
|
<div class="t-item">今年</div>
|
|
</div>
|
|
</div>
|
|
<div class="bw-item-content">
|
|
<div id="q3Pie" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item flex1 iteml">
|
|
<div class="bw-b-bottom">
|
|
<div class="bw-b-bottom-up">
|
|
<div class="tab-wrap">
|
|
<div class="tab" data-value="6">
|
|
<div class="t-item active">本月</div>
|
|
<div class="spline"></div>
|
|
<div class="t-item">今年</div>
|
|
</div>
|
|
</div>
|
|
<div class="bw-item-content">
|
|
<div id="q4Pie" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="../res/index/js/jquery-3.4.1.min.js"></script>
|
|
<script type="text/javascript" src="../res/index/js/swiper-3.4.2.jquery.min.js"></script>
|
|
<script type="text/javascript" src="../res/index/js/echarts.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
function category_Q1Pie(id, sum, pieData, legdata) {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById(id))
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title: [{
|
|
text: '人员管理类统计',
|
|
left: 'center'
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: legdata,
|
|
},
|
|
graphic: {
|
|
type: "text",
|
|
left: "36%",
|
|
top: "52%",
|
|
style: {
|
|
text: sum,
|
|
textAlign: "center",
|
|
fill: "#000",
|
|
fontSize: 18,
|
|
fontWeight: 600
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '人员管理类统计',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: pieData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
}
|
|
var q1Pie =<%=Q1Pie %>;
|
|
var sum = q1Pie.stack;
|
|
var pieData = q1Pie.series[0].pieData;
|
|
var legend = q1Pie.series[0].dataString;
|
|
category_Q1Pie('q1Pie', sum, pieData, legend);
|
|
</script>
|
|
<script type="text/javascript">
|
|
function category_Q2Pie(id, sum, pieData, legdata) {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById(id))
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title: [{
|
|
text: '现场管理类统计',
|
|
left: 'center'
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: legdata,
|
|
},
|
|
graphic: {
|
|
type: "text",
|
|
left: "36%",
|
|
top: "52%",
|
|
style: {
|
|
text: sum,
|
|
textAlign: "center",
|
|
fill: "#000",
|
|
fontSize: 18,
|
|
fontWeight: 600
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '现场管理类统计',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: pieData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
}
|
|
var q2Pie =<%=Q2Pie %>;
|
|
var sum = q2Pie.stack;
|
|
var pieData = q2Pie.series[0].pieData;
|
|
var legend = q2Pie.series[0].dataString;
|
|
category_Q2Pie('q2Pie', sum, pieData, legend);
|
|
</script>
|
|
<script type="text/javascript">
|
|
function category_Q3Pie(id, sum, pieData, legdata) {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById(id))
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title: [{
|
|
text: '施工质量类统计',
|
|
left: 'center'
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: legdata,
|
|
},
|
|
graphic: {
|
|
type: "text",
|
|
left: "36%",
|
|
top: "52%",
|
|
style: {
|
|
text: sum,
|
|
textAlign: "center",
|
|
fill: "#000",
|
|
fontSize: 18,
|
|
fontWeight: 600
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '施工质量类统计',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: pieData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
}
|
|
var q3Pie =<%=Q3Pie %>;
|
|
var sum = q3Pie.stack;
|
|
var pieData = q3Pie.series[0].pieData;
|
|
var legend = q3Pie.series[0].dataString;
|
|
category_Q3Pie('q3Pie', sum, pieData, legend);
|
|
</script>
|
|
<script type="text/javascript">
|
|
function category_Q4Pie(id, sum, pieData, legdata) {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById(id))
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title: [{
|
|
text: '质量文件和记录类统计',
|
|
left: 'center'
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: legdata,
|
|
},
|
|
graphic: {
|
|
type: "text",
|
|
left: "36%",
|
|
top: "52%",
|
|
style: {
|
|
text: sum,
|
|
textAlign: "center",
|
|
fill: "#000",
|
|
fontSize: 18,
|
|
fontWeight: 600
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '质量文件和记录类统计',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: pieData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
}
|
|
var q4Pie =<%=Q4Pie %>;
|
|
var sum = q4Pie.stack;
|
|
var pieData = q4Pie.series[0].pieData;
|
|
var legend = q4Pie.series[0].dataString;
|
|
category_Q4Pie('q4Pie', sum, pieData, legend);
|
|
</script>
|
|
<script type="text/javascript">
|
|
function category_ClassifyBar(id, xArr, data, num) {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById(id))
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title: {
|
|
// left:'center',
|
|
text: '按问题分类统计',
|
|
textStyle: {
|
|
color: '#1C1C1C',
|
|
fontSize: 16,
|
|
fontWeight: 700
|
|
},
|
|
show: true
|
|
},
|
|
tooltip: {},
|
|
legend: {
|
|
left: '55%',
|
|
show: true,
|
|
textStyle: {//图例文字的样式
|
|
color: '#363636',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
dataZoom: [//底部滚动条
|
|
{
|
|
type: 'slider',
|
|
// start: 0,
|
|
// end: 60
|
|
maxValueSpan: 10,
|
|
show: false,//true：显示、false：隐藏
|
|
xAxisIndex: [0],
|
|
bottom: 0, height: 10,
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
borderColor: 'none',
|
|
brushSelect: false,
|
|
textStyle: {
|
|
color: 'rgba(0,0,0,0)'
|
|
},
|
|
selectedDataBackground: {
|
|
areaStyle: {
|
|
color: 'red',
|
|
borderWidth: 0
|
|
}
|
|
},
|
|
handleStyle: { // 缩放手柄的样式
|
|
color: "#0a1449"
|
|
},
|
|
moveHandleStyle: {
|
|
color: '#0a1449'
|
|
}
|
|
}
|
|
],
|
|
xAxis: {
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(0,0,0, 0.3)',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: 'rgba(0,0,0, 0.8)'
|
|
},
|
|
interval: 0,
|
|
rotate: 0,
|
|
formatter: function (value) {
|
|
var ret = "";//拼接加\n返回的类目项
|
|
var maxLength = num;//每项显示文字个数
|
|
var valLength = value.length;//X轴类目项的文字个数
|
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
|
if (rowN > 1)//如果类目项的文字大于maxLength,
|
|
{
|
|
for (var i = 0; i < rowN; i++) {
|
|
var temp = "";//每次截取的字符串
|
|
var start = i * maxLength;//开始截取的位置
|
|
var end = start + maxLength;//结束截取的位置
|
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
|
//temp = value.substring(start, end) + "\n";
|
|
temp = value.substring(start, end) + (i == rowN - 1 ? "" : "\n");
|
|
ret += temp; //凭借最终的字符串
|
|
}
|
|
return ret;
|
|
}
|
|
else {
|
|
return value;
|
|
}
|
|
}
|
|
},
|
|
type: 'category',
|
|
data: xArr,
|
|
boundaryGap: [0, 0.01],
|
|
},
|
|
yAxis: {
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: 'rgba(0,0,0, 0.3)'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: 'rgba(0,0,0, 0.8)'
|
|
}
|
|
},
|
|
},
|
|
series: data,
|
|
grid: {
|
|
top: '20%',
|
|
left: '0%',
|
|
right: '0%',
|
|
bottom: 40,
|
|
containLabel: true,
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|
// borderColor: 'rgba(0,162,233, 1)'
|
|
},
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|
textStyle: {
|
|
color: 'rgba(0,0,0, 0.3)'
|
|
}
|
|
}
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option)
|
|
}
|
|
var classifyBar =<%=ClassifyBar %>;
|
|
var xArr = classifyBar.categories;
|
|
var data = [
|
|
{
|
|
name: '承包商',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: classifyBar.series[0].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(255,0,0, 0.5)' } }
|
|
},
|
|
{
|
|
name: '项目部',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: classifyBar.series[1].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(0,100,0,0.8)' } }
|
|
}
|
|
]
|
|
category_ClassifyBar('classifyBarChart', xArr, data, classifyBar.xFontNum);
|
|
</script>
|
|
<script type="text/javascript">
|
|
function category_NatureBar(id, xArr, data, num) {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById(id))
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title: {
|
|
// left:'center',
|
|
text: '按问题属性统计',
|
|
textStyle: {
|
|
color: '#1C1C1C',
|
|
fontSize: 16,
|
|
fontWeight: 700
|
|
},
|
|
show: true
|
|
},
|
|
tooltip: {},
|
|
legend: {
|
|
left: '55%',
|
|
show: true,
|
|
textStyle: {//图例文字的样式
|
|
color: '#363636',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
dataZoom: [//底部滚动条
|
|
{
|
|
type: 'slider',
|
|
// start: 0,
|
|
// end: 60
|
|
maxValueSpan: 10,
|
|
show: false,//true：显示、false：隐藏
|
|
xAxisIndex: [0],
|
|
bottom: 0, height: 10,
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
borderColor: 'none',
|
|
brushSelect: false,
|
|
textStyle: {
|
|
color: 'rgba(0,0,0,0)'
|
|
},
|
|
selectedDataBackground: {
|
|
areaStyle: {
|
|
color: 'red',
|
|
borderWidth: 0
|
|
}
|
|
},
|
|
handleStyle: { // 缩放手柄的样式
|
|
color: "#0a1449"
|
|
},
|
|
moveHandleStyle: {
|
|
color: '#0a1449'
|
|
}
|
|
}
|
|
],
|
|
xAxis: {
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(0,0,0, 0.3)',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: 'rgba(0,0,0, 0.8)'
|
|
},
|
|
interval: 0,
|
|
rotate: 0,
|
|
formatter: function (value) {
|
|
var ret = "";//拼接加\n返回的类目项
|
|
var maxLength = num;//每项显示文字个数
|
|
var valLength = value.length;//X轴类目项的文字个数
|
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
|
if (rowN > 1)//如果类目项的文字大于maxLength,
|
|
{
|
|
for (var i = 0; i < rowN; i++) {
|
|
var temp = "";//每次截取的字符串
|
|
var start = i * maxLength;//开始截取的位置
|
|
var end = start + maxLength;//结束截取的位置
|
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
|
//temp = value.substring(start, end) + "\n";
|
|
temp = value.substring(start, end) + (i == rowN - 1 ? "" : "\n");
|
|
ret += temp; //凭借最终的字符串
|
|
}
|
|
return ret;
|
|
}
|
|
else {
|
|
return value;
|
|
}
|
|
}
|
|
},
|
|
type: 'category',
|
|
data: xArr,
|
|
boundaryGap: [0, 0.01],
|
|
},
|
|
yAxis: {
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: 'rgba(0,0,0, 0.3)'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: 'rgba(0,0,0, 0.8)'
|
|
}
|
|
},
|
|
},
|
|
series: data,
|
|
grid: {
|
|
top: '20%',
|
|
left: '0%',
|
|
right: '0%',
|
|
bottom: 40,
|
|
containLabel: true,
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|
// borderColor: 'rgba(0,162,233, 1)'
|
|
},
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|
textStyle: {
|
|
color: 'rgba(0,0,0, 0.3)'
|
|
}
|
|
}
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option)
|
|
}
|
|
var natureBar =<%=NatureBar %>;
|
|
var xArr = natureBar.categories;
|
|
var data = [
|
|
{
|
|
name: '承包商',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: natureBar.series[0].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(255,0,0, 0.5)' } }
|
|
},
|
|
{
|
|
name: '项目部',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: natureBar.series[1].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(0,100,0,0.8)' } }
|
|
}
|
|
]
|
|
category_NatureBar('natureBarChart', xArr, data, natureBar.xFontNum);
|
|
</script>
|
|
<script>
|
|
$(".tab .t-item").click(function () {
|
|
var $this = $(this)
|
|
var index = $this.index()
|
|
if ($this.hasClass('active') && index == 0) {
|
|
return
|
|
}
|
|
var $tab = $this.closest(".tab")
|
|
var value = $tab.attr("data-value")
|
|
$tab.find(".t-item").removeClass('active');
|
|
$this.addClass('active')
|
|
|
|
var two =<%=ClassifyBar %>;
|
|
var two2 =<%=ClassifyBarYear %>;
|
|
var natureBar =<%=NatureBar %>;
|
|
var natureBar2 =<%=NatureBarYear %>;
|
|
|
|
var pieQ1 =<%=Q1Pie %>;
|
|
var pieQ1Year =<%=Q1PieYear %>;
|
|
var pieQ2 =<%=Q2Pie %>;
|
|
var pieQ2Year =<%=Q2PieYear %>;
|
|
var pieQ3 =<%=Q3Pie %>;
|
|
var pieQ3Year =<%=Q3PieYear %>;
|
|
var pieQ4 =<%=Q4Pie %>;
|
|
var pieQ4Year =<%=Q4PieYear %>;
|
|
if (value == 2) {
|
|
var xArr = two.categories;
|
|
var xFontNum = two.xFontNum;
|
|
var data = [
|
|
{
|
|
name: '承包商',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: two.series[0].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(255,0,0, 0.5)' } }
|
|
},
|
|
{
|
|
name: '项目部',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: two.series[1].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(0,100,0,0.8)' } }
|
|
}
|
|
];
|
|
if (index == 2) {
|
|
xArr = two2.categories;
|
|
xFontNum = two2.xFontNum;
|
|
data = [
|
|
{
|
|
name: '承包商',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: two2.series[0].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(255,0,0, 0.5)' } }
|
|
},
|
|
{
|
|
name: '项目部',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: two2.series[1].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(0,100,0,0.8)' } }
|
|
}
|
|
]
|
|
}
|
|
category_ClassifyBar('classifyBarChart', xArr, data, xFontNum);
|
|
}
|
|
if (value == 3) {
|
|
var sum = pieQ1.stack;
|
|
var pieData = pieQ1.series[0].pieData;
|
|
var legend = pieQ1.series[0].dataString;
|
|
if (index == 2) {
|
|
sum = pieQ1Year.stack;
|
|
pieData = pieQ1Year.series[0].pieData;
|
|
legend = pieQ1Year.series[0].dataString;
|
|
}
|
|
category_Q1Pie('q1Pie', sum, pieData, legend);
|
|
}
|
|
if (value == 4) {
|
|
var sum = pieQ2.stack;
|
|
var pieData = pieQ2.series[0].pieData;
|
|
var legend = pieQ2.series[0].dataString;
|
|
if (index == 2) {
|
|
sum = pieQ2Year.stack;
|
|
pieData = pieQ2Year.series[0].pieData;
|
|
legend = pieQ2Year.series[0].dataString;
|
|
}
|
|
category_Q2Pie('q2Pie', sum, pieData, legend);
|
|
}
|
|
if (value == 5) {
|
|
var sum = pieQ3.stack;
|
|
var pieData = pieQ3.series[0].pieData;
|
|
var legend = pieQ3.series[0].dataString;
|
|
if (index == 2) {
|
|
sum = pieQ3Year.stack;
|
|
pieData = pieQ3Year.series[0].pieData;
|
|
legend = pieQ3Year.series[0].dataString;
|
|
}
|
|
category_Q3Pie('q3Pie', sum, pieData, legend);
|
|
}
|
|
if (value == 6) {
|
|
var sum = pieQ4.stack;
|
|
var pieData = pieQ4.series[0].pieData;
|
|
var legend = pieQ4.series[0].dataString;
|
|
if (index == 2) {
|
|
sum = pieQ4Year.stack;
|
|
pieData = pieQ4Year.series[0].pieData;
|
|
legend = pieQ4Year.series[0].dataString;
|
|
}
|
|
category_Q4Pie('q4Pie', sum, pieData, legend);
|
|
}
|
|
if (value == 7) {
|
|
var xArr = natureBar.categories;
|
|
var xFontNum = natureBar.xFontNum;
|
|
var data = [
|
|
{
|
|
name: '承包商',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: natureBar.series[0].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(255,0,0, 0.5)' } }
|
|
},
|
|
{
|
|
name: '项目部',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: natureBar.series[1].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(0,100,0,0.8)' } }
|
|
}
|
|
];
|
|
if (index == 2) {
|
|
xArr = natureBar2.categories;
|
|
xFontNum = natureBar2.xFontNum;
|
|
data = [
|
|
{
|
|
name: '承包商',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: natureBar2.series[0].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(255,0,0, 0.5)' } }
|
|
},
|
|
{
|
|
name: '项目部',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 40,
|
|
data: natureBar2.series[1].data,
|
|
label: { //柱体上显示数值
|
|
show: true,//开启显示
|
|
position: ['35%', '50%'],//在上方显示
|
|
textStyle: {//数值样式
|
|
fontSize: '20px',
|
|
color: '#363636'
|
|
},
|
|
formatter: function (params) {
|
|
// 当数值为0时返回空字符串，不显示标签
|
|
return params.value === 0 ? '' : params.value;
|
|
},
|
|
},
|
|
itemStyle: { normal: { color: 'rgba(0,100,0,0.8)' } }
|
|
}
|
|
]
|
|
}
|
|
category_NatureBar('natureBarChart', xArr, data, xFontNum);
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html>
|
|
|