Echarts我的實例

時間 2019-11-09

標籤 echarts 我的實例简体版

原文原文鏈接

1.deviceOperateTrendIndex.jspjavascript

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% String basePath = request.getContextPath();%>
<html>
<head>
<title>設備操做趨勢主界面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<link rel="stylesheet" type="text/css" href="<%=basePath%>/theme/css/base.css" />
   
<script src="<%=basePath%>/components/jq/jquery-1.8.2.min.js"></script>
<script src="<%=basePath%>/js/common/index.js"></script>
<script type="text/javascript">
//設置默認訪問的界面
var indexPage = "<%=basePath%>/device/deviceListAjax.do";

$(document).ready(function(){
    //綁定tab頁
    $("#tabs span").click(function(){
        var tabHtml = $(this).html();
        switch(tabHtml){
            case "空氣魔方":
                $("#mainframe").attr("src", "<%=basePath%>/device/deviceListAjax.do");
                break;
            default:
                break;
        }
        $(this).addClass('active').siblings().removeClass('active');
    });    
});
</script>
</head>
<body id="indexBody">
    <div id="navigation" class="item" style="width:80%; height:100%;margin-bottom: 0;">
        <div id="nav">
            <i class="home"></i>
            <span class="active">KPI</span>
            <span class="active">&gt;</span>
            <!-- <span class="active">空氣魔方KPI</span>
            <span class="active">&gt;</span> -->
            <span class="">設備操做趨勢</span>
        </div>
        <div id="wrap" class="wrap" style="padding: 15px 0 0 20px">
            <div id="tabs" class="selectTab title" style="margin: 4px 0 0 0">
                <span>所有</span>
                <span>空調</span>
                <span>空氣盒子</span>
                <span class="active lfborder">空氣魔方</span>
                <span>淨化器</span>
                <span>空氣mini</span>
            </div>
            <iframe frameborder="0" id="mainframe" src="" scrolling="scrolling" style="overflow-x: hidden; width: 100%;height:800px;">
            </iframe>
        </div>
    </div>
</body>    
</html>

View Code

2.deviceOperateTrend_Kqmf.jspcss

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% String basePath = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>設備操做趨勢-空氣魔方</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/theme/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/theme/css/common.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/components/jqueryUI/jquery-ui.css" />

<script type="text/javascript" src="<%=basePath%>/components/jq/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/components/jqueryUI/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/components/datepicker/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=basePath%>/components/echarts/echarts.js"></script>
<script type="text/javascript" src="<%=basePath%>/common/js/dateUtil.js"></script>
<script type="text/javascript" src="<%=basePath%>/common/js/citySelect.js"></script>
<script type="text/javascript" src="<%=basePath%>/common/js/lineEchart.js"></script>
<script type="text/javascript" src="<%=basePath%>/common/js/barEchart.js"></script>
<script type="text/javascript" src="<%=basePath%>/common/js/back2Top.js"></script>
<script type="text/javascript">
require.config({
    paths: {
        echarts: '<%=basePath%>/components/echarts'
    }
});

$(document).ready(function(){
    //設置總體圖片DIV的高度
    $('#page1').height($('body').height() - 100);
    
    //設置圖片展現區的高度
    $('div[myattr = "pic"]').each(function(){
        $(this).height($(this).parent().height() - 20);
    });
    
    //(1)加載累加的設備操做趨勢圖，加載當日的設備操做趨勢圖
    queryDiagramAndTable();
});

//根據時間查詢相應的數據
function queryDiagramAndTable(){
    var startDateValue = $('#startDateValue').val();
    var endDateValue = $('#endDateValue').val();
    var regionName = getRegionCode();
    var region = (REGION == 'ALL')?'':REGION;
    
    endDateValue = getCorrectDateByInputDate(endDateValue);
    //(1)查詢累加的折線數據圖
    queryTotalDiagramData(startDateValue, endDateValue, region, regionName);
    //(2)查詢當前數據報表
    queryCurrentDiagramData(startDateValue, endDateValue, region, regionName);
    //(3)查詢數據表
//    queryDataTable(startDateValue, endDateValue, region, regionName);
}

