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.
263 lines
6.5 KiB
263 lines
6.5 KiB
1 month ago
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||
|
|
<%@ page import="org.wdk.WDKConstant"%>
|
||
|
|
<%@ page import="org.wdk.WDKCore"%>
|
||
|
|
<%@ page import="org.wdk.WDK"%>
|
||
|
|
<%@ page import="com.noblelift.imp.platform.module.portal.source.SessionUser"%>
|
||
|
|
<%
|
||
|
|
String path = request.getContextPath();
|
||
|
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
|
||
|
|
String WDK_ROOT = WDKCore.WDK_ROOT;
|
||
|
|
SessionUser su = (SessionUser)WDK.getSessionUser(request, response);
|
||
|
|
WDK.writeSessionUser(out, su);
|
||
|
|
%>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
|
||
|
|
|
||
|
|
<base href="<%=basePath%>" target="_self">
|
||
|
|
<title>大数据图表</title>
|
||
|
|
<script type="text/javascript" src="<%=WDK_ROOT%>/theme/je/core/js/wdk.js"></script>
|
||
|
|
<script type="text/javascript" src="platform/report/js/pf.chart.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
<% if(null==su){%>
|
||
|
|
$.timeout();
|
||
|
|
<%}%>
|
||
|
|
var _gridid = $.getUUID();
|
||
|
|
var count = 0;
|
||
|
|
function showBar(){
|
||
|
|
$.bar({
|
||
|
|
id:'bar',
|
||
|
|
title:'销量柱状图',
|
||
|
|
align:'center',
|
||
|
|
data:{
|
||
|
|
header: [{
|
||
|
|
id: 'title',
|
||
|
|
text: '指标'
|
||
|
|
},{
|
||
|
|
id: '2_4point',
|
||
|
|
text: '2-4点'
|
||
|
|
}, {
|
||
|
|
id: '4_6point',
|
||
|
|
text: '4-6点'
|
||
|
|
}, {
|
||
|
|
id: '6_8point',
|
||
|
|
text: '6-8点'
|
||
|
|
}, {
|
||
|
|
id: '8_10point',
|
||
|
|
text: '8-10点'
|
||
|
|
}, {
|
||
|
|
id: '10_12point',
|
||
|
|
text: '10-12点'
|
||
|
|
}, {
|
||
|
|
id: '12_14point',
|
||
|
|
text: '12-14点'
|
||
|
|
}, {
|
||
|
|
id: '14_16point',
|
||
|
|
text: '14-16点'
|
||
|
|
}, {
|
||
|
|
id: '16_18point',
|
||
|
|
text: '16-18点'
|
||
|
|
}, {
|
||
|
|
id: '18_20point',
|
||
|
|
text: '18-20点'
|
||
|
|
}, {
|
||
|
|
id: '20_22point',
|
||
|
|
text: '20-22点'
|
||
|
|
}, {
|
||
|
|
id: '22_24point',
|
||
|
|
text: '22-24点'
|
||
|
|
}],
|
||
|
|
data: [{
|
||
|
|
'title': '销量',
|
||
|
|
'2_4point':102,
|
||
|
|
'4_6point':134,
|
||
|
|
'6_8point':1024,
|
||
|
|
'8_10point':3032,
|
||
|
|
'10_12point':2587,
|
||
|
|
'12_14point':2603,
|
||
|
|
'14_16point':2742,
|
||
|
|
'16_18point':3049,
|
||
|
|
'18_20point':3568,
|
||
|
|
'20_22point':3085,
|
||
|
|
'22_24point':1155
|
||
|
|
}, {
|
||
|
|
'title': '销售额',
|
||
|
|
'2_4point':1020+count,
|
||
|
|
'4_6point':1340+count,
|
||
|
|
'6_8point':4024+count,
|
||
|
|
'8_10point':303+count,
|
||
|
|
'10_12point':258+count,
|
||
|
|
'12_14point':260+count,
|
||
|
|
'14_16point': 274+count,
|
||
|
|
'16_18point':304+count,
|
||
|
|
'18_20point':356+count,
|
||
|
|
'20_22point':308+count,
|
||
|
|
'22_24point':6155+count
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
count = count+10;
|
||
|
|
}
|
||
|
|
//页面初始化
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
$.pie({
|
||
|
|
id:'pie',
|
||
|
|
hidelegend:'1',
|
||
|
|
title:'中华(硬)支付宝消费者非烟产品分析',
|
||
|
|
align:'center',
|
||
|
|
data:[
|
||
|
|
{value:335, name:'打火机'},
|
||
|
|
{value:310, name:'矿泉水/饮料'},
|
||
|
|
{value:234, name:'口香糖'},
|
||
|
|
{value:135, name:'方便面'},
|
||
|
|
{value:1548, name:'纸巾'}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
showBar();
|
||
|
|
|
||
|
|
$.line({
|
||
|
|
id:'line',
|
||
|
|
title:'批发和零售销量对比分析',
|
||
|
|
align:'left',
|
||
|
|
legend_left:'right',
|
||
|
|
legend_top:'top',
|
||
|
|
hidetoolbox:'1',
|
||
|
|
data:{
|
||
|
|
header: [{
|
||
|
|
id: 'title',
|
||
|
|
text: '指标'
|
||
|
|
},{
|
||
|
|
id: '2016_5',
|
||
|
|
text: '2016.5'
|
||
|
|
}, {
|
||
|
|
id: '2016_6',
|
||
|
|
text: '2016.6'
|
||
|
|
}, {
|
||
|
|
id: '2016_7',
|
||
|
|
text: '2016.7'
|
||
|
|
}, {
|
||
|
|
id: '2016_8',
|
||
|
|
text: '2016.8'
|
||
|
|
}, {
|
||
|
|
id: '2016_9',
|
||
|
|
text: '2016.9'
|
||
|
|
}, {
|
||
|
|
id: '2016_10',
|
||
|
|
text: '2016.10'
|
||
|
|
}, {
|
||
|
|
id: '2016_11',
|
||
|
|
text: '2016.11'
|
||
|
|
}, {
|
||
|
|
id: '2016_12',
|
||
|
|
text: '2016.12'
|
||
|
|
}, {
|
||
|
|
id: '2017_1',
|
||
|
|
text: '2017.1'
|
||
|
|
}, {
|
||
|
|
id: '2017_2',
|
||
|
|
text: '2017.2'
|
||
|
|
}, {
|
||
|
|
id: '2017_3',
|
||
|
|
text: '2017.3'
|
||
|
|
}, {
|
||
|
|
id: '2017_4',
|
||
|
|
text: '2017.4'
|
||
|
|
}],
|
||
|
|
data: [{
|
||
|
|
'title': '批发销量',
|
||
|
|
'2016_5':412.07,
|
||
|
|
'2016_6':363.85,
|
||
|
|
'2016_7':338.63,
|
||
|
|
'2016_8':305.36,
|
||
|
|
'2016_9':464.79,
|
||
|
|
'2016_10':698.68,
|
||
|
|
'2016_11':510.9,
|
||
|
|
'2016_12':211.58,
|
||
|
|
'2017_1':2333.94,
|
||
|
|
'2017_2':510.54,
|
||
|
|
'2017_3':626.87,
|
||
|
|
'2017_4':792.35
|
||
|
|
}, {
|
||
|
|
'title': '零售销量',
|
||
|
|
'2016_5':552.96,
|
||
|
|
'2016_6':198.00,
|
||
|
|
'2016_7':120.00,
|
||
|
|
'2016_8':205.92,
|
||
|
|
'2016_9':232.97,
|
||
|
|
'2016_10':214.45,
|
||
|
|
'2016_11':222.22,
|
||
|
|
'2016_12':523.34,
|
||
|
|
'2017_1':217.56,
|
||
|
|
'2017_2':291.05,
|
||
|
|
'2017_3':257.12,
|
||
|
|
'2017_4':367.88
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
var srcstr = $.getChartImage('line');
|
||
|
|
|
||
|
|
$('#img_test').attr('src',srcstr);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style type="text/css">
|
||
|
|
#pie{
|
||
|
|
border: 1px solid green;
|
||
|
|
height: 600px;
|
||
|
|
width: 49.5%;
|
||
|
|
float: left;
|
||
|
|
overflow:auto;
|
||
|
|
}
|
||
|
|
#bar{
|
||
|
|
border: 1px solid green;
|
||
|
|
height: 600px;
|
||
|
|
width: 49.5%;
|
||
|
|
float: right;
|
||
|
|
overflow:auto;
|
||
|
|
}
|
||
|
|
#line{
|
||
|
|
margin-top: 8px;
|
||
|
|
clear: both;
|
||
|
|
border: 1px solid green;
|
||
|
|
height: 600px;
|
||
|
|
width: 100%;
|
||
|
|
overflow:auto;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div style="width: 100%;height: 600px;padding-top: 8px;">
|
||
|
|
<div id="pie">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="bar">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="line">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="height: 300px;">
|
||
|
|
|
||
|
|
<img id="img_test" alt="base64图片" src="data:image/png;base64,">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|