205 lines
4.6 KiB
HTML
205 lines
4.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>评价报告查询</title>
|
|||
|
|
|
|||
|
|
<script src="js/layui-v2.5.4/layui/layui.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" type="text/css" href="./js/layui-v2.5.4/layui/css/layui.css" />
|
|||
|
|
<style type="text/css">
|
|||
|
|
.cont_daping_right {
|
|||
|
|
width: 600px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding-top: 10px;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin-top: 50px;
|
|||
|
|
margin-left: -40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.daping_box_bottom_con {
|
|||
|
|
width: 28%;
|
|||
|
|
left: 50%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
padding-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.daping_box_bottom {
|
|||
|
|
width: 500px;
|
|||
|
|
margin: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-btn-primary {
|
|||
|
|
border: 1px solid #C9C9C9;
|
|||
|
|
background-color: #01b9dd !important;
|
|||
|
|
color: white !important;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="daping_box_bottom clear_box">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="cont_daping_right">
|
|||
|
|
<div id="main2" style="width: 600px;height:350px;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<table id="demo" class="layui-hide" lay-filter="xk"></table>
|
|||
|
|
</table>
|
|||
|
|
<script src="js/layui-v2.5.6/layui/layui.all.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
//基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart3 = echarts.init(document.getElementById('main2'));
|
|||
|
|
|
|||
|
|
|
|||
|
|
option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
left: 10,
|
|||
|
|
data: ['严重', '无', '一般', '合格', '基本合格', '不合格']
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: '危害程度',
|
|||
|
|
type: 'pie',
|
|||
|
|
selectedMode: 'single',
|
|||
|
|
radius: [0, '30%'],
|
|||
|
|
|
|||
|
|
label: {
|
|||
|
|
position: 'inner'
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [{
|
|||
|
|
value: 3,
|
|||
|
|
name: '严重',
|
|||
|
|
selected: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 2,
|
|||
|
|
name: '无'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 5,
|
|||
|
|
name: '一般'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '评价结果',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['40%', '55%'],
|
|||
|
|
label: {
|
|||
|
|
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
|
|||
|
|
backgroundColor: '#eee',
|
|||
|
|
borderColor: '#aaa',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderRadius: 4,
|
|||
|
|
// shadowBlur:3,
|
|||
|
|
// shadowOffsetX: 2,
|
|||
|
|
// shadowOffsetY: 2,
|
|||
|
|
// shadowColor: '#999',
|
|||
|
|
// padding: [0, 7],
|
|||
|
|
rich: {
|
|||
|
|
a: {
|
|||
|
|
color: '#999',
|
|||
|
|
lineHeight: 22,
|
|||
|
|
align: 'center'
|
|||
|
|
},
|
|||
|
|
// abg: {
|
|||
|
|
// backgroundColor: '#333',
|
|||
|
|
// width: '100%',
|
|||
|
|
// align: 'right',
|
|||
|
|
// height: 22,
|
|||
|
|
// borderRadius: [4, 4, 0, 0]
|
|||
|
|
// },
|
|||
|
|
hr: {
|
|||
|
|
borderColor: '#aaa',
|
|||
|
|
width: '100%',
|
|||
|
|
borderWidth: 0.5,
|
|||
|
|
height: 0
|
|||
|
|
},
|
|||
|
|
b: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
lineHeight: 33
|
|||
|
|
},
|
|||
|
|
per: {
|
|||
|
|
color: '#eee',
|
|||
|
|
backgroundColor: '#334455',
|
|||
|
|
padding: [2, 4],
|
|||
|
|
borderRadius: 2
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [{
|
|||
|
|
value: 20,
|
|||
|
|
name: '合格'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 10,
|
|||
|
|
name: '基本合格'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 2,
|
|||
|
|
name: '不合格'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
myChart3.setOption(option);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
layui.use('table', function() {
|
|||
|
|
var table = layui.table;
|
|||
|
|
table.render({
|
|||
|
|
elem: '#demo',
|
|||
|
|
data: [{
|
|||
|
|
"yz": "3",
|
|||
|
|
"yb": "5",
|
|||
|
|
"w": "2"
|
|||
|
|
}] //数据接口
|
|||
|
|
,
|
|||
|
|
cellMinWidth: 80 //全局定义常规单元格的最小宽度
|
|||
|
|
,
|
|||
|
|
cols: [
|
|||
|
|
[ //表头
|
|||
|
|
{
|
|||
|
|
field: 'yz',
|
|||
|
|
title: '严重'
|
|||
|
|
}, {
|
|||
|
|
field: 'yb',
|
|||
|
|
title: '一般'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'w',
|
|||
|
|
title: '无'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|