//（1）查詢表數據，查詢累計的數據操做折線圖
function queryTotalDiagramData(startDateValue, endDateValue, region, regionName){
    //定義折線圖的選項
    var lineOption = loadLineOption();
    $.ajax({ 
        type: 'POST',
        url: '<%=basePath%>/device/showEcharts.do', 
        async: false,
        dataType: 'JSON',
    //    data:{startTime:startDateValue, endTime: endDateValue, region: region, regionName: regionName},
        success: function(data){
            console.log(data);
            //設置累加圖表顯示
            //定義類型數組，設備數，用戶數
        //    lineOption.legend.data = data.legendDatas;
            //定義X座標顯示
            lineOption.xAxis[0].data = data.xDatas;
            //定義每種類型的顯示
            lineOption.series = data.series;
            //從新加載數據圖
            loadTotalDiagram(lineOption);
          },
          error:function(data){
              //alert("異常");
          } 
    });
}

//（2）查詢表數據，查詢累計的數據操做折線圖
function queryCurrentDiagramData(startDateValue, endDateValue, region, regionName){
    var lineOption = loadBarOption();
     $.ajax({ 
        url: '<%=basePath%>/device/showBarEcharts.do', 
        type: 'POST',
        data:{startTime:startDateValue, 'endTime': endDateValue, region: region, regionName: regionName},
        success: function(data){
            console.log(data);            
            //設置累加圖表顯示d
            //定義類型數組，設備數，用戶數
        //    lineOption.legend.data = data.legendDatas;
            //定義X座標顯示
            lineOption.xAxis[0].data = data.xDatas;
            //定義每種類型的顯示
            lineOption.series = data.series;
            //從新加載數據圖
            loadCurrentDiagram(lineOption);
          },
          error:function(){
              alert('請求異常');
          } 
    });
}

//(3)加載設備操做趨勢表 
function queryDataTable(startDateValue, endDateValue, region, regionName){
    //發送請求
    $.ajax({
        url: "<%=basePath%>/deviceOperateTrend/queryTableDataDiagram.do",
        type: 'POST',
        data: {'startTime': startDateValue, 'endTime': endDateValue, region: region, regionName: regionName},
        success: function(data){
            data = eval("(" + data + ")");
            //從新加載數據圖
            loadTableData(data);
        },
        error: function(e){
            alert('請求異常');
        }
    });
}

//(1-1)加載累計設備數
function loadTotalDiagram(lineOption){
    require([
             'echarts',
             'echarts/theme/macarons',
             'echarts/chart/line'
    ],
    function(ec, theme){
           var myChart = ec.init(document.getElementById("picPage1-1-1"), theme);
           myChart.setOption(lineOption, true);
    });
}

//(2-1)加載當日設備數
function loadCurrentDiagram(lineOption){
    require([
             'echarts',
             'echarts/theme/macarons',
             'echarts/chart/bar'
    ],
    function(ec, theme){
           var myChart = ec.init(document.getElementById("picPage1-1-2"), theme);
           myChart.setOption(lineOption, true);
    });
}


