Echarts个人实例 / 憋错料

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

}

时间： 2024-10-11 10:23:14

Echarts个人实例

Echarts个人实例的相关文章

echarts单个实例包含多个grid，标题分别居中

ECharts系列 - 柱状图（条形图）实例一

echarts在.Net中使用实例(一) 简单的Demo

ECharts系列 - 地图实例一

Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

ECharts 与struts的后台交互之柱状图

Echarts柱状图的学习总结（一）

echarts初探

echarts修改X、 Y坐标轴字体的颜色