232 lines
10 KiB
Plaintext
232 lines
10 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RiskAnalysisChart.aspx.cs"
|
||
Inherits="FineUIPro.Web.HSSE.HiddenInspection.RiskAnalysisChart" %>
|
||
|
||
<%@ Register Src="~/Controls/ChartControl.ascx" TagName="ChartControl" TagPrefix="uc1" %>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head runat="server">
|
||
<title><asp:Literal runat="server" Text="<%$ Resources:Lan,RiskAnalysisChart_PageTitle%>"/></title>
|
||
<link href="../../res/css/common.css" rel="stylesheet" type="text/css" />
|
||
<script type="text/javascript" src="../../res/index/js/echarts.min.js"></script>
|
||
<script type="text/javascript" src="../../res/index/js/jquery-3.4.1.min.js"></script>
|
||
</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">
|
||
<Items>
|
||
<f:Form ID="Form2" ShowHeader="false" ShowBorder="false" runat="server">
|
||
<Rows>
|
||
<f:FormRow ColumnWidths="15% 15% 15% 2% 15% 30% 15% 10%">
|
||
<Items>
|
||
<f:DropDownList runat="server" Label="<%$ Resources:Lan,RiskAnalysisChart_drpUnit_Label%>" ID="drpUnit" LabelWidth="80px" Width="150px"><asp:Literal runat="server" Text="<%$ Resources:Lan,PersonInfoEdit_txtWorkArea_Label%>"/></f:DropDownList>
|
||
|
||
<f:DropDownList runat="server" Label="<%$ Resources:Lan,RiskAnalysisChart_drpRegisterTypes_Label%>" ID="drpRegisterTypes" LabelWidth="80px" Width="150px"><asp:Literal runat="server" Text="<%$ Resources:Lan,PersonInfoEdit_txtWorkArea_Label%>"/></f:DropDownList>
|
||
|
||
<f:DatePicker ID="txtStartRectificationTime" runat="server" Label="<%$ Resources:Lan,RiskAnalysisChart_txtStartRectificationTime_Label%>" LabelAlign="Right" Width="100px"
|
||
LabelWidth="80px">
|
||
</f:DatePicker>
|
||
<f:Label ID="Label3" runat="server" Text="<%$ Resources:Lan,PersonInfo_txtEndDate_Label%>" Width="5px">
|
||
</f:Label>
|
||
<f:DatePicker ID="txtEndRectificationTime" runat="server" Width="100px">
|
||
</f:DatePicker>
|
||
|
||
<f:RadioButtonList ID="rblState" runat="server" Label="<%$ Resources:Lan,RiskAnalysisChart_rblState_Label%>" LabelWidth="80px" Width="250px"
|
||
AutoPostBack="true" OnSelectedIndexChanged="drpChartType_SelectedIndexChanged">
|
||
<f:RadioItem Value="0" Selected="true" Text="<%$ Resources:Lan,RiskAnalysisChart_rblState_RadioItem_0%>" />
|
||
<f:RadioItem Value="2" Text="<%$ Resources:Lan,RiskAnalysisChart_rblState_RadioItem_2%>" />
|
||
<f:RadioItem Value="1" Text="<%$ Resources:Lan,RiskAnalysisChart_rblState_RadioItem_1%>" />
|
||
|
||
</f:RadioButtonList>
|
||
<f:Button ID="BtnAnalyse" Text="<%$ Resources:Lan,CheckAnalysis_BtnAnalyse_Text%>" Icon="ChartPie" runat="server" OnClick="BtnAnalyse_Click">
|
||
</f:Button>
|
||
</Items>
|
||
</f:FormRow>
|
||
|
||
</Rows>
|
||
</f:Form>
|
||
</Items>
|
||
</f:Panel>
|
||
<f:Panel ID="Panel4" CssClass="blockpanel" runat="server" EnableCollapse="false" MarginTop="10px"
|
||
BodyPadding="10px" ShowBorder="true" ShowHeader="false">
|
||
<Items>
|
||
<f:TabStrip ID="TabStrip1" CssClass="f-tabstrip-theme-simple" Height="700px" ShowBorder="true"
|
||
TabPosition="Top" MarginBottom="5px" EnableTabCloseMenu="false" runat="server">
|
||
<Tabs>
|
||
<f:Tab ID="Tab2" Title="<%$ Resources:Lan,RiskAnalysisChart_TabStrip1_Tab2_Title%>" BodyPadding="5px" Layout="Fit" IconFont="Bookmark" runat="server"
|
||
TitleToolTip="<%$ Resources:Lan,RiskAnalysisChart_TabStrip1_Tab1_TitleToolTip%>">
|
||
<Items>
|
||
<f:Panel ID="Panel2" IsFluid="true" runat="server" Height="350px" ShowBorder="true" EnableCollapse="false"
|
||
Layout="HBox" ShowHeader="false" >
|
||
<Items>
|
||
<f:ContentPanel ShowHeader="false" runat="server" ID="cpAccidentTime" Margin="0 0 0 0" BoxFlex="2" >
|
||
|
||
<div id="divAccidentTime" style=" height: 700px; ">
|
||
|
||
</div>
|
||
</f:ContentPanel>
|
||
|
||
</Items>
|
||
</f:Panel>
|
||
</Items>
|
||
|
||
</f:Tab>
|
||
|
||
<f:Tab ID="Tab1" Title="<%$ Resources:Lan,RiskAnalysisChart_TabStrip1_Tab1_Title%>" BodyPadding="5px" Layout="Fit" IconFont="Bookmark" runat="server"
|
||
TitleToolTip="<%$ Resources:Lan,RiskAnalysisChart_TabStrip1_Tab1_TitleToolTip%>">
|
||
<Items>
|
||
<f:Panel ID="Panel1" IsFluid="true" runat="server" Height="350px" ShowBorder="true" EnableCollapse="false"
|
||
Layout="HBox" ShowHeader="false" >
|
||
<Items>
|
||
|
||
<f:ContentPanel ShowHeader="false" runat="server" ID="ContentPanel3" Margin="0 0 0 0 " BoxFlex="1" >
|
||
|
||
<div id="divPie" style="height: 700px;width:1000px;" >
|
||
|
||
</div>
|
||
|
||
</f:ContentPanel>
|
||
</Items>
|
||
</f:Panel>
|
||
</Items>
|
||
|
||
</f:Tab>
|
||
</Tabs>
|
||
</f:TabStrip>
|
||
</Items>
|
||
</f:Panel>
|
||
</form>
|
||
</body>
|
||
<script language="javascript">
|
||
|
||
function rendChart(legend, xAxis, series) {
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: legend
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
axisLabel: { interval: 0 },
|
||
type: 'category',
|
||
data: xAxis
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: series
|
||
};
|
||
|
||
//if (xAxis.length > 5) {
|
||
// option.dataZoom = [{
|
||
// type: 'slider',
|
||
// show: true,
|
||
// startValue: 0,
|
||
// endValue: 4,
|
||
// height: '10',
|
||
// backgroundColor: '#aed0ea',
|
||
// fillerColor: '#107f8b',
|
||
// bottom: '10%',
|
||
// zoomLock: true,
|
||
// moveOnMouseWheel: true,
|
||
// brushSelect: true,
|
||
// showDetail: false,
|
||
// }]
|
||
//}
|
||
|
||
var myChart = echarts.init(document.getElementById("divAccidentTime"));
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
|
||
|
||
function pie( title, xArr, data) {
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChartpie = echarts.init(document.getElementById("divPie"))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: [{
|
||
text: title,
|
||
bottom: '0',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
fontWeight: 300
|
||
}
|
||
}],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d})'
|
||
},
|
||
legend: {
|
||
show: true,
|
||
|
||
left: 'top',
|
||
top: 'top',
|
||
align: 'left',
|
||
data: xArr,
|
||
|
||
},
|
||
color: ['#1D9A78', '#8BC145', '#36AFCE', '#1D6FA9'],
|
||
series: [
|
||
{
|
||
name: title,
|
||
type: 'pie',
|
||
center: ['50%', '50%'],
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#333'
|
||
},
|
||
position: 'inside',
|
||
formatter: function (data) { return data.percent.toFixed(0) + ""; }
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: data,
|
||
itemStyle: {
|
||
normal: {
|
||
//opacity: 0.7,
|
||
borderWidth: 3,
|
||
borderColor: 'rgba(218,235,234, 1)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChartpie.setOption(option)
|
||
}
|
||
|
||
$(document).ready(function () {
|
||
setTimeout(function () {
|
||
$("#divPie").width ( $("#divAccidentTime").width());
|
||
pie('', <%=xPieAxis%>, <%=seriesPie%>);
|
||
rendChart(<%=legend%>,<%=xAxis%>,<%=series%>);
|
||
|
||
}, 1000);
|
||
});
|
||
</script>
|
||
</html>
|