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> |