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