1098 lines
37 KiB
Plaintext
1098 lines
37 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_PGJSX.aspx.cs" Inherits="FineUIPro.Web.mainMenu_PGJSX" %>
|
||
|
||
<!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" style="margin-bottom: 5px;">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="bw-item-content">
|
||
<div id='one' style="width: 100%; height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item flex2 iteml">
|
||
<div class="bw-b-bottom">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="bw-item-content">
|
||
<div id='two' 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="bw-item-content">
|
||
<div id='five' 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="bw-item-content">
|
||
<div id='four' 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="3">
|
||
<div class="t-item active">不足一周</div>
|
||
<div class="spline"></div>
|
||
<div class="t-item">一周</div>
|
||
<div class="spline"></div>
|
||
<div class="t-item">两周</div>
|
||
<div class="spline"></div>
|
||
<div class="t-item">三周</div>
|
||
<div class="spline"></div>
|
||
<div class="t-item">一个月</div>
|
||
</div>
|
||
</div>
|
||
<div class="bw-item-content">
|
||
<div id='three' 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="bw-item-content">
|
||
<div id="myDiv" runat="server" 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_one(id, data, data2) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: [{
|
||
text: '关键事项关闭率',
|
||
//top: '0',
|
||
//left: '10%',
|
||
textStyle: {
|
||
color: '#1C1C1C',
|
||
fontSize: 16,
|
||
fontWeight: 700
|
||
},
|
||
show: true
|
||
}],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
left: '66%',
|
||
show: true,
|
||
//orient: 'vertical',
|
||
//right: 10,
|
||
//top: 'center',
|
||
|
||
data: ['已关闭', '未关闭'],
|
||
textStyle: {//图例文字的样式
|
||
color: '#363636',
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
graphic: {
|
||
type: "text",
|
||
left: "45%",
|
||
top: "54%",
|
||
style: {
|
||
text: data2,
|
||
textAlign: "center",
|
||
fill: "#1C1C1C",
|
||
fontSize: 18,
|
||
fontWeight: 600
|
||
}
|
||
},
|
||
color: ['#006400', '#FF0000'],
|
||
series: [
|
||
{
|
||
name: '关键事项',
|
||
type: 'pie',
|
||
center: ['50%', '55%'],
|
||
radius: ['40%', '78%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
fontSize: 16,
|
||
fontWeight: 600,
|
||
position: 'inside',
|
||
formatter: function (data) { return data.value; }
|
||
//formatter: function (data) { return data.percent.toFixed(2); }
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: data[0], name: '已关闭' },
|
||
{ value: data[1], name: '未关闭' }
|
||
],
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 3,
|
||
borderColor: 'rgba(218,235,234, 1)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
var one =<%=One %>;
|
||
var data = one.series[0].data
|
||
var data2 = data[0] + data[1];
|
||
var data3 = data[2] + '%';
|
||
category_one('one', data, data3)
|
||
</script>
|
||
<script type="text/javascript">
|
||
function category_Two(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: '80%',
|
||
show: true,
|
||
textStyle: {//图例文字的样式
|
||
color: '#363636',
|
||
fontSize: 12,
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
// start: 0,
|
||
// end: 60
|
||
maxValueSpan: 6,
|
||
show: true,
|
||
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: -15,
|
||
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 two2 =<%=Two %>;
|
||
var xArr = two2.categories
|
||
var 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_Two('two', xArr, data, two2.xFontNum)
|
||
</script>
|
||
<script type="text/javascript">
|
||
function category_Five(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: '60%',
|
||
show: true,
|
||
textStyle: {//图例文字的样式
|
||
color: '#363636',
|
||
fontSize: 12,
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
// start: 0,
|
||
// end: 60
|
||
maxValueSpan: 6,
|
||
show: true,
|
||
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: -15,
|
||
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: '0%',
|
||
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 five =<%=Five %>;
|
||
var xArr = five.categories
|
||
var data = [
|
||
{
|
||
name: '未关闭',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth: 40,
|
||
data: five.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(178 ,34,34, 0.8)' } }
|
||
},
|
||
{
|
||
name: '已关闭',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth: 40,
|
||
data: five.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.5)' } }
|
||
}
|
||
]
|
||
category_Five('five', xArr, data, five.xFontNum)
|
||
</script>
|
||
<script type="text/javascript">
|
||
function category_Three(id, xArr, series) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
// left:'center',
|
||
text: '',
|
||
textStyle: {
|
||
color: '#1C1C1C',
|
||
fontSize: 16,
|
||
fontWeight: 700
|
||
},
|
||
show: false
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
left: '3%',
|
||
show: true,
|
||
selectedMode: false,
|
||
textStyle: {//图例文字的样式
|
||
color: '#1C1C1C',
|
||
fontSize: 16,
|
||
fontWeight: 700
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
// start: 0,
|
||
// end: 60
|
||
maxValueSpan: 6,
|
||
show: true,
|
||
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: -15,
|
||
formatter: function (value) {
|
||
var ret = "";//拼接加\n返回的类目项
|
||
var maxLength = 5;//每项显示文字个数
|
||
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
|
||
},
|
||
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: series,
|
||
grid: {
|
||
top: '15%',
|
||
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 three =<%=Three %>;
|
||
var xArr = three.categories
|
||
var series = [{
|
||
name: '关键事项超期天数统计（累计）',
|
||
type: 'bar',
|
||
barWidth: 30,
|
||
barGap: 0,
|
||
data: three.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(30,144,255,0.8)' } }
|
||
}];
|
||
category_Three('three', xArr, series)
|
||
</script>
|
||
<script type="text/javascript">
|
||
function category_Four(id, xArr, series) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
// left:'center',
|
||
text: '关键事项平均超期天数统计（单位：天）',
|
||
textStyle: {
|
||
color: '#1C1C1C',
|
||
fontSize: 16,
|
||
fontWeight: 700
|
||
},
|
||
show: false
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
data: ['关键事项平均超期天数统计（单位：天）'],
|
||
left: '3%',
|
||
show: true,
|
||
selectedMode: true,
|
||
textStyle: {//图例文字的样式
|
||
//color: '#1C1C1C',
|
||
fontSize: 16,
|
||
fontWeight: 700
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
// start: 0,
|
||
// end: 60
|
||
maxValueSpan: 6,
|
||
show: true,
|
||
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: -15,
|
||
formatter: function (value) {
|
||
var ret = "";//拼接加\n返回的类目项
|
||
var maxLength = 5;//每项显示文字个数
|
||
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
|
||
},
|
||
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: series,
|
||
grid: {
|
||
top: '15%',
|
||
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 four =<%=Four %>;
|
||
var xArr = four.categories;
|
||
var series = [{
|
||
name: '关键事项平均超期天数统计（单位：天）',
|
||
type: 'bar',
|
||
barWidth: 30,
|
||
barGap: 0,
|
||
data: four.series[0].data,
|
||
markLine: {
|
||
data: [
|
||
{
|
||
name: '全平台平均超期时间',
|
||
yAxis: four.series[2].data[0],
|
||
label: { show: true, position: "middle" },
|
||
lineStyle: {
|
||
type: "dashed",
|
||
width: 2,
|
||
color: "#3c78d8"
|
||
}
|
||
},
|
||
{
|
||
name: '本项目平均超期时间',
|
||
yAxis: four.series[1].data[0],
|
||
label: { show: true, position: "middle" },
|
||
lineStyle: {
|
||
type: "dashed",
|
||
width: 2,
|
||
color: "#FF0000"
|
||
}
|
||
}
|
||
],
|
||
symbol: ['none', 'none']//标记线箭头
|
||
},
|
||
label: { //柱体上显示数值
|
||
show: true,//开启显示
|
||
position: ['35%', '50%'],//在上方显示
|
||
textStyle: {//数值样式
|
||
fontSize: '20px',
|
||
color: '#363636'
|
||
},
|
||
formatter: function (params) {
|
||
// 当数值为0时返回空字符串，不显示标签
|
||
return params.value === 0 ? '' : params.value;
|
||
},
|
||
//emphasis: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// formatter: '{c}'
|
||
//},
|
||
//z: 100
|
||
},
|
||
itemStyle: { normal: { color: 'rgba(255,140,0,0.8)' } }
|
||
//itemStyle: { normal: { color: '#FFA500' } }
|
||
}];
|
||
category_Four('four', xArr, series)
|
||
</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 =<%=Two %>;
|
||
var three =<%=Three %>;
|
||
var three2 =<%=Three2 %>;
|
||
var three3 =<%=Three3 %>;
|
||
var three4 =<%=Three4 %>;
|
||
var three5 =<%=Three5 %>;
|
||
var num = 5;
|
||
|
||
if (value == 3) {
|
||
var xArr = three.categories
|
||
var series = [{
|
||
name: '关键事项超期统计——不足一周',
|
||
type: 'bar',
|
||
data: three.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(30,144,255,0.8)' } }
|
||
}];
|
||
if (index == 2) {
|
||
xArr = three2.categories
|
||
series = [{
|
||
name: '关键事项超期统计——超期一周',
|
||
type: 'bar',
|
||
data: three2.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(30,144,255,0.8)' } }
|
||
}];
|
||
}
|
||
if (index == 4) {
|
||
xArr = three3.categories
|
||
series = [{
|
||
name: '关键事项超期统计——超期两周',
|
||
type: 'bar',
|
||
data: three3.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(30,144,255,0.8)' } }
|
||
}];
|
||
}
|
||
if (index == 6) {
|
||
xArr = three4.categories
|
||
series = [{
|
||
name: '关键事项超期统计——超期三周',
|
||
type: 'bar',
|
||
data: three4.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(30,144,255,0.8)' } }
|
||
}];
|
||
}
|
||
if (index == 8) {
|
||
xArr = three5.categories
|
||
series = [{
|
||
name: '关键事项超期统计——超期一个月',
|
||
type: 'bar',
|
||
data: three5.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(30,144,255,0.8)' } }
|
||
}];
|
||
}
|
||
category_Three('three', xArr, series)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
</html>
|
||
|