echarts

最新推荐文章于 2022-03-04 09:54:41 发布

xu_6543210

最新推荐文章于 2022-03-04 09:54:41 发布

阅读量125

点赞数

文章标签： xhtml javascript json ViewUI

本文链接：https://blog.csdn.net/xu_6543210/article/details/84685282

版权

public List<Map<String,Object>> queryDetailData(@ModelAttribute DataQueryParameters dataQueryParameters)throws Exception{
List<Map<String,Object>> relist=this.initDetailDataList();
List<DataAnalysisModel> recordList = dataAnalysisService.queryDetailDataAnalysisRecord(dataQueryParameters);
if(null != recordList && recordList.size() > 0){
for (DataAnalysisModel dataAnalysisModel : recordList) {
int flag = 0;
for (Map<String,Object> map: relist) {
if(String.valueOf(map.get("dateTime")).equals(dataAnalysisModel.getDataTime()) ){
map.put("DATA", dataAnalysisModel.getRecordCount());
flag = 1;
break;
}
}
if(flag == 0){
Map<String,Object> datamap = new HashMap<String,Object>();
datamap.put("dateTime",dataAnalysisModel.getDataTime());
datamap.put("DATA", dataAnalysisModel.getRecordCount());
relist.add(datamap);
}
}
}
return relist;
}

private List<Map<String,Object>> initDetailDataList() throws Exception{
List<Map<String,Object>> initlist = new ArrayList<Map<String,Object>>();
for(int i=0; i < 24 ;i++){
Map<String,Object> map = new HashMap<String,Object>();
map.put("dateTime", i+"");
map.put("DATA", 0);
initlist.add(map);
}
return initlist;
}

