码迷，mamicode.com
首页 > 其他好文 > 详细

Echarts个人实例

时间：2016-04-16 12:17:34      阅读：181      评论：0      收藏：0      [点我收藏+]

标签：

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>
View Code

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>
View Code

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>
View Code

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>
View Code

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";
    }
}
View Code

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

}
View Code

 

Echarts个人实例

标签：

原文地址：http://www.cnblogs.com/cxxjohnson/p/5397896.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！