6 changed files with 210 additions and 138 deletions
@ -0,0 +1,141 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<title>折线图</title> |
||||
|
<meta name="renderer" content="webkit"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
||||
|
<link rel="stylesheet" href="/static/lib/layui-v2.8.6/css/layui.css" media="all"> |
||||
|
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> |
||||
|
<link rel="stylesheet" href="/static/lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" media="all"> |
||||
|
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
||||
|
|
||||
|
<style> |
||||
|
.top-panel { |
||||
|
border: 1px solid #eceff9; |
||||
|
border-radius: 5px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.top-panel > .layui-card-body { |
||||
|
height: 60px; |
||||
|
} |
||||
|
|
||||
|
.top-panel-number { |
||||
|
line-height: 60px; |
||||
|
font-size: 30px; |
||||
|
border-right: 1px solid #eceff9; |
||||
|
} |
||||
|
|
||||
|
.top-panel-tips { |
||||
|
line-height: 30px; |
||||
|
font-size: 12px |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="layuimini-main"> |
||||
|
<div class="layui-colla-item"> |
||||
|
<h2 class="layui-colla-title">折线图</h2> |
||||
|
<div class="layui-colla-content layui-show"> |
||||
|
<button class="layui-btn" lay-submit lay-filter="perMensem"> |
||||
|
 按月  |
||||
|
</button> |
||||
|
<button class="layui-btn" lay-submit lay-filter="byTheDay"> |
||||
|
 按日  |
||||
|
</button> |
||||
|
<select id="selectDepositoryForChart" class="form-control"> |
||||
|
|
||||
|
</select> |
||||
|
<div id="echarts-line" style="background-color:#ffffff;padding: 10px;height: 400px"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--</div>--> |
||||
|
|
||||
|
<script src="/static/lib/layui-v2.8.6/layui.js" charset="utf-8"></script> |
||||
|
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
||||
|
<script src="/static/lib/echarts/echarts.js" charset="utf-8"></script> |
||||
|
<script> |
||||
|
|
||||
|
function initLineChartByTheDay(){ |
||||
|
|
||||
|
} |
||||
|
layui.use(['layer', 'element'], function () { |
||||
|
var $ = layui.jquery, |
||||
|
layer = layui.layer, |
||||
|
element = layui.element, |
||||
|
form = layui.form; |
||||
|
|
||||
|
|
||||
|
// 折线图 |
||||
|
let LineChart = echarts.init(document.getElementById('echarts-line')); |
||||
|
let LineChartOption = { |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: [] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
data: [], |
||||
|
type: 'line' |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
//动态加载相关数据 |
||||
|
|
||||
|
|
||||
|
$(function () { |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
|
||||
|
// 按月加载 |
||||
|
form.on('submit(perMensem)', function () { |
||||
|
|
||||
|
}); |
||||
|
// 按天加载 |
||||
|
form.on('submit(byTheDay)', function () { |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
$('#selectDepositoryForChart').on('change', function (obj) { |
||||
|
let value = obj.target.value; |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
initLineChartByTheDay = function(req) { |
||||
|
$.ajax({ |
||||
|
url: '/repository/layui/echart_back?type=1', |
||||
|
type: 'get', |
||||
|
async: true, |
||||
|
dataType: "json", |
||||
|
complete: function (XHR, TS) { |
||||
|
if (XHR.status !== 200) { |
||||
|
layer.alert("系统繁忙,稍后重试"); |
||||
|
} |
||||
|
}, |
||||
|
beforeSend: function () { |
||||
|
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
||||
|
}, |
||||
|
success: function (result) { |
||||
|
layer.close(this.layerIndex); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue