You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
12 KiB
292 lines
12 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
<script src="js/jquery-2.1.3.min.js"></script>
|
|
<link href="layui/css/layui.css" rel="stylesheet" />
|
|
<script src="layui/layui.js"></script>
|
|
<script src="js/echarts.min.js"></script>
|
|
<style type="text/css">
|
|
html {
|
|
height: 98%;
|
|
}
|
|
|
|
body {
|
|
height: 98%;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.clsDiv1 {
|
|
width: 60%;
|
|
/*text-align: center;*/
|
|
margin: 0 auto;
|
|
line-height: 50px;
|
|
background-color: #edecec;
|
|
padding: 10px 10px 20px 10px;
|
|
border: 1px solid #a4a1a1;
|
|
border-radius: 15px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
layui.use(['laydate', 'table'], function () {
|
|
var laydate = layui.laydate;
|
|
var table = layui.table;
|
|
|
|
//年月选择器
|
|
laydate.render({
|
|
elem: '#test3'
|
|
, type: 'month'
|
|
, value: '2022-11'
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="layui-tab layui-tab-card" style="height:140px;">
|
|
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">选择月份</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" class="layui-input" id="test3" placeholder="yyyy-MM">
|
|
</div>
|
|
</div>
|
|
<button type="button" class="layui-btn layui-btn-normal">搜索</button>
|
|
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">综合汇总查询</li>
|
|
<li>部门汇总查询</li>
|
|
<li>个人汇总查询</li>
|
|
|
|
</ul>
|
|
<div class="layui-tab-content">
|
|
<div class="layui-tab-item layui-show">
|
|
<!--日统计查询-->
|
|
|
|
|
|
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<!--部门统计查询-->
|
|
|
|
<form class="layui-form" action="">
|
|
|
|
<div class="layui-input-inline">
|
|
<select name="city" lay-verify="" style="width:120px; font-size:18px;">
|
|
<option value="">选择部门</option>
|
|
<option value="010">指挥中心</option>
|
|
<option value="010">作战训练科</option>
|
|
<option value="010">政治部</option>
|
|
<option value="010">政治工作科</option>
|
|
<option value="010">防火监督科</option>
|
|
<option value="010">宣教中心</option>
|
|
<option value="010">后勤保障科</option>
|
|
<option value="021">全媒体中心</option>
|
|
<option value="010">应急通信勤务班</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="button" class="layui-btn layui-btn-normal">搜索</button>
|
|
|
|
|
|
</form>
|
|
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
|
|
<form class="layui-form" action="">
|
|
|
|
<div class="layui-input-inline">
|
|
<select name="city" lay-verify="" style="width:120px; font-size:18px;">
|
|
<option value="">选择人员</option>
|
|
<option value="010">孙振涛</option>
|
|
<option value="010">刘松林</option>
|
|
<option value="010">加永拉姆</option>
|
|
<option value="010">甘露</option>
|
|
<option value="010">李智欣</option>
|
|
<option value="010">罗松扎西</option>
|
|
<option value="010">吴行兵</option>
|
|
<option value="021">刘毅</option>
|
|
<option value="010">崔壮壮</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="button" class="layui-btn layui-btn-normal">搜索</button>
|
|
|
|
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
|
|
<div class="layui-row">
|
|
<div class="layui-col-xs12">
|
|
<div class="grid-demo grid-demo-bg1">
|
|
|
|
<div id="main" style="width: 95%;height:600px; margin:0 auto;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title: {
|
|
text: "2022年11月综合任务走势图",
|
|
textStyle: {
|
|
align: "center",
|
|
color: "#fff",
|
|
fontSize: 20,
|
|
},
|
|
top: "3%",
|
|
left: "10%",
|
|
},
|
|
backgroundColor: "#0f375f",
|
|
grid: {
|
|
top: "25%",
|
|
bottom: "10%", //也可设置left和right设置距离来控制图表的大小
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
label: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
data: ["总数", "已完成"],
|
|
top: "15%",
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
xAxis: {
|
|
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
|
|
"11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30",],
|
|
axisLine: {
|
|
show: true, //隐藏X轴轴线
|
|
lineStyle: {
|
|
color: "#01FCE3",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: true, //隐藏X轴刻度
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#ebf8ac", //X轴文字颜色
|
|
},
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "次",
|
|
nameTextStyle: {
|
|
color: "#ebf8ac",
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#FFFFFF",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#ebf8ac",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
type: "value",
|
|
name: "",
|
|
nameTextStyle: {
|
|
color: "#ebf8ac",
|
|
},
|
|
position: "right",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "总数",
|
|
type: "line",
|
|
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
smooth: true, //平滑曲线显示
|
|
showAllSymbol: true, //显示所有图形。
|
|
symbol: "circle", //标记的图形为实心圆
|
|
symbolSize: 10, //标记的大小
|
|
itemStyle: {
|
|
//折线拐点标志的样式
|
|
color: "#058cff",
|
|
},
|
|
lineStyle: {
|
|
color: "#058cff",
|
|
},
|
|
areaStyle: {
|
|
color: "rgba(5,140,255, 0.2)",
|
|
},
|
|
data: [10, 15, 18, 0, 20, 55, 14, 23, 56, 31, 26, 42, 19, 32, 24, 18, 45, 35, 26, 22, 18, 9, 26, 32, 47, 40, 26, 22, 30, 18],
|
|
},
|
|
{
|
|
name: "已完成",
|
|
type: "bar",
|
|
barWidth: 15,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "#00FFE3",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#4693EC",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: [8, 12, 10, 5, 24, 20, 3, 14, 18, 32, 30, 21, 28, 16, 7, 0, 18, 51, 19, 34, 27, 22, 37, 19, 26, 19, 34, 22, 30, 29],
|
|
},
|
|
],
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
|
|
</div>
|
|
</div>
|
|
<!--<div class="layui-col-xs6">
|
|
<div class="grid-demo">6/12</div>
|
|
</div>-->
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|