//(3-1)添加表格數據
function loadTableData(tabRealData) {
    tabData = (tabRealData == undefined ? tabData : tabRealData);
    $("#example").find("tr:gt(0)").remove();
    //獲得表格有多少列
    for (var i = 0; i < tabData.length; i++) {
        var tr = $("<tr></tr>");
        for(var j = 0; j < 5; j++){
            if(i%2 == 0){
                tr.append("<td class='odd'>" + tabData[i][j] + "</td>");
            }
            else{
                tr.append("<td class='even'>" + tabData[i][j] + "</td>");
            }
        }    
        $("#example").append(tr);
    }
}
</script>
</head>
<body>
     <!-- 時間日期查詢條件 -->
     <div id="regionSelect" style="width:100%;height:40px;margin-top: 10px">
         
     </div>
     <!-- 日期選擇 -->
     <div class="dateChoose" style="height:50px;">
        <ul id="timeSelect">
            <li class="dateChooseClick" datetype="all">所有時間</li>
            <li datetype="7day">最近7天</li>
            <li datetype="30day">最近30天</li>
            <li datetype="lastm">上個月</li>
            <div id="inputDateDiv">
                <!-- 開始時間 -->
                <span style="font-size:100%;line-height:24px">開始日期：</span>
                <span class="time" style="margin-top:2px;margin-right:0;">
                    <input type="text" id="startDateValue" name="startTime"  class="selectDate" readonly="true">
                       <a href="javascript:void(0)" class="datetime1" id="date1">時間</a>
                </span>
                <!-- 結束日期 -->
                <span style="font-size:100%;line-height:24px">結束日期：</span>
                <span class="time" style="margin-top:2px;margin-right:0;">
                    <input type="text" id="endDateValue" name="endTime" class="selectDate" readonly="readonly">
                    <a href="javascript:;" class="datetime1" id="date2">時間</a>
                </span>
                <!-- 查詢按鈕 -->
                <span><a class="btn" style="height:24px;line-height:24px" onclick="queryDiagramAndTable()" href="javascript:;">查詢</a></span>
            </div>    
        </ul>
            
    </div> 
    
    <!-- 圖片展現區 -->
     <div id="page1" style="width:100%;height:800px;">
        <div id="picPage1-1" style="width:100%;height:100%" class="clearfix" >
            <div style="width:50%;height:100%;float: left">
                <div class="title1" style="height:20px;margin:0"><span class="name">累計趨勢</span></div>
                <div id="picPage1-1-1" myattr="pic" style="width:98%;float: left"></div>
            </div>
            <div style="width:50%;height:100%;float: left">
                <div class="title1" style="height:20px;margin:0"><span class="name">每日趨勢</span></div>
                <div id="picPage1-1-2" myattr="pic" style="width:98%;float: left"></div>
            </div>
        </div>
        <!-- <div id="picPage1-2" style="height:100%;width:100%"  class="clearfix" >
            <div id="picTitle1-2" class="title1" style="height:20px"><span class="name">總體標籤分析</span></div>
            <div id="picPage1-2-1" myattr="pic" style="width:100%;float: left"></div>
            <div id="picPage1-2-2" myattr="pic" style="width:50%;float: left"></div>
        </div> -->
    </div>
    <!-- 表格展現 -->
    <div class="title1" style="height:20px;margin:0 0 10 0"><span class="name">設備操做趨勢表</span></div>
    <div class="tableBox">
           <table id="example" class="tableStyle">
            <thead>
                <tr>
                    <th title="日期">日期</th>
                    <th title="累計綁定用戶數">累計綁定用戶數</th>
                    <th title="累計綁定設備數">累計綁定設備數</th>
                    <!-- <th title="累計註冊用戶數">累計註冊用戶數</th> -->
                    <!-- <th title="活躍用戶">每日活躍用戶</th> -->
                    <th title="活躍設備">每日活躍設備</th>
                    <th title="APP活躍用戶">每日APP活躍用戶</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>

View Code

3.userAnalysisAjax.jsphtml

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String basePath = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>設備操做趨勢-空氣魔方</title>
<link rel="stylesheet" type="text/css"
    href="<%=basePath%>/theme/css/base.css" />
<link rel="stylesheet" type="text/css"
    href="<%=basePath%>/theme/css/common.css" />
<link rel="stylesheet" type="text/css"
    href="<%=basePath%>/components/jqueryUI/jquery-ui.css" />

<script type="text/javascript"
    src="<%=basePath%>/components/jq/jquery-1.8.2.min.js"></script>
<script type="text/javascript"
    src="<%=basePath%>/components/jqueryUI/jquery-ui.min.js"></script>
<script type="text/javascript"
    src="<%=basePath%>/components/datepicker/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript"
    src="<%=basePath%>/components/echarts/echarts.js"></script>
<script type="text/javascript"
    src="<%=basePath%>/common/js/citySelect.js"></script>
<script type="text/javascript"
    src="<%=basePath%>/common/js/lineEchart.js"></script>
<script type="text/javascript"
    src="<%=basePath%>/common/js/barEchart.js"></script>
<script type="text/javascript" src="<%=basePath%>/common/js/back2Top.js"></script>
<script type="text/javascript"
    src="<%=basePath%>/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
require.config({
    paths: {
        echarts: '<%=basePath%>/components/echarts'
    }
});

$(document).ready(function(){
    //設置總體圖片DIV的高度
    $('#page1').height($('body').height() - 100);
    
    //設置圖片展現區的高度
    $('div[myattr = "pic"]').each(function(){
        $(this).height($(this).parent().height() - 20);
    });
    
    //(1)加載累加的設備操做趨勢圖，加載當日的設備操做趨勢圖
    queryDiagramAndTable();
});

function search(){
    queryDiagramAndTable();
}

//根據時間查詢相應的數據
function queryDiagramAndTable(){
    var startDateValue = $('#startDateValue').val();
    var endDateValue = $('#endDateValue').val();
    var regionName = getRegionCode();
    var region = (REGION == 'ALL')?'':REGION;
    
//    endDateValue = getCorrectDateByInputDate(endDateValue);
    //(1)查詢累加的折線數據圖
    queryTotalDiagramData(startDateValue, endDateValue, region, regionName);
    //(2)查詢當前數據報表
    queryCurrentDiagramData(startDateValue, endDateValue, region, regionName);
    //(3)查詢數據表
//    queryDataTable(startDateValue, endDateValue, region, regionName);
}

