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;
} }
Echarts个人实例的更多相关文章
- ECharts 使用实例
HTML与JavaScript代码: <%@ page language="java" contentType="text/html; charset=UTF-8& ...
- Django+Echarts画图实例
所有演示均基于Django2.0 阅读此篇文章你可以: 了解Django中aggregate和annotate函数的使用方法 获取一个Django+Echarts绘制柱状图的完整示例 需求说明 一张会 ...
- Baidu - Echarts 地图实例测试，并绘制平滑圆弧路径
百度Echarts实例地址: http://echarts.baidu.com/examples.html 同事想做一个地图,地图上的几个点通过动态的线连接起来.但是在实例里没找到类似的. 然后仔细分 ...
- 百度地图和echarts结合实例
1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于所有的echart的操作和接口,百度地图对象(bdMap)适用于百度地图的所有接 ...
- webpack echarts配置实例
简单介绍 本例介绍怎样在webpack中构建依赖echats的项目,echarts有好几种方式引入项目: 标签单文件引入:自1.3.5開始,ECharts提供标签式引入.假设项目本身并非基于模块化开发 ...
- echarts常用实例
1.柱状图: 1.需要动态加载的参数是x轴以及柱状图的数值,legendData和seriesData.demo使用是可以直接写死参数,在执行this.initChart()方法即可.具体代码可以参数 ...
- echarts在.Net中使用实例(一) 简单的Demo
前言 这个必须要有前言,即便很短,对于有强迫症的人来说不容易啊.言归正传,之前做图一直使用rdlc自带的格式,虽然任务完成,但是一直觉得不太美观, 空余时间开始找其他的插件,终于找到了Highchar ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 【Echarts每天一例】-1
官方网址:http://echarts.baidu.com/doc/example/line1.html 使用百度echarts官方实例:http://ask.csdn.net/questions/1 ...
随机推荐
- ［转］iOS学习之UINavigationController详解与使用(二)页面切换和segmentedController
转载地址:http://blog.csdn.net/totogo2010/article/details/7682433 iOS学习之UINavigationController详解与使用(一)添加U ...
- ［转］ Xcode4.4.1下安装高德地图详细教程
转载地址:http://blog.csdn.net/mad1989/article/details/7913404 此教程和官方的没有太大区别,省略了好多没用的步骤,添加framework的方式是最新 ...
- Python下科学计算包numpy和SciPy的安装
转载自:http://blog.sina.com.cn/s/blog_62dfdc740101aoo6.html Python下大多数工具包的安装都很简单,只需要执行 “python setup.py ...
- js 精确小数俩位
function toDecimal2(x) { var f = parseFloat(x); if ...
- poj3667 Hotel
此题不难却易出错,很能考察思维的严谨性. 指定ll为区间内左端顶格数的连续可利用房间,rr为右端顶格数的数值,mm为区间内最长的连续可利用房间数. 在查询的时候,由于要返回最靠左的区间左端点,使得在该 ...
- js判断用户浏览器是PC还是手机，自动跳转
browserRedirect(); function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); ...
- register_chrdev、register_chrdev_region以及alloc_chrdev_region之间的区别
register_chrdev:Linux2.6.30之前所用,不用定义cdev:但 如果是register_chrdev 注册的话,这个时候,分配的次设备号,是从0~255,这样子的话,就分配的范围 ...
- 附加数据库对于服务器失败(Microsoft.SqlServer.Smo),无法升级数据库，因为它是只读的，或者具有只读文件
今天在将一个 SQL Server 2000 数据库附加到 SQL Server 2005时出现如下的错误:附加数据库对于服务器失败(Microsoft.SqlServer.Smo),无法升级数据库t ...
- 数据库连接池系列之——c3p0
c3p0的jar包是:c3p0-0.9.1.jar <bean id = "dataSource" class = "com.mchange.v2.c3p0.Com ...
- Linux运维命令之一
释放内存:syncecho 3 > /proc/sys/vm/drop_caches Linux查看Dell服务器型号命令:dmidecode | grep "Product Name ...