224 lines
8.5 KiB
Plaintext
224 lines
8.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: 95%; height: 600px;"></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">
|
|
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)
|
|
|
|
category_SystemChart('two', xArr, data, 20);
|
|
|
|
function category_SystemChart(id, xArr, data, num){
|
|
var myChart = echarts.init(document.getElementById(id))
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
// Use axis to trigger tooltip
|
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
}
|
|
},
|
|
legend: {},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value'
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: xArr
|
|
},
|
|
series: [
|
|
{
|
|
name: '完成数量',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [<%=completed%>],
|
|
itemStyle: { normal: { color: '#84CF75' } }
|
|
},
|
|
{
|
|
name: '进行中数量',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [<%=Inprogress%>],
|
|
itemStyle: { normal: { color: '#3282F6' } }
|
|
},
|
|
{
|
|
name: '未完成数量',
|
|
type: 'bar',
|
|
stack: '总量',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [<%=NotStart%>],
|
|
itemStyle: { normal: { color: '#EB3324' } }
|
|
}
|
|
],
|
|
};
|
|
option.dataZoom = [{
|
|
type: "inside",
|
|
startValue: 0,
|
|
endValue: 10,
|
|
minValueSpan: 10,
|
|
maxValueSpan: 10,
|
|
yAxisIndex: [0],
|
|
zoomOnMouseWheel: false, // 关闭滚轮缩放
|
|
moveOnMouseWheel: true, // 开启滚轮平移
|
|
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
|
|
},
|
|
{
|
|
type: 'slider',
|
|
realtime: true,
|
|
startValue: 0,
|
|
endValue: 10000,
|
|
width: '8',
|
|
yAxisIndex: [0], // 控制y轴滚动
|
|
fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
|
|
borderColor: "rgba(17, 100, 210, 0.12)",
|
|
backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色
|
|
handleSize: 0, // 两边手柄尺寸
|
|
showDataShadow: false,//是否显示数据阴影 默认auto
|
|
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
|
top: 'middle',
|
|
// 滚动条显示位置
|
|
height: "80%",
|
|
// 距离右边
|
|
right: 3,
|
|
}]
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
</script> |