//（1）查詢表數據，查詢累計的數據操做折線圖
function queryTotalDiagramData(startDateValue, endDateValue, region, regionName){
    var startTime = $("input:text[name='startTime']").val();
    var endTime = $("input:text[name='endTime']").val();
    //定義折線圖的選項
    var lineOption = loadLineOption();
    $.ajax({ 
        type: 'POST',
        url: '<%=basePath%>/device/showEcharts.do', 
        async: false,
        dataType: 'JSON',
        data:{startTime:startTime,endTime:endTime},
    //    data:{startTime:startDateValue, endTime: endDateValue, region: region, regionName: regionName},
        success: function(data){
            console.log(data);
            //設置累加圖表顯示
            //定義類型數組，設備數，用戶數
            lineOption.legend.data = data.legendDatas;
            //定義X座標顯示
            lineOption.xAxis[0].data = data.xDatas;
            //定義每種類型的顯示
            lineOption.series = data.series;
            //從新加載數據圖
            loadTotalDiagram(lineOption);
          },
          error:function(data){
              //alert("異常");
          } 
    });
}

//（2）查詢表數據，查詢累計的數據操做柱狀圖
function queryCurrentDiagramData(startDateValue, endDateValue, region, regionName){
    var startTime = $("input:text[name='startTime']").val();
    var endTime = $("input:text[name='endTime']").val();
    var lineOption = loadBarOption();
     $.ajax({ 
        url: '<%=basePath%>/device/showBarEcharts.do', 
        type: 'POST',
        data:{startTime:startTime,endTime:endTime},
        //data:{startTime:startDateValue, 'endTime': endDateValue, region: region, regionName: regionName},
        success: function(data){
            console.log(data);            
            //設置累加圖表顯示d
            //定義類型數組，設備數，用戶數
            lineOption.legend.data = data.legendDatas;
            //定義X座標顯示
            lineOption.xAxis[0].data = data.xDatas;
            //定義每種類型的顯示
            lineOption.series = data.series;
            //從新加載數據圖
            loadCurrentDiagram(lineOption);
          },
          error:function(){
              alert('請求異常');
          } 
    });
}

//(3)加載設備操做趨勢表 
function queryDataTable(startDateValue, endDateValue, region, regionName){
    //發送請求
    $.ajax({
        url: "<%=basePath%>/deviceOperateTrend/queryTableDataDiagram.do",
            type : 'POST',
            data : {
                'startTime' : startDateValue,
                'endTime' : endDateValue,
                region : region,
                regionName : regionName
            },
            success : function(data) {
                data = eval("(" + data + ")");
                //從新加載數據圖
                loadTableData(data);
            },
            error : function(e) {
                alert('請求異常');
            }
        });
    }

    //(1-1)加載累計設備數
    function loadTotalDiagram(lineOption) {
        require([ 'echarts', 'echarts/theme/macarons', 'echarts/chart/line' ],
                function(ec, theme) {
                    var myChart = ec.init(document
                            .getElementById("picPage1-1-1"), theme);
                    myChart.setOption(lineOption, true);
                });
    }

    //(2-1)加載當日設備數
    function loadCurrentDiagram(lineOption) {
        require([ 'echarts', 'echarts/theme/macarons', 'echarts/chart/bar' ],
                function(ec, theme) {
                    var myChart = ec.init(document
                            .getElementById("picPage1-1-2"), theme);
                    myChart.setOption(lineOption, true);
                });
    }

    //(3-1)添加表格數據
    function loadTableData(tabRealData) {
        tabData = (tabRealData == undefined ? tabData : tabRealData);
        $("#example").find("tr:gt(0)").remove();
        //獲得表格有多少列
        for (var i = 0; i < tabData.length; i++) {
            var tr = $("<tr></tr>");
            for (var j = 0; j < 5; j++) {
                if (i % 2 == 0) {
                    tr.append("<td class='odd'>" + tabData[i][j] + "</td>");
                } else {
                    tr.append("<td class='even'>" + tabData[i][j] + "</td>");
                }
            }
            $("#example").append(tr);
        }
    }
</script>
</head>
<body>
    <div style="margin:10px 30px;">
        開始時間<input class="Wdate" name="startTime" type="text" onClick="WdatePicker()">
        結束時間<input class="Wdate" name="endTime" type="text" onClick="WdatePicker()">
        <input type="button" value="檢索" onclick="search()">
    </div>

    <!-- 圖片展現區 -->
    <div id="page1" style="width: 100%; height: 800px;">
        <div id="picPage1-1" style="width: 100%; height: 100%"
            class="clearfix">
            <div style="width: 100%; height: 100%;">
                <div class="title1" style="height: 20px; margin: 0">
                    <span class="name">折線圖趨勢</span>
                </div>
                <div id="picPage1-1-1" myattr="pic" style="width: 98%; float: left"></div>
            </div>
            <div style="width: 100%; height: 100%;">
                <div class="title1" style="height: 20px; margin: 0">
                    <span class="name">柱狀圖趨勢</span>
                </div>
                <div id="picPage1-1-2" myattr="pic" style="width: 98%; float: left"></div>
            </div>
        </div>
        <!-- <div id="picPage1-2" style="height:100%;width:100%"  class="clearfix" >
            <div id="picTitle1-2" class="title1" style="height:20px"><span class="name">總體標籤分析</span></div>
            <div id="picPage1-2-1" myattr="pic" style="width:100%;float: left"></div>
            <div id="picPage1-2-2" myattr="pic" style="width:50%;float: left"></div>
        </div> -->
    </div>
    <!-- 表格展現 -->
    <!-- <div class="title1" style="height:20px;margin:0 0 10 0"><span class="name">設備操做趨勢表</span></div>
    <div class="tableBox">
           <table id="example" class="tableStyle">
            <thead>
                <tr>
                    <th title="日期">日期</th>
                    <th title="累計綁定用戶數">累計綁定用戶數</th>
                    <th title="累計綁定設備數">累計綁定設備數</th>
                    <th title="累計註冊用戶數">累計註冊用戶數</th>
                    <th title="活躍用戶">每日活躍用戶</th>
                    <th title="活躍設備">每日活躍設備</th>
                    <th title="APP活躍用戶">每日APP活躍用戶</th>
                </tr>
            </thead>
        </table>
    </div> -->
</body>
</html>

View Code

4.userAnalysisList.jspjava

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% String basePath = request.getContextPath();%>
<html>
<head>
<title>設備操做趨勢主界面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<link rel="stylesheet" type="text/css" href="<%=basePath%>/theme/css/base.css" />
   
<script src="<%=basePath%>/components/jq/jquery-1.8.2.min.js"></script>
<script src="<%=basePath%>/js/common/index.js"></script>
<script type="text/javascript">
//設置默認訪問的界面
var indexPage = "<%=basePath%>/device/userAnalysisAjax.do";

$(document).ready(function(){
    //綁定tab頁
    $("#tabs span").click(function(){
        var tabHtml = $(this).html();
        switch(tabHtml){
            case "空氣魔方":
                $("#mainframe").attr("src", "<%=basePath%>/device/userAnalysisAjax.do");
                break;
            default:
                break;
        }
        $(this).addClass('active').siblings().removeClass('active');
    });    
});
</script>
</head>
<body id="indexBody">
    <div id="navigation" class="item" style="width:100%; height:100%;margin-bottom: 0;">
        <div id="nav">
            <i class="home"></i>
            <span class="active">KPI</span>
            <span class="active">&gt;</span>
            <!-- <span class="active">空氣魔方KPI</span>
            <span class="active">&gt;</span> -->
            <span class="">商品數據實時分析</span>
        </div>
        <div id="wrap" class="wrap" style="padding: 15px 0 0 20px">
            <!-- <div id="tabs" class="selectTab title" style="margin: 4px 0 0 0">
                <span>所有</span>
                <span>空調</span>
                <span>空氣盒子</span>
                <span class="active lfborder">空氣魔方</span>
                <span>淨化器</span>
                <span>空氣mini</span>
            </div> -->
            <iframe frameborder="0" id="mainframe" src="" scrolling="scrolling" style="overflow-x: hidden; width: 100%;height:800px;">
            </iframe>
        </div>
    </div>
</body>    
</html>

View Code

5.DeviceController.javajquery

package com.tgb.web.controller;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang.StringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.tgb.web.pojo.BarEchart;
import com.tgb.web.pojo.LineEchart;
import com.tgb.web.service.DeviceService;

@Controller
@RequestMapping("/device")
public class DeviceController {

    @Resource
    private DeviceService deviceService;

    @RequestMapping(value = "/deviceList.do")
    public String deviceEchartsList(HttpServletRequest request,
            ModelMap modelMap) {
        return "/device/deviceOperateTrendIndex";
    }

