141 lines
5.7 KiB
Plaintext
141 lines
5.7 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PipelingDivideChart.aspx.cs" Inherits="FineUIPro.Web.HJGL.PreDesign.PipelingDivideChart" %>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head id="Head1" runat="server">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>完成百分比</title>
|
|
<link href="../../res/HJGL/InfoQuery/css/Chart.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<div class="sd-sub-body sd-sub-body--welding dis-flex">
|
|
<div class="sub-sections">
|
|
<div class="sub-section sub-section-02">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">百分比</span>
|
|
<div class="sub-right-select">
|
|
<div class="sub-select-name">
|
|
<span class="sub-select-value">工厂预制百分比</span><span class="dropdown-arrow"></span>
|
|
</div>
|
|
<ul class="sub-select-ul">
|
|
<li class="sub-select-li active" data-type="1">工厂预制百分比</li>
|
|
<%-- <li class="sub-select-li" data-type="2">焊口预制百分比</li>--%>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts02" class="echarts-box" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="../../res/indexv1/assets/js/jquery-2.1.1.min.js" type="text/javascript"></script>
|
|
<script src="../../res/indexv1/assets/js/echarts-5.2.0.min.js" type="text/javascript"></script>
|
|
<script src="../../res/indexv1/assets/js/draw-circle.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$('.sub-section-02 ul li').click(function () {
|
|
var value = $(this).text()
|
|
var type = $(this).attr('data-type')
|
|
$(this).parent('ul').siblings('.sub-select-name').find('.sub-select-value').text(value)
|
|
if (type == '1') {
|
|
initEchart02({ canvasId: 'echarts02', y: <%=PipelineComplete %>, n: <%=PipelineNOComplete %> })
|
|
} else if (type == '2') {
|
|
initEchart02({ canvasId: 'echarts02', y: <%=HK1 %>, n: <%=HK2 %> })
|
|
}
|
|
})
|
|
|
|
function initEchart02(options) {
|
|
var chartDom = document.getElementById(options.canvasId);
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
var data = [
|
|
{
|
|
name: '现场施工', value: options.n, label: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 10,
|
|
color: '#f24166',
|
|
align: 'center',
|
|
},
|
|
percent: {
|
|
fontSize: 10,
|
|
color: '#f24166',
|
|
align: 'center',
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '工厂预制', value: options.y, label: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 10,
|
|
color: '#15edbb',
|
|
align: 'center',
|
|
},
|
|
percent: {
|
|
fontSize: 10,
|
|
color: '#15edbb',
|
|
align: 'center',
|
|
}
|
|
}
|
|
}
|
|
},
|
|
];
|
|
|
|
option = {
|
|
color: ['#f24166', '#15edbb'],
|
|
grid: {
|
|
top: '10%',
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '2%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b} : {d}%'
|
|
},
|
|
series: [{
|
|
name: '质量控制点统计',
|
|
type: 'pie',
|
|
radius: ['45%', '70%'],
|
|
top: '5%',
|
|
left: 'center',
|
|
width: '95%',
|
|
height: '95%',
|
|
label: {
|
|
alignTo: 'edge',
|
|
formatter: '{name|{b}}\n{percent|{d}%}',
|
|
minMargin: 5,
|
|
edgeDistance: 10,
|
|
lineHeight: 15,
|
|
},
|
|
labelLine: {
|
|
length: 10,
|
|
length2: 0,
|
|
maxSurfaceAngle: 80
|
|
},
|
|
data: data
|
|
}]
|
|
};
|
|
myChart.clear();//清空
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
|
|
|
|
initEchart02({ canvasId: 'echarts02', y: <%=PipelineComplete %>, n: <%=PipelineNOComplete %> })
|
|
// 03的数值
|
|
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|