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">></span> <!-- <span class="active">空气魔方KPI</span> <span class="active">></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">></span> <!-- <span class="active">空气魔方KPI</span> <span class="active">></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; } }