    @RequestMapping(value = "/deviceListAjax.do")
    public String deviceEchartsListAjax(HttpServletRequest request,
            ModelMap modelMap) {
        return "/device/deviceOperateTrend_Kqmf";
    }

    @RequestMapping(value = "/showEcharts.do", method = RequestMethod.POST)
    @ResponseBody
    public LineEchart deviceEcharts(HttpServletRequest request,
            ModelMap modelMap) {
        String startTime = request.getParameter("startTime");
        String endTime = request.getParameter("endTime");
        if (StringUtils.isEmpty(startTime)) {
            startTime = "2015-05-14";
        }
        if (StringUtils.isEmpty(endTime)) {
            endTime = "2015-05-25";
        }

        //LineEchart lineEchart = deviceService.getDeviceData();
        LineEchart lineEchart = deviceService.getLineDataByName2(startTime,endTime);
        return lineEchart;
    }

    @RequestMapping(value = "/showBarEcharts.do", method = RequestMethod.POST)
    @ResponseBody
    public BarEchart showBarEcharts(HttpServletRequest request,
            ModelMap modelMap) {
        String startTime = request.getParameter("startTime");
        String endTime = request.getParameter("endTime");
        if (StringUtils.isEmpty(startTime)) {
            startTime = "2015-05-14";
        }
        if (StringUtils.isEmpty(endTime)) {
            endTime = "2015-05-25";
        }
        BarEchart barEchart = deviceService.getBarDataByName(startTime, endTime);
        return barEchart;
    }

    @RequestMapping(value = "/userAnalysisList.do")
    public String userAnalysisList(HttpServletRequest request, ModelMap modelMap) {
        return "/device/userAnalysisList";
    }

    @RequestMapping(value = "/userAnalysisAjax.do")
    public String userAnalysisListAjax(HttpServletRequest request,
            ModelMap modelMap) {
        return "/device/userAnalysisAjax";
    }
}

View Code

6.DeviceService.javaweb

package com.tgb.web.service;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.tgb.web.dao.DeviceDao;
import com.tgb.web.dao.admin.SalesManageDao;
import com.tgb.web.entity.admin.salesoutput;
import com.tgb.web.pojo.BarEchart;
import com.tgb.web.pojo.LineEchart;
import com.tgb.web.pojo.SimpleBar;
import com.tgb.web.pojo.SimpleLine;
import com.tgb.web.util.DateUtil;

@Service
public class DeviceService {

    @Resource
    private DeviceDao deviceDao;
    @Resource
    private SalesManageDao saleManageDao;

    SimpleDateFormat simpleFormat = new SimpleDateFormat("yyyy-MM-dd");

    public LineEchart getDeviceData() {

        List<String> xdatas = new ArrayList<String>();
        xdatas.add("2015-2-3");
        xdatas.add("2016-2-3");
        xdatas.add("2017-2-3");
        xdatas.add("2018-2-3");
        xdatas.add("2019-2-3");

        SimpleLine simple = new SimpleLine();
        simple.setName("蘋果");
        List<String> simpleLineDatas = new ArrayList<String>();
        simpleLineDatas.add("20");
        simpleLineDatas.add("100");
        simpleLineDatas.add("50");
        simpleLineDatas.add("200");
        simpleLineDatas.add("500");
        simple.setData(simpleLineDatas);
        List<SimpleLine> seriesList = new ArrayList<SimpleLine>();
        seriesList.add(simple);

        SimpleLine simple2 = new SimpleLine();
        simple2.setName("桔子");
        List<String> simpleLineDatas1 = new ArrayList<String>();
        simpleLineDatas1.add("40");
        simpleLineDatas1.add("200");
        simpleLineDatas1.add("100");
        simpleLineDatas1.add("400");
        simpleLineDatas1.add("1000");
        simple2.setData(simpleLineDatas1);
        seriesList.add(simple2);

        SimpleLine simple3 = new SimpleLine();
        simple2.setName("西紅柿");
        List<String> simpleLineDatas2 = new ArrayList<String>();
        simpleLineDatas2.add("400");
        simpleLineDatas2.add("400");
        simpleLineDatas2.add("200");
        simpleLineDatas2.add("800");
        simpleLineDatas2.add("2000");
        simple3.setData(simpleLineDatas2);
        seriesList.add(simple3);

        LineEchart lineEchart = new LineEchart();
        List<String> legendDatas = new ArrayList<String>();// //定義類型數組，設備數，用戶數
        legendDatas.add("蘋果");
        legendDatas.add("桔子");
        legendDatas.add("西紅柿");

        lineEchart.setxDatas(xdatas);
        lineEchart.setSeries(seriesList);
        lineEchart.setLegendDatas(legendDatas);
        return lineEchart;
    }