<style>
.main {
height: 500px;
overflow: hidden;
padding : 10px;
margin-bottom: 10px;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>

<body>
<table class="layout">
<tr>
<td class="title"><label for="status" >时间:</label></td>
<td colspan="2">
<input id="startDate" name="startDate" class="easyui-datebox" /> -
<input id="endDate" name="endDate" class="easyui-datebox" />
</td>
<td>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'" οnclick="queryDataByParm()">查询</a>
</td>
</tr>
</table>
<div id="main" class="main"></div>
<div id="win" class="easyui-window" title="表格视图" style="width:400px;height:430px;"
data-options="iconCls:'icon-save',modal:true,collapsible:false,minimizable:false,maximizable:false,closed:true,resizable:false">
<div data-options="region:'center'">
<table id="tt"></table>
</div>
</div>

<div id="winDetailT" class="easyui-window" title="图形展示" style="width:1000px;height:700px"
data-options="iconCls:'icon-save',closed:true,collapsible:false,minimizable:false,maximizable:false,draggable:true">
<form>
<table class="layout">
<tr>
<td class="title"><label for="bigChannel">渠道:</label></td>
<td>
<select id="bigChannel" class="easyui-combobox" style ="width:135px" οnchange="changeBigChannel" >
<option value="DTC">DTC</option>
<option value="IPMI">IPMI</option>
<option value="CMB">CMB</option>
</select>
</td>
<td class="title"><label>Campaign Code:</label></td>
<td colspan="3">
<input id="campaignCode" name="campaignCode" class="easyui-combobox" style ="width:135px">
</td>
</tr>
<tr id="dtcTr" style="display:none;">
<td class="title"><label for="">合作媒体:</label></td>
<td>
<input id="channel" name="channel" class="easyui-combobox" size="26" style ="width:135px"
data-options="url:'combobox/channel.json',
method:'post',
valueField:'value',
textField:'text',
editable: false,
panelHeight:'300',"/>
</td>
<td class="title"><label for="businessChannel">业务渠道:</label></td>
<td>
<input id="businessChannel" name="businessChannel" class="easyui-combobox" style ="width:135px"
data-options="url:'combobox/businessChannel.json',
method:'post',
valueField:'value',
textField:'text',
panelHeight:'300',
editable: false,"/>
</td>
<td class="title"> <label for="type">类型:</label></td>
<td>
<input id="type" name="type" class="easyui-combobox" style ="width:135px"
data-options="url:'combobox/type.json',
method:'post',
valueField:'value',
textField:'text',
panelHeight:'auto',
editable: false,
"/>
</td>
</tr>
<tr>
<td class="title"><label for="status" >时间:</label></td>
<td colspan="5">
<input id="startDateDetail" name="startDate" class="easyui-datebox" style ="width:135px"/> -
<input id="endDateDetail" name="endDate" class="easyui-datebox" style ="width:135px"/>

<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'" οnclick="queryDetail()">查询</a>
</td>
</tr>
</table>
</form>
<div id="mainDetail" class="main" style="width:900px;"></div>
<div id="winDetail" class="easyui-window" title="表格视图" style="width:400px;height:430px;"
data-options="iconCls:'icon-save',modal:true,collapsible:false,minimizable:false,maximizable:false,closed:true,resizable:false">
<div data-options="region:'center'">
<table id="ttDetail"/>
</div>
</div>
</div>

</body>
<script type="text/javascript" src="jeasyui/jquery.js"></script>
<script type="text/javascript" src="jeasyui/jquery.easyui.js"></script>
<script type="text/javascript" src="jeasyui/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/project.js"></script>
<script type="text/javascript" src="js/region.js"></script>
<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript">
// var xdata = ['09-14','09-15','09-16','09-17','09-18','09-19','09-20','09-21','09-22','09-23','09-24','09-25','09-26','09-27'];
// var topdata = ['DTC','IPMI','CMB'];
// var datavalue = [{name:'DTC',type:'bar',stack: '广告',data:[898,9990,7617,7923,4984,6006,2501,802,11904,5661,5981,5739,5500,822]},{name:'IPMI',type:'bar',stack: '广告',data:[154,196,242,233,182,163,124,130,161,174,142,166,140,145]},{"name":"CMB",type:'bar',stack: '广告',data:[76,2180,891,765,664,867,118,131,3218,3124,1148,1188,1133,154]}];
var reportDate;
var myChart;
var domMain = document.getElementById('main');
var curTheme;
var echarts;

var reportDateDetail;
var myChartDetail;
var domMainDetail = document.getElementById('mainDetail');
var curThemeDetail;
var echartsDetail = null;

var fileLocation = 'js/echarts';
$(document).ready(function(){
//$('#winDetailT').window('close');
initData();
require.config({
paths:{
echarts: fileLocation,
'echarts/chart/bar': fileLocation
}
});

// 按需加载
require(
[
'echarts',
'echarts/chart/bar'
],
requireCallback
);

$('#bigChannel').combobox({
onChange : function(n,o){
changeBigChannel();
}
});
});

<%--初始化 --%>
/* $(function(){
initData();
}); */

function initData(){
var now = new Date();
var year = now.getFullYear();
var month;
var day;
if((now.getMonth()+1)<10){
month = "0"+(now.getMonth()+1);
}else{
month = ""+(now.getMonth()+1);
}
if(now.getDate()<10){
day = "0"+now.getDate();
}else{
day = ""+now.getDate();
}
var date = year + '-' + month + '-' +day;
$("#startDate").datebox("setValue", date);
$("#endDate").datebox("setValue", date);
}

function requireCallback (ec) {
echarts = ec;
echartsDetail=ec;
refresh();
}
function refresh(isBtnRefresh){
myChart = echarts.init(domMain);
myChartDetail=echartsDetail.init(domMainDetail);
myChart.on("click", myChartClick);
var date = new Date();
var endDate = date.getFullYear()+"-"+((date.getMonth()+1)<10?"0":"")+(date.getMonth()+1)+"-"+(date.getDate()<10?"0":"")+date.getDate();
var startDate = date.getFullYear()+"-"+((date.getMonth()+1)<10?"0":"")+(date.getMonth()+1)+"-"+(date.getDate()<10?"0":"")+date.getDate();
query(startDate,endDate);
}

//图像点击事件
function myChartClick(param){
//alert(param.dataIndex);seriesIndex
var bigChannel="DTC";
if(param.seriesIndex==0){
bigChannel="DTC";
}else if(param.seriesIndex==1){
bigChannel="IPMI";
}else if(param.seriesIndex==2){
bigChannel="CMB";
}
var startDate = $.trim($('#startDate').datebox("getValue"));
var endDate = $.trim($('#endDate').datebox("getValue"));
var url='dataAnalysis/detailDataAnalysis.xhtml?startDate='
+startDate+'&endDate='+endDate+'&bigChannel='+bigChannel;

$("#bigChannel").combobox("setValue", bigChannel);
$("#startDateDetail").datebox("setValue", startDate);
$("#endDateDetail").datebox("setValue", endDate);
changeBigChannel();
$('#winDetailT').window('open');
/* $('#winDetailTT').window({
width:900,
height:600,
modal:true,
collapsible:false,
minimizable:false,
maximizable:false,
resizable:false,
refresh:true,
iconCls : 'icon-search',
title : '查看产品',
href:url,
}); */
//弹出子明细
//$('#winDetailT').window('refresh', url);

/* window.open('dataAnalysis/detailDataAnalysis.xhtml?startDate='
+startDate+'&endDate='+endDate+'&bigChannel='+bigChannel,'子明细'); */
// window.parent.addTab('子明细',url);
/* $('#detailWin').dialog({
title: '子明细',
width: 600,
height: 400,
closed: false,
cache: false,
href: 'dataAnalysis/detailDataAnalysis.xhtml?startDate='+startDate+'&endDate='+endDate+'&bigChannel='+bigChannel,
modal: true
}); */

}

function queryDataByParm(){
var startDate = $.trim($('#startDate').datebox("getValue"));
var endDate = $.trim($('#endDate').datebox("getValue"));
query(startDate,endDate);
}

function query(startDate,endDate){
// var startDate = $.trim($('#startDate').datebox("getValue"));
// var endDate = $.trim($('#endDate').datebox("getValue"));
if((startDate == ""&& endDate != "")||(startDate != ""&& endDate == "")){
$.messager.alert("提示", "查询区间必需填写起始时间和结束时间或者不指定区间!", 'error');
return false;
}

$.ajax({
type : 'POST',
url : 'dataAnalysis/queryData.xhtml',
data : {startDate:startDate,
endDate:endDate
},
success : function(rsp) {
var resultJSON = $.parseJSON(rsp);
reportDate = resultJSON;
var xdata = [];
var DTC = [];
var CMB = [];
var IPMI = [];
for(var i=0;i<resultJSON.length;i++){
var data = resultJSON[i];
xdata.push(data.dateTime+'时');
DTC.push(data.DTC);
CMB.push(data.CMB);
IPMI.push(data.IPMI);
}
var option = getBarChartOption(xdata,DTC,CMB,IPMI);
myChart.setOption(option, true);
},
error : function() {
},
});
}

//获得Bar图的选项和数据
function getBarChartOption(xdata,DTC,CMB,IPMI){
var option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
/* formatter: function (params,ticket,callback) {
alert( params[0][1]);
}, */
},
legend: {
data:['DTC','IPMI','CMB']
},
toolbox: {
show : true,
orient: 'vertical',
x: 'right',
y: 'center',
feature : {
//dataView : {show: true, readOnly: true,lang : ['数据视图', 'close', 'refresh'],},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
myTool : {
show : true,
title : '表格视图',
icon : 'image://images/blocks.gif',
lang : ['Data View', 'close', 'refresh'],
onclick : function (){
// var startDate = $.trim($('#startDate').datebox("getValue"));
// var endDate = $.trim($('#endDate').datebox("getValue"));
// if((startDate == ""&& endDate != "")||(startDate != ""&& endDate == "")){
// $.messager.alert("提示", "查询区间必需填写起始时间和结束时间或者不指定区间!", 'error');
// return false;
// }
// if(getDays(startDate,endDate) > 18){
// $.messager.alert("提示", "时间区间最好为两周，最大不可超过18天!", 'error');
// return false;
// }
initGridData();
$('#win').window('open');
}
},
saveAsImage : {show: true},
mark : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : xdata
}
],
yAxis : [
{
type : 'value'
}
],
series :
[
{
name:'DTC',
type:'bar',
data:DTC
},
{
name:'IPMI',
type:'bar',
data:IPMI
},{
name:'CMB',
type:'bar',
data:CMB
}
]
};
return option;
}

