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 ...
随机推荐
- 利用Visual Studio寻找C#程序必要的运行库文件
在工程打包中,有时候很头痛的就是运行所需要的库文件不能够全面的包含进来,特别是有时候调用了一系列外部扩展.对于这些问题,我们可以借用Visual Studio的打包功能帮助我们寻找软件运行必须的库文件 ...
- 在 Java 应用程序中使用 Elasticsearch
如果您使用过 Apache Lucene 或 Apache Solr,就会知道它们的使用体验非常有趣.尤其在您需要扩展基于 Lucene 或 Solr 的解决方案时,您就会了解 Elasticsear ...
- Gwt ListBox选中自动触发事件
以前用TreeView显示,需求更改 需要做一个ListBox控件显示数据,和HTML中的<Select>标签一样 编辑时候自动触发选中的数据子类: 1.只要自动触发了rootListBo ...
- js笔记01
js编写页面特效动态脚本类型的语言变量:存储数据(日常生活中的东西,比如电视,手机,电脑,出生年份...)语法: var obj=value; obj不能为数字开头,且区分大小写 value对应数据类 ...
- springMVC之annotation优化
1.在之前配置的spring配置文件中会有这样的代码: <!-- 方法映射 --> <bean class="org.springframework.web.servle ...
- CUGBACM_Summer_Tranning 组队赛解题报告
组队赛解题报告: CUGBACM_Summer_Tranning 6:组队赛第六场 CUGBACM_Summer_Tranning 5:组队赛第五场 CUGBACM_Summer_Tranning 4 ...
- [置顶] IOS7状态栏StatusBar官方标准适配方法
IOS7状态栏StatusBar官方标准适配方法 hello,大家好,ios7正式版已经发布,相信大家都在以各种方式来适配ios7. 如果你已经下载了xcode5,正准备使用,你会发现各种布局的改变. ...
- 正确的安装qwtplot3D开发库
1.从网上下载qwtplot3D的最新版本:http://qwtplot3d.sourceforge.net/ 2.解压qwtplot3d-0.2.7.zip到C盘根目录下(注意:路径中不能带有中文汉 ...
- c#中关于virtual，override和new的理解
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- 安装mysql时提示The host 'xxx' could not be looked up with resolveip的解决办法
1.首先用cat查看/etc/hosts文件,会显示以下内容: 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.loca ...