Echarts个人实例

时间：2021-03-07 14:32:11

1.deviceOperateTrendIndex.jsp

<%@ 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>

2.deviceOperateTrend_Kqmf.jsp

<%@ 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>

3.userAnalysisAjax.jsp

<%@ 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>

4.userAnalysisList.jsp

<%@ 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>

5.DeviceController.java

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";

    }

}

6.DeviceService.java

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;

    }

}

相关文章