function initGridData(){
$('#tt').datagrid({
// url : 'dailyreport/queryData.xhtml',
// queryParams:
// {startDate:$.trim($('#startDate').datebox("getValue")),
// endDate:$.trim($('#endDate').datebox("getValue"))
// },
columns : [[
{field:'dateTime',title:'时间',align:'left',width:120,sortable:true},
{field:'DTC',title:'DTC',width:70,align:'left',sortable:true},
{field:'IPMI',title:'IPMI',width:70,align:'left',sortable:true},
{field:'CMB',title:'CMB',width:70,align:'left',sortable:true}

]]
}).datagrid('loadData', reportDate);
}

//子明细方法

//var fileLocation = 'js/echarts';
function requireCallbackDetail (ec) {
echartsDetail = ec;
refreshDetail();
}
function refreshDetail(isBtnRefresh){
myChartDetail = echartsDetail.init(domMainDetail);
//queryDetail();
}

function changeBigChannel(){
var bigchannel= $('#bigChannel').combobox('getValue');
if(bigchannel=='DTC'){
$("#dtcTr").show();
}else{
$("#dtcTr").hide();
}
$('#cc').combobox('clear');
$('#campaignCode').combobox({
url:'dataAnalysis/campaignCode.json?bigChannel='+bigchannel,
id:'value',
text:'text',
editable: false,
});
queryDetail();
}

