HTML与JavaScript代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../header.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>物联云仓 | 花果山</title>
<style> /*Base*/
body {margin:0; padding:0; font-size:12px;font-family:"Microsoft YaHei","微软雅黑";}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
a{text-decoration:none}
a:hover{text-decoration:none;}
.clear{clear:both;font-size:0px;} .n-chartinfo{margin:2%;}
.n-chartinfo .rowchart{float:left;width:30%;margin-right:1.7%;margin-left:1.6%;}
.n-chartinfo .rowchart dt{background:#5bb4d8;border-radius:16px 16px 0px 0px;display:block;height:130px;line-height:90px;text-align:center;color:#fff;font-weight:lighter;font-size:2.2em;}
.n-chartinfo .rowchart em{position:absolute;z-index:11;margin-top:89px;margin-left:11%;}
@media (min-width:900px){
.n-chartinfo .rowchart em{position:absolute;z-index:11;margin-top:89px;margin-left:10.5%;}
}
@media (min-width:1200px){
.n-chartinfo .rowchart em{position:absolute;z-index:11;margin-top:89px;margin-left:11.5%;}
}
@media (min-width:1400px){
.n-chartinfo .rowchart em{position:absolute;z-index:11;margin-top:89px;margin-left:12%;}
}
.n-chartinfo .rowchart dd{border:1px solid #e1e6ef;border-top:none;padding:50px 10px 10px 10px;}
.n-chartinfo .rowchart dd li{height:60px;line-height:60px;border-bottom:1px dashed #e5ebf8;white-space:nowrap;overflow:hidden;}
.n-chartinfo .rowchart dd li span{width:50%;display:inline-block;font-size:1.3em;font-weight:lighter;color:#6f7b91;}
.n-chartinfo .rowchart dd li .text-right{text-align:right;width:40%;}
.n-chartinfo .rowchart dd li .m-left{padding-left:3%;width:57%;}
@media (min-width:1150px){
.n-chartinfo .rowchart dd li span{width:50%;display:inline-block;font-size:1.4em;font-weight:lighter;color:#6f7b91;}
.n-chartinfo .rowchart dd li .text-right{text-align:right;width:42%;}
.n-chartinfo .rowchart dd li .m-left{padding-left:3%;width:55%;}
}
@media (min-width:1350px){
.n-chartinfo .rowchart dd li span{width:50%;display:inline-block;font-size:1.6em;font-weight:lighter;color:#6f7b91;}
.n-chartinfo .rowchart dd li .text-right{text-align:right;width:47%;}
.n-chartinfo .rowchart dd li .m-left{padding-left:3%;width:50%;}
}
@media (min-width:1500px){
.n-chartinfo .rowchart dd li span{width:50%;display:inline-block;font-size:1.8em;font-weight:lighter;color:#6f7b91;}
.n-chartinfo .rowchart dd li .text-right{text-align:right;width:50%;}
.n-chartinfo .rowchart dd li .m-left{padding-left:3%;width:47%;}
}
.n-chartinfo .rowchart dd li strong{font-weight:lighter;color:#fe5a5b;margin-right:15px;}
.n-chartinfo .rowchart .red{background:#f47564;}
.n-chartinfo .rowchart .green{background:#4fc2b9;} /*EchartBox*/
.n-chartinfo .echartbox{margin-right:1.7%;margin-left:1.6%;border:1px solid #efecec;}
.n-chartinfo .echartbox .title{background:#ededef;height:44px;border:1px solid #f6f7fb;line-height:44px;text-align:center;font-size:1.8em;font-weight:lighter;color:#444;}
.n-chartinfo .echartbox .n-echart{border-top:1px solid #e3e5f1;padding:5px;}
</style>
</head>
<script src="<%=staticUrl%>/dist/echarts.js"></script>
<body> <!--Chart-->
<div class="n-chartinfo">
<div class="rowchart">
<dl>
<em><img src="<%=staticUrl%>/images/n-wms-icon-yw.png"></em>
<dt>待处理业务</dt>
<dd>
<ul>
<li><span class="text-right">入库计划 :</span><span class="m-left"><strong id="WaitIntoSum">0</strong>单</span></li>
<li><span class="text-right">收货 :</span><span class="m-left"><strong id="WaitReceiveSum">0</strong>单</span></li>
<li><span class="text-right">出库确认 :</span><span class="m-left"><strong id="WaitOutSum">0</strong>单</span></li>
</ul>
</dd>
</dl>
</div>
<div class="rowchart">
<dl>
<em><img src="<%=staticUrl%>/images/n-wms-icon-sp.png"></em>
<dt class="green">今日商品累计</dt>
<dd>
<ul>
<li><span class="text-right">入库商品数 :</span><span class="m-left"><strong id="TodayIntoItemsSum">0</strong>件</span></li>
<li><span class="text-right">出库商品数 :</span><span class="m-left"><strong id="TodayOutItemsSum">0</strong>件</span></li>
<li><span class="text-right">库存商品数 :</span><span class="m-left"><strong id="TodayStockItemsSum">0</strong>件</span></li>
</ul>
</dd>
</dl>
</div>
<div class="rowchart">
<dl>
<em><img src="<%=staticUrl%>/images/n-wms-icon-ck.png"></em>
<dt class="red">仓库数量</dt>
<dd>
<ul>
<li><span class="text-right">仓库数量总计 :</span><span class="m-left"><strong id="CWareSum">0</strong>个,货位<strong id="CWareLocationSum">0</strong>个</span></li>
<li><span class="text-right">正在使用 :</span><span class="m-left"><strong id="CWareLocationUsingSum">0</strong>个</span></li>
<li><span class="text-right">空闲 :</span><span class="m-left"><strong id="CWareLocationFreeSum">0</strong>个</span></li>
</ul>
</dd>
</dl>
</div>
<div class="clear"></div>
</div> <!--EchartBox-->
<div class="n-chartinfo">
<div class="echartbox">
<div class="title">货位统计</div>
<div id="locationChart" class="n-echart" style="height: 300px;">
这里是Echart插件
</div>
<div class="title">仓库商品流转统计</div>
<div id="itemChart" class="n-echart" style="height: 300px;">
这里是Echart插件
</div>
</div>
</div>
<script type="text/javascript"> $(document).ready(function(){
loadCountWaitToProcessTasks();
loadCountTodaysItems();
loadCountWarehouseSituation();
loadLocationChart();
loadItemChart();
}); var loadCountWaitToProcessTasks=function(){
$.get('charts/unProcessTasks.html',function(data){
if(data){
data=eval("("+data+")");
$("#WaitIntoSum").html(data.intoPlanItemSum);
$("#WaitReceiveSum").html(data.receiveItemSum);
$("#WaitOutSum").html(data.outConfirmSum);
}
});
}
var loadCountTodaysItems=function(){
$.get('charts/countItemsOfToday.html',function(data){
if(data){
data=eval("("+data+")");
$("#TodayIntoItemsSum").html(data.intoItemSum);
$("#TodayOutItemsSum").html(data.outItemSum);
$("#TodayStockItemsSum").html(data.stockItemSum);
}
});
}
var loadCountWarehouseSituation=function(){
$.get('charts/countWarehouseSituation.html',function(data){
if(data){
data=eval("("+data+")");
$("#CWareSum").html(data.warehouseSum);
$("#CWareLocationSum").html(data.locationSum);
$("#CWareLocationUsingSum").html(data.usingLocationNum);
$("#CWareLocationFreeSum").html(data.freeLocationNum);
}
});
} var loadLocationChart=function(){
var url = "charts/countWarehouseLocationUsing.html?&res="+Math.random();
$.get(url,function(result){
result=eval('('+result+')');
// 路径配置
require.config({
paths: {
echarts: '<%=staticUrl%>/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('locationChart'));
var option = {
color:['#F47564','#E0E1E5'],
title:{
text: ''//标题
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
x:'left',
data:['已使用','未使用']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
//axisLabel:{ interval:0}, //具体情况而定
type : 'category',
data : result.warehouseName
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'已使用',
type:'bar',
stack: '搜索引擎',
itemStyle : { normal: {label : {show: true, position: 'inside'} }},
data:result.usingLocationNum
},
{
name:'未使用',
type:'bar',
stack: '搜索引擎',
itemStyle : { normal: {label : {show: true, position: 'inside'} }},
data:result.unUsinglocationSum
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
});
}
var loadItemChart=function(){
var url="charts/countItemstransfer.html?"+"&res="+Math.random();
$.get(url,function(result){
result=eval('('+result+')');
// 路径配置
require.config({
paths: {
echarts: '<%=staticUrl%>/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('itemChart'));
var option = {
color:['#5CB4D8','#FC773C','#49C543'],
title:{
text: ''//标题
},
tooltip : {
trigger: 'axis'
},
legend: {
x:'left',
data:['库存商品数','入库商品数','出库商品数']
},
xAxis : [
{
//axisLabel:{ interval:0}, //具体情况而定
type : 'category',
data :result.wmitDate
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'库存商品数',
type:'bar',
itemStyle : { normal: {label : {show: true, position: 'top'}}},
data:result.wmitStockNum
},
{
name:'入库商品数',
type:'bar',
itemStyle : { normal: {label : {show: true, position: 'top'}}},
data:result.wmitIntoItemNum
},
{
name:'出库商品数',
type:'bar',
itemStyle : { normal: {label : {show: true, position: 'top'}}},
data:result.wmitOutItemNum
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
});
}
</script>
</body>
</html>
运行实例效果图展示如下：