141 lines
5.6 KiB
Plaintext
141 lines
5.6 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JointQueryChart.aspx.cs" Inherits="FineUIPro.Web.HJGL.InfoQuery.JointQueryChart" %>
|
||
|
|
|
||
|
|
<!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: 80%; height: 80%;"></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: <%=JointComplete %>, n: <%=JointNoComplete %> })
|
||
|
|
} else if (type == '2') {
|
||
|
|
initEchart02({ canvasId: 'echarts02', y: <%=JointPre %>, n: <%=JointNoPre %> })
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
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: <%=JointComplete %>, n: <%=JointNoComplete %> })
|
||
|
|
// 03的数值
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|