function queryDetail(){
console.log("btn query .... ");
if(null == echartsDetail){
require.config({
paths:{
echartsDetail: fileLocation,
'echarts/chart/bar': fileLocation
}
});

// 按需加载
require(
[
'echarts',
'echarts/chart/bar'
],
requireCallbackDetail
);
}

var startDate = $.trim($('#startDateDetail').datebox("getValue"));
var endDate = $.trim($('#endDateDetail').datebox("getValue"));
if((startDate == ""&& endDate != "")||(startDate != ""&& endDate == "")){
$.messager.alert("提示", "查询区间必需填写起始时间和结束时间或者不指定区间!", 'error');
return false;
}

$.ajax({
type : 'POST',
url : 'dataAnalysis/queryDetailData.xhtml',
data : {startDate:startDate,
endDate:endDate,
bigChannel:$.trim($('#bigChannel').combobox('getValue')),
campaignCode:$.trim($('#campaignCode').combobox('getValue')),
type:$.trim($('#type').combobox('getValue')),
businessChannel:$.trim($('#businessChannel').combobox('getValue')),
channel:$.trim($('#channel').combobox('getValue')),
},
success : function(rsp) {
var resultJSON = $.parseJSON(rsp);
reportDateDetail = resultJSON;
var xdata = [];
var DATA = [];
for(var i=0;i<resultJSON.length;i++){
var data = resultJSON[i];
xdata.push(data.dateTime+'时');
DATA.push(data.DATA);
}
var option = getBarChartOptionDetail(xdata,DATA);
myChartDetail.setOption(option, true);
},
error : function() {
},
});
}
//获得Bar图的选项和数据
function getBarChartOptionDetail(xdata,DATA){
var option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},

},
/* legend: {
data:['DATA']
}, */
toolbox: {
show : true,
orient: 'vertical',
x: 'right',
y: 'center',
feature : {
//dataView : {show: true, readOnly: true,lang : ['数据视图', 'close', 'refresh'],},, 'stack', 'tiled'
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
myTool : {
show : true,
title : '表格视图',
icon : 'image://images/blocks.gif',
lang : ['Data View', 'close', 'refresh'],
onclick : function (){

initGridDataDetail();
$('#winDetail').window('open');
}
},
saveAsImage : {show: true},
mark : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : xdata
}
],
yAxis : [
{
type : 'value'
}
],
series :
[
{
name:'DATA',
type:'bar',
data:DATA
}
]
};
return option;
}

function initGridDataDetail(){
$('#ttDetail').datagrid({
// url : 'dailyreport/queryData.xhtml',
// queryParams:
// {startDate:$.trim($('#startDate').datebox("getValue")),
// endDate:$.trim($('#endDate').datebox("getValue"))
// },
columns : [[
{field:'dateTime',title:'时间',align:'left',width:120,sortable:true},
{field:'DATA',title:'DATA',width:70,align:'left',sortable:true}

]]
}).datagrid('loadData', reportDateDetail);
}

</script>

xu_6543210

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts

public List queryDetailData(@ModelAttribute DataQueryParameters dataQueryParameters)throws Exception{ List relist=this.initDetailDataList(); List recordList = dataAnalysisService.queryDetailDat...
复制链接

扫一扫