    public BarEchart getBarDeviceData() {
        List<String> xdatas = new ArrayList<String>();
        xdatas.add("2015-2-3");
        xdatas.add("2016-2-3");
        xdatas.add("2017-2-3");
        xdatas.add("2018-2-3");
        xdatas.add("2019-2-3");

        SimpleBar simple = new SimpleBar();
        simple.setName("蒸發量");
        List<String> bdata = new ArrayList<String>();
        bdata.add("40");
        bdata.add("60");
        bdata.add("100");
        bdata.add("200");
        bdata.add("50");
        simple.setData(bdata);
        List<SimpleBar> series = new ArrayList<SimpleBar>();
        series.add(simple);

        SimpleBar simple2 = new SimpleBar();
        simple2.setName("降水量");
        List<String> bdata2 = new ArrayList<String>();
        bdata2.add("80");
        bdata2.add("120");
        bdata2.add("200");
        bdata2.add("400");
        bdata2.add("100");
        simple2.setData(bdata2);
        series.add(simple2);

        BarEchart barEchart = new BarEchart();
        barEchart.setxDatas(xdatas);
        barEchart.setSeries(series);
        return barEchart;
    }

    /**
     * 操做折線圖
     * 
     * @param startTime
     * @param endTime
     * @return
     */
    public LineEchart getLineDataByName2(String startTime, String endTime) {
        DateUtil date = new DateUtil();
        // 獲得時間數組
        List<String> timeList = date.getDateArrByStartAndEndTime(startTime,
                endTime);
        List<List<salesoutput>> bigList = new ArrayList<List<salesoutput>>();

        List<salesoutput> salist = saleManageDao
                .getSaleOutputDataByStatusGroupByGoodsname("0");
        for (salesoutput sa : salist) {
            List<salesoutput> datalist = deviceDao
                    .getSaleOutputDataByManyFiled("", sa.getGoodsname(), "",
                            startTime, endTime, "0");
            bigList.add(datalist);
        }

        List<String> xdatas = new ArrayList<String>();// 單個折線上全部的對應的日期
        // SimpleLine simple = new SimpleLine();
        // List<String> simpleLineDatas = new ArrayList<String>();// 單個折線上的數據

        LineEchart lineEchart = new LineEchart();

        List<String> legendDatas = new ArrayList<String>();// 圖例數組
        List<SimpleLine> seriesList = new ArrayList<SimpleLine>();// 折現數組
        
        for (List<salesoutput> li : bigList) {
            xdatas.clear();//將橫軸的日期數據清空，防止重複出現
            
            List<String> simpleLineDatas = new ArrayList<String>();
            for (String str : timeList) {
                if (bigList.size() > 0) {
                    String data = "0";
                    for (salesoutput sa : li) {
                        if (str.equals(String.valueOf(simpleFormat.format(sa
                                .getInputdate())))) {
                            data = String.valueOf(sa.getSonum());
                            break;
                        }
                    }
                    simpleLineDatas.add(data);

                } else {
                    simpleLineDatas.add("0");
                }
                xdatas.add(str);
            }
            
            SimpleLine simple = new SimpleLine();
            for (salesoutput sa : li) {
                legendDatas.add(sa.getGoodsname());
                simple.setName(sa.getGoodsname());
                break;
            }

            simple.setData(simpleLineDatas);
            seriesList.add(simple);

            
            lineEchart.setxDatas(xdatas);
            lineEchart.setSeries(seriesList);
            lineEchart.setLegendDatas(legendDatas);

        }
        return lineEchart;
    }

