ECharts 使用实例
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>
运行实例效果图展示如下：
ECharts 使用实例的更多相关文章
- 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)适用于百度地图的所有接 ...
- Echarts个人实例
1.deviceOperateTrendIndex.jsp <%@ page language="java" contentType="text/html; cha ...
- 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 ...
随机推荐
- Bubble Sort 冒泡排序
//Bubble Sort ( O(n²)) public class TestBubbleSort { public int[] bubbleSortArray(int[] arr){ ; i &l ...
- php 实现购物车
<?php class Cart{ public function Cart() { if(!isset($_SESSION['cart'])){ ...
- eclipse指定启动时的jdk(xjl456852原创)
在eclipse安装目录中找到eclipse.ini 在第一行配置(即可启动按指定版本的jdk启动eclipse): -vm D:\soft\Java\jre8\bin\server\jvm.dll ...
- Javascript:重用之道
近期写了大量的js,愈发觉得自己的代码过于冗余,所以,利用周末的时间研习代码重用之道,有了这篇博文所得: 重用代码: 1.尽量保证 HTML 代码结构一致,可以通过父级选取子元素 2.把核心主程序实现 ...
- vmplayer中的fedora20无法进入图形界面
新装了台fedora20的虚拟机,安装升级了一些东西后.启动时过了fedora的logo画面后就是黑屏. 也没提示不论什么错误,好在shell还能进去.查看/var/log/anaconda/sysl ...
- SRM 588 D2 L2：GUMIAndSongsDiv2，冷静思考，好的算法简洁明了
题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12707 算法决定一切,这道题目有很多方法解,个人认为这里 ve ...
- Caused by: java.lang.ClassNotFoundException: javassist.ClassPool
1.错误原因 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...
- java基础之代理
代理的定义,代理的应用,代理的特性
- asp.net操作xml（增删查改）
asp.net操作xml 1.xml文档Products.xml <?xml version="1.0" encoding="utf-8"?> &l ...
- Asp.Net EF Code First 简单入门
今天在上班期间花了点时间学习了一下微软的EntityFramework Code First技术,这篇文章只是简单的入门,不多废话,下面直入主题. 一.首先添加一个解决方案,接着添加一个web网站,D ...