246 lines
9.5 KiB
Plaintext
246 lines
9.5 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SystemstatusChart.aspx.cs" Inherits="FineUIPro.Web.Transfer.Chart.SystemstatusChart" %>
|
|||
|
|
|
|||
|
|
<%@ Register Src="~/Controls/ChartControl.ascx" TagName="ChartControl" TagPrefix="uc1" %>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head runat="server">
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|||
|
|
<title>移交统计图表</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<form id="form1" runat="server">
|
|||
|
|
<f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="RegionPanel1" AjaxAspnetControls="divAccidentUnit,divAccidentTime" />
|
|||
|
|
<f:Panel ID="Panel3" CssClass="blockpanel" runat="server" EnableCollapse="false"
|
|||
|
|
BodyPadding="10px" ShowBorder="true" ShowHeader="false" Hidden="true">
|
|||
|
|
<Items>
|
|||
|
|
<f:Form ID="Form2" ShowHeader="false" ShowBorder="false" runat="server" >
|
|||
|
|
<Rows>
|
|||
|
|
<f:FormRow ColumnWidths="25% 30% 35% 10%">
|
|||
|
|
<Items>
|
|||
|
|
<f:DropDownList ID="ddlSystemNo" runat="server" Label="System No" AutoPostBack="true" EnableEdit="true"
|
|||
|
|
OnSelectedIndexChanged="ddlSystemNo_SelectedIndexChanged" Width="300px" LabelWidth="100px">
|
|||
|
|
</f:DropDownList>
|
|||
|
|
|
|||
|
|
<%-- <f:Button ID="BtnAnalyse" Text="统计" Icon="ChartPie" runat="server" OnClick="BtnAnalyse_Click">
|
|||
|
|
</f:Button>--%>
|
|||
|
|
</Items>
|
|||
|
|
</f:FormRow>
|
|||
|
|
</Rows>
|
|||
|
|
</f:Form>
|
|||
|
|
</Items>
|
|||
|
|
</f:Panel>
|
|||
|
|
<div id='two' style="width: 100%; height: 500px;"></div>
|
|||
|
|
<%-- <f:Panel ID="Panel4" CssClass="blockpanel" runat="server" EnableCollapse="false"
|
|||
|
|
BodyPadding="10px" ShowBorder="true" ShowHeader="false" Hidden="true">
|
|||
|
|
|
|||
|
|
<Items>
|
|||
|
|
<f:TabStrip ID="TabStrip1" CssClass="f-tabstrip-theme-simple" Height="600px" ShowBorder="true"
|
|||
|
|
TabPosition="Top" MarginBottom="5px" EnableTabCloseMenu="false" runat="server">
|
|||
|
|
<Tabs>
|
|||
|
|
<f:Tab ID="Tab2" Title="图形" BodyPadding="5px" Layout="Fit" IconFont="Bookmark" runat="server"
|
|||
|
|
TitleToolTip="图形">
|
|||
|
|
<Items>
|
|||
|
|
<f:ContentPanel ShowHeader="false" runat="server" ID="cpAccidentTime" Margin="0 0 0 0" Hidden="true">
|
|||
|
|
<div id="divAccidentTime">
|
|||
|
|
<uc1:ChartControl ID="ChartAccidentTime" runat="server" />
|
|||
|
|
</div>
|
|||
|
|
</f:ContentPanel>
|
|||
|
|
|
|||
|
|
</Items>
|
|||
|
|
</f:Tab>
|
|||
|
|
</Tabs>
|
|||
|
|
</f:TabStrip>
|
|||
|
|
</Items>
|
|||
|
|
</f:Panel>--%>
|
|||
|
|
</form>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
<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_Two(id, xArr, data, num) {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById(id))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
// left:'center',
|
|||
|
|
text: '移交统计图表',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#000',
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
fontSize: 12
|
|||
|
|
},
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
legend: {
|
|||
|
|
left: '15%',
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {//图例文字的样式
|
|||
|
|
color: '#000',
|
|||
|
|
fontSize: 10,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#000',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
margin: 20,
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#000'
|
|||
|
|
},
|
|||
|
|
interval: 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: '#000'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#000'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
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(255, 255, 255, 0.3)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
option.dataZoom = [//给x轴设置滚动条
|
|||
|
|
{
|
|||
|
|
|
|||
|
|
start: 0,//默认为0
|
|||
|
|
type: 'slider',
|
|||
|
|
show: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 9,
|
|||
|
|
height: 6,
|
|||
|
|
bottom: '6%',
|
|||
|
|
zoomLock: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
brushSelect: true,
|
|||
|
|
showDetail: false,
|
|||
|
|
borderColor: "rgba(43,48,67,0.8)",
|
|||
|
|
fillerColor: '#269cdb',//滑动块的颜色
|
|||
|
|
backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
|
|||
|
|
|
|||
|
|
}]
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
var xArr = [<%=AllSystemNo%>]
|
|||
|
|
//var xArr = two2.categories
|
|||
|
|
var data = [
|
|||
|
|
{
|
|||
|
|
name: '完成数量',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '总量',
|
|||
|
|
barWidth: 40,
|
|||
|
|
data: [<%=completed%>],
|
|||
|
|
//data: two2.series[0].data,
|
|||
|
|
label: { //柱体上显示数值
|
|||
|
|
show: true,//开启显示
|
|||
|
|
position: ['40%', '50%'],//在上方显示
|
|||
|
|
textStyle: {//数值样式
|
|||
|
|
fontSize: '20px',
|
|||
|
|
color: '#000'
|
|||
|
|
},
|
|||
|
|
formatter: '{c}',
|
|||
|
|
},
|
|||
|
|
itemStyle: { normal: { color: '#84CF75' } }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '进行中数量',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '总量',
|
|||
|
|
barWidth: 40,
|
|||
|
|
data: [<%=Inprogress%>],
|
|||
|
|
//data: two2.series[1].data,
|
|||
|
|
label: { //柱体上显示数值
|
|||
|
|
show: true,//开启显示
|
|||
|
|
position: ['40%', '50%'],//在上方显示
|
|||
|
|
textStyle: {//数值样式
|
|||
|
|
fontSize: '20px',
|
|||
|
|
color: '#000'
|
|||
|
|
},
|
|||
|
|
formatter: '{c}',
|
|||
|
|
},
|
|||
|
|
itemStyle: { normal: { color: '#3282F6' } }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '未完成数量',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '总量',
|
|||
|
|
barWidth: 40,
|
|||
|
|
data: [<%=NotStart%>],
|
|||
|
|
//data: two2.series[1].data,
|
|||
|
|
label: { //柱体上显示数值
|
|||
|
|
show: true,//开启显示
|
|||
|
|
position: ['40%', '50%'],//在上方显示
|
|||
|
|
textStyle: {//数值样式
|
|||
|
|
fontSize: '20px',
|
|||
|
|
color: '#000'
|
|||
|
|
},
|
|||
|
|
formatter: '{c}',
|
|||
|
|
},
|
|||
|
|
itemStyle: { normal: { color: '#EB3324' } }
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
category_Two('two', xArr, data, 20)
|
|||
|
|
</script>
|