14 changed files with 667 additions and 228 deletions
@ -0,0 +1,245 @@ |
|||
<!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"> |
|||
<input id="type" th:value="${type}" style="display:none;"> |
|||
<select id="selectMonthForChart" class="form-control"> |
|||
<option th:each="month,iterStar:${monthNames}" |
|||
th:value="${month}" |
|||
th:text="${month}"></option> |
|||
</select> |
|||
<select id="selectDepositoryForChart" class="form-control"> |
|||
|
|||
</select> |
|||
<div id="echarts-sunburst-chart" style="background-color:#ffffff;padding: 10px;height:400px;"></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 initSunburstChart() { |
|||
|
|||
} |
|||
|
|||
function getThisUserDepository() { |
|||
|
|||
} |
|||
|
|||
layui.use(['layer', 'element'], function () { |
|||
var $ = layui.jquery, |
|||
layer = layui.layer, |
|||
element = layui.element, |
|||
form = layui.form; |
|||
|
|||
|
|||
let type = $("#type").val(); |
|||
|
|||
// 旭日图 |
|||
var echartSunburstChart = echarts.init(document.getElementById('echarts-sunburst-chart')); |
|||
var optionSunburstChart = { |
|||
title: { |
|||
textStyle: { |
|||
fontSize: 14, |
|||
align: 'center' |
|||
}, |
|||
subtextStyle: { |
|||
align: 'center' |
|||
}, |
|||
}, |
|||
series: { |
|||
type: 'sunburst', |
|||
data: [], |
|||
radius: [0, '95%'], |
|||
sort: undefined, |
|||
emphasis: { |
|||
focus: 'ancestor' |
|||
}, |
|||
levels: [ |
|||
{}, |
|||
{ |
|||
r0: '15%', |
|||
r: '35%', |
|||
itemStyle: { |
|||
borderWidth: 2 |
|||
}, |
|||
label: { |
|||
rotate: 'tangential' |
|||
} |
|||
}, |
|||
{ |
|||
r0: '35%', |
|||
r: '70%', |
|||
label: { |
|||
align: 'right' |
|||
} |
|||
}, |
|||
{ |
|||
r0: '70%', |
|||
r: '72%', |
|||
label: { |
|||
position: 'outside', |
|||
padding: 3, |
|||
silent: false |
|||
}, |
|||
itemStyle: { |
|||
borderWidth: 3 |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
myFull: { |
|||
show: true, |
|||
title: '全屏查看', |
|||
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', |
|||
onclick: function (e) { |
|||
var opts = e.getOption(); |
|||
opts.toolbox[0].feature.myFull.show = false; |
|||
//window.top表示最顶层iframe 如果在当页面全屏打开 删去window.top即可 |
|||
window.top.layer.open({ |
|||
title: false, |
|||
type: 1, |
|||
area: ["100%", "100%"], |
|||
content: '<div id="fullChart" style="width: 100%;height: 100%;padding:30px 0px"></div>', |
|||
success: function () { |
|||
var fullchart = echarts.init(window.top.document.getElementById('fullChart')); |
|||
fullchart.setOption(optionSunburstChart) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
saveAsImage: {}, |
|||
dataZoom: { |
|||
yAxisIndex: 'none' |
|||
}, |
|||
} |
|||
} |
|||
}; |
|||
|
|||
$(function () { |
|||
let req = {}; |
|||
req.type = type; |
|||
getThisUserDepository(); |
|||
initSunburstChart(req); |
|||
}); |
|||
|
|||
|
|||
$('#selectDepositoryForChart').on('change', function (obj) { |
|||
let value = obj.target.value; |
|||
let req = {}; |
|||
req.depositoryId = value; |
|||
req.dateName = $("#selectMonthForChart").val(); |
|||
req.type = type; |
|||
initSunburstChart(req); |
|||
}); |
|||
|
|||
$("#selectMonthForChart").on('change',function(obj) { |
|||
let value = obj.target.value; |
|||
let req = {}; |
|||
req.dateName = value; |
|||
req.type = type; |
|||
req.depositoryId = $("#selectDepositoryForChart").val(); |
|||
initSunburstChart(req); |
|||
}); |
|||
|
|||
|
|||
initSunburstChart = function (req) { |
|||
$.ajax({ |
|||
url: '/depositoryRecord/getSunBurstDataForApplication', |
|||
type: 'post', |
|||
dataType: "json", |
|||
data: JSON.stringify(req), |
|||
contentType: "application/json;charset=utf-8", |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
let data = result.data; |
|||
optionSunburstChart.series.data = [data]; |
|||
echartSunburstChart.setOption(optionSunburstChart); |
|||
} |
|||
}) |
|||
}; |
|||
|
|||
|
|||
getThisUserDepository = function () { |
|||
$.ajax({ |
|||
url: '/repository/getWareHouseVisiblePermissionByUser', |
|||
type: 'get', |
|||
dataType: "json", |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
let data = result.data; |
|||
let selectItem = $("#selectDepositoryForChart"); |
|||
for (let item in data) { |
|||
let optionItem = '<option value="' + data[item] + '">' + item + '</option>'; |
|||
selectItem.append(optionItem) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
|
|||
// 设置点击事件 |
|||
echartSunburstChart.on('click', function(params) { |
|||
let name = params.name; |
|||
if(name !== ""){ |
|||
|
|||
} |
|||
}); |
|||
|
|||
|
|||
}); |
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue