echarts

xu0213

浏览: 7988 次

最近访客更多访客>>

xxxxsas

心蓝2828

dagf113225

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (16)

社区版块

存档分类

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'" onclick="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" onchange="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'" onclick="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>

分享到：