    /**
     * 操做折線圖
     * 
     * @param startTime
     * @param endTime
     * @return
     */
    public LineEchart getLineDataByName(String startTime, String endTime) {
        DateUtil date = new DateUtil();
        // 獲得時間數組
        List<String> timeList = date.getDateArrByStartAndEndTime(startTime,
                endTime);

        List<String> xdatas = new ArrayList<String>();// 單個折線上全部的對應的日期
        SimpleLine simple = new SimpleLine();
        List<String> simpleLineDatas = new ArrayList<String>();// 單個折線上的數據

        SimpleLine simple2 = new SimpleLine();
        List<String> simpleLineDatas2 = new ArrayList<String>();// 單個折線上的數據

        // 銷售訂單號，商品名稱，商品編號，開始時間，結束時間 ,狀態
        List<salesoutput> list = deviceDao.getSaleOutputDataByManyFiled("",
                "蘋果", "", startTime, endTime, "0");
        List<salesoutput> list2 = deviceDao.getSaleOutputDataByManyFiled("",
                "西紅柿", "", startTime, endTime, "0");

        for (String str : timeList) {
            if (list != null && list.size() > 0) {
                String data = "0";
                String data2 = "0";
                for (salesoutput sa : list) {
                    if (str.equals(String.valueOf(simpleFormat.format(sa
                            .getInputdate())))) {
                        data = String.valueOf(sa.getSonum());
                        break;
                    }
                }
                for (salesoutput sa2 : list2) {
                    if (str.equals(String.valueOf(simpleFormat.format(sa2
                            .getInputdate())))) {
                        data2 = String.valueOf(sa2.getSonum());
                        break;
                    }
                }
                simpleLineDatas.add(data);
                simpleLineDatas2.add(data2);
            } else {
                simpleLineDatas.add("0");
                simpleLineDatas2.add("0");
            }
            xdatas.add(str);
        }

        simple.setName("蘋果");
        simple.setData(simpleLineDatas);
        simple2.setName("西紅柿");
        simple2.setData(simpleLineDatas2);

        List<SimpleLine> seriesList = new ArrayList<SimpleLine>();// 折現數組
        seriesList.add(simple);
        seriesList.add(simple2);

        LineEchart lineEchart = new LineEchart();
        List<String> legendDatas = new ArrayList<String>();// 圖例數組
        legendDatas.add("蘋果");
        legendDatas.add("西紅柿");

        lineEchart.setxDatas(xdatas);
        lineEchart.setSeries(seriesList);
        lineEchart.setLegendDatas(legendDatas);

        return lineEchart;
    }

    /**
     * 操做柱狀圖
     * 
     * @param startTime
     * @param endTime
     * @return
     */
    public BarEchart getBarDataByName(String startTime, String endTime) {
        DateUtil date = new DateUtil();
        // 獲得時間數組
        List<String> timeList = date.getDateArrByStartAndEndTime(startTime,
                endTime);

        List<String> xdatas = new ArrayList<String>();// 單個折線上全部的對應的日期
        SimpleBar simple = new SimpleBar();
        List<String> simpleBarDatas = new ArrayList<String>();// 單個折線上的數據

        SimpleBar simple2 = new SimpleBar();
        List<String> simpleBarDatas2 = new ArrayList<String>();// 單個折線上的數據

        // 銷售訂單號，商品名稱，商品編號，開始時間，結束時間 ,狀態
        List<salesoutput> list = deviceDao.getSaleOutputDataByManyFiled("",
                "蘋果", "", startTime, endTime, "0");
        List<salesoutput> list2 = deviceDao.getSaleOutputDataByManyFiled("",
                "西紅柿", "", startTime, endTime, "0");

        for (String str : timeList) {
            if (list != null && list.size() > 0) {
                String data = "0";
                String data2 = "0";
                for (salesoutput sa : list) {
                    if (str.equals(String.valueOf(simpleFormat.format(sa
                            .getInputdate())))) {
                        data = String.valueOf(sa.getSonum());
                        break;
                    }
                }
                for (salesoutput sa2 : list2) {
                    if (str.equals(String.valueOf(simpleFormat.format(sa2
                            .getInputdate())))) {
                        data2 = String.valueOf(sa2.getSonum());
                        break;
                    }
                }
                simpleBarDatas.add(data);
                simpleBarDatas2.add(data2);
            } else {
                simpleBarDatas.add("0");
                simpleBarDatas2.add("0");
            }
            xdatas.add(str);
        }

        simple.setName("蘋果");
        simple.setData(simpleBarDatas);
        simple2.setName("西紅柿");
        simple2.setData(simpleBarDatas2);

        List<SimpleBar> seriesList = new ArrayList<SimpleBar>();// 折現數組
        seriesList.add(simple);
        seriesList.add(simple2);

        BarEchart barEchart = new BarEchart();
        List<String> legendDatas = new ArrayList<String>();// 圖例數組
        legendDatas.add("蘋果");
        legendDatas.add("西紅柿");

        barEchart.setxDatas(xdatas);
        barEchart.setSeries(seriesList);
        barEchart.setLegendDatas(legendDatas);

        return barEchart;
    }

}

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。