203 lines
4.5 KiB
HTML
203 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>区间查询</title>
|
|
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="js/layui-v2.5.4/layui/layui.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">
|
|
.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="daping_box_bottom_con">
|
|
<div id="main4" style="width: 500px;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">
|
|
var myChart5 = echarts.init(document.getElementById('main4'));
|
|
var option5 = {
|
|
|
|
tooltip: {},
|
|
color: ['#4F9AFF', '#ff0000'],
|
|
title: {
|
|
text: '审批状态',
|
|
// subtext: 7789,
|
|
|
|
textStyle: {
|
|
color: '#000000',
|
|
fontSize: 20,
|
|
top: '10px'
|
|
// align: 'center'
|
|
},
|
|
//x: 'center',
|
|
//y: 'center'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'right',
|
|
top: '40%',
|
|
data: ['合格', '不合格'],
|
|
textStyle: {
|
|
color: '#000000'
|
|
}
|
|
},
|
|
grid: {
|
|
bottom: 150,
|
|
left: 100,
|
|
right: '10%'
|
|
},
|
|
series: [
|
|
// 主要展示层的
|
|
{
|
|
radius: ['40%', '81%'],
|
|
center: ['50%', '50%'],
|
|
type: 'pie',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
formatter: '{b}{d}%',
|
|
textStyle: {
|
|
fontSize: 14
|
|
},
|
|
//position:['50%','50%'],// 'outside',
|
|
top: 10
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 5, //分支长度
|
|
length2: 5,
|
|
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
data: [{
|
|
name: '合格',
|
|
value: 2
|
|
},
|
|
{
|
|
name: '不合格',
|
|
value: 1
|
|
},
|
|
]
|
|
},
|
|
// 边框的设置
|
|
{
|
|
radius: ['40%', '44%'],
|
|
center: ['50%', '50%'],
|
|
type: 'pie',
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
animation: false,
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
value: 1,
|
|
itemStyle: {
|
|
color: 'rgba(250,250,250,0.3)'
|
|
}
|
|
}]
|
|
},
|
|
{
|
|
name: '外边框',
|
|
type: 'pie',
|
|
clockWise: false, //顺时加载
|
|
hoverAnimation: false, //鼠标移入变大
|
|
center: ['50%', '50%'],
|
|
radius: ['65%', '65%'],
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: [{
|
|
value: '',
|
|
name: '',
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 2,
|
|
borderColor: '#0b5263'
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
]
|
|
}
|
|
myChart5.setOption(option5);
|
|
layui.use('table', function() {
|
|
var table = layui.table;
|
|
table.render({
|
|
elem: '#demo',
|
|
data: [{
|
|
"id": "100001",
|
|
"hg": "2个",
|
|
"bhg": "1个"
|
|
}] //数据接口
|
|
,
|
|
cellMinWidth: 80 //全局定义常规单元格的最小宽度
|
|
,
|
|
cols: [
|
|
[ //表头
|
|
{
|
|
field: 'hg',
|
|
title: '通过'
|
|
}, {
|
|
field: 'bhg',
|
|
title: '审批中'
|
|
}
|
|
]
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|