193 lines
4.5 KiB
HTML
193 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">
|
|
.cont_daping_right {
|
|
width: 600px;
|
|
background: #2e3347;
|
|
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">
|
|
var myChart3 = echarts.init(document.getElementById('main2'));
|
|
option3 = {
|
|
title: {
|
|
text: '预警数',
|
|
left: 'left',
|
|
textStyle: {
|
|
color: '#FFF'
|
|
}
|
|
},
|
|
color: ['#3398DB'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['德州第一中学', '山东福田药业有限公司', '德州市鑫荣气化有限公司', '山东凯力德机械', "德州市好友好有限公司"],
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#FFF', //左边线的颜色
|
|
width: '1' //坐标线的宽度
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 40,
|
|
show: true,
|
|
splitNumber: 15,
|
|
color: "#FFF",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
|
|
},
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
splitLine: { //分割线
|
|
show: true,
|
|
color: "#fff",
|
|
lineStyle: {
|
|
color: '#FFF'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#FFF', //左边线的颜色
|
|
width: '1' //坐标线的宽度
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
show: true,
|
|
splitNumber: 30,
|
|
color: "#FFF",
|
|
textStyle: {
|
|
//fontFamily: "微软雅黑",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
}],
|
|
series: [{
|
|
name: '预警数',
|
|
type: 'bar',
|
|
barWidth: '20%',
|
|
data: [0, 0, 3, 1, 4, 4]
|
|
}]
|
|
};
|
|
myChart3.setOption(option3);
|
|
layui.use('table', function() {
|
|
var table = layui.table;
|
|
table.render({
|
|
elem: '#demo',
|
|
data: [{
|
|
"id": "100001",
|
|
"hg": "德州好友好有限公司",
|
|
"bhg": "4"
|
|
},
|
|
{
|
|
"id": "100002",
|
|
"hg": "德州市鑫荣气化有限公司",
|
|
"bhg": "2"
|
|
},
|
|
{
|
|
"id": "100003",
|
|
"hg": "山东凯力德机械",
|
|
"bhg": "1"
|
|
},
|
|
{
|
|
"id": "100004",
|
|
"hg": "德州第一中学",
|
|
"bhg": "0"
|
|
},
|
|
{
|
|
"id": "100005",
|
|
"hg": "山东福田药业有限公司",
|
|
"bhg": "0"
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
] //数据接口
|
|
,
|
|
cellMinWidth: 80 //全局定义常规单元格的最小宽度
|
|
,
|
|
cols: [
|
|
[ //表头
|
|
{
|
|
field: 'hg',
|
|
title: '公司名称'
|
|
}, {
|
|
field: 'bhg',
|
|
title: '预警数'
|
|
}
|
|
]
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|