ECharts 使用实例
2016-01-13 17:03
155 查看
HTML与JavaScript代码：
View Code
运行实例效果图展示如下：
<%@ 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>View Code
运行实例效果图展示如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Linux下nfs服务器搭建技巧
- LInux 拨号上网
- 程序退到后台的时候，所有线程被挂起，系统回收所有的socket资源问题及解决方案
- Linux Study之--通过udev管理设备
- * Java 两个 Java bean 之间的赋值
- Effective Java读书笔记（二）
- 微微信.NET：开源的ASP.NET微信公众号应用平台
- 3、NASA NIST Big Data Architecture
- python错误收集
- javaHL(JNI) Not Available
- Virtualbox 虚拟机Red Hat Enterprise 6.5 x86_64 安装oracle11g数据库
- SQL Server 数据库中的 MD5 和 SHA1
- hadoop 2.6 IntrusiveCollection 源代码分析
- 【Python】线程的创建、执行、互斥、同步、销毁
- EasyTouch事件发生时刻
- 20160113第一个ANDRIOD开发日志
- BZOJ 3203 Sdoi2013 保护出题人 凸包+三分
- SASS用法指南
- spring and hibernate mixed
- Win7下JDK环境变量的配置