echarts+jquery实现黑色保税区仓库管理后台大数据看板效果代码
代码语言：html
所属分类：其他
代码描述：echarts+jquery实现黑色保税区仓库管理后台大数据看板效果代码
代码标签： echarts jquery 黑色 保税区 仓库 管理 后台 大数据 看板
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
<style>
*{margin: 0;padding: 0;}
html, body{width: 100%; height: 100%; overflow: hidden;}
#container{height: 100%;background: #15181d;overflow: hidden;position: relative;padding: 0 2%;color: #ffffff;}
.page_top{height: 13%;display: flex; flex-wrap: nowrap;justify-content: space-between;align-items:center;}
.top_left{display: flex;justify-content:flex-start;align-items: center;}
.top_time{float: right;display: flex;}
.logo{display: flex;}
.wms_name{display: flex;position: relative;font-size: 36px;color: #777985;margin-left: 5px;margin-right: 45px;}
.wms_name em{position: absolute;display: block;background: #3c7cc6; right:-30px;top:10px;width: 27px;height: 15px;line-height: 15px;font-size: 12px;color: #FFFFFF;text-align: center;}
.depot{display: flex;width:76px;height: 22px;background: #7a7a78;position: relative;justify-content:center;}
.depot input{display: block;text-align: center; width: 100%;height: 22px;background: transparent;cursor: pointer;color: #5a9d67;font-weight: 900;box-sizing: border-box;line-height: 22px;}
.depot input::-webkit-input-placeholder {color:#5a9d67;}
.depot input:-moz-placeholder {color:#5a9d67;}
.depot input::-moz-placeholder {color:#5a9d67;}
.depot input:-ms-input-placeholder {color:#5a9d67;}
.depo_down{position: absolute;width: 100%;left: 0;top: 22px;color: #FFFFFF;text-align: center;display: none;}
.depo_down li{cursor: pointer;background: #7a7a78;transition: all .3s ease-in;}
.depo_down li:hover{background: #6b6a6d;}
.depo_down li+li{border-top: 1px dashed #b0b0b0;line-height: 26px;}
.top_time{display: flex;justify-content:flex-end;height: 100%;align-items: center;}
.top_time input{width: 140px;height: 22px;line-height: 22px;text-align: center;background: #2d313c;color: #FFFFFF;font-size: 14px;cursor: pointer;}
.top_time span{margin: 0 5px;font-size: 12px;}
.top_time .layui-laydate .layui-this{background-color:#7a7a78 !important;}
/*top*/
.order_list{height: 12.5%;display: flex;justify-content: space-between;align-items:center;}
.order{height: 100%;background: #1b1e25;display: flex; flex-direction:column;padding-top: 5px; justify-content: center;align-items: flex-start;width:19.2%;padding-left: 1.2%;box-sizing: border-box;}
.order_name{font-size: 14px;color: #989399;line-height: 26px;}
.order_num{font-family: "黑体"; height: 100%;display: flex;justify-content:flex-start;align-items:center ;font-size: 32px;font-weight: 900;}
.main{height: 69%;background: #0c111d;margin-top: 1%;display: flex;justify-content:space-between;align-items:center;}
.main_left{display: flex; width:48%;height: 100%;flex-direction: column;justify-content:center;align-items:center;}
.main_midd{display: flex; width:35%;height: 100%;flex-direction: column;justify-content:space-between;align-items:flex-start;}
.home_today{width: 100%;height: 49%;display: flex;background: #1b1e25;flex-direction: column;justify-content:flex-start;align-items:flex-start; margin-bottom: 2%;padding-top: 2%;box-sizing: border-box;}
.home_tit{flex-grow:0;flex-shrink:0;display: flex;font-size: 14px;color: #797c85;padding-left: 3%;box-sizing: border-box;}
.home_list{flex-grow:0;flex-shrink:0;padding-left: 2%;box-sizing: border-box;margin-top: 10px; display: flex;flex-direction: row ;width: 100%; justify-content: space-between;align-items:flex-start;}
.home_order{width: 25%; display: flex;flex-direction: column;justify-content:flex-start;align-items:flex-start;}
.home_name{font-size: 12px;color: #aca9b0;}
.home_num{font-size: 18px;}
.new_num{color: #533d86;}
.jian_num{color: #60ba9e;}
.zhi_num{color: #476d9e;}
.chu_num{color: #b1526a;}
.ship_order{width: 100%;height: 49%;display: flex;background: #1b1e25;}
#home_today{width: 100%;display: flex;height: 100%;flex-direction: column;justify-content:flex-start;align-items:flex-start;}
#ship_order{padding-top:10px;box-sizing: border-box;}
.imple{width: 100%;height: 49%;padding-right: 20px;box-sizing: border-box; display: flex;background: #1b1e25;flex-direction: column;justify-content:flex-start;align-items:flex-start; margin-bottom: 2%;padding-top: 2%;box-sizing: border-box;}
.order_wait{width: 100%;height: 49%;display: flex;justify-content:space-between;align-items:flex-start; box-sizing: border-box;}
.commis{display: flex; width:49%;height: 100%;flex-direction: column;justify-content:center;align-items:flex-start;background: #1b1e25;padding:0 10px;box-sizing: border-box;}
.comm_tit{font-size: 14px;color: #979b9e; padding-left: 17px;box-sizing: border-box;padding-top: 5px; line-height: 28px;}
.comm_list{display: flex;height: 100%;width: 100%; flex-direction: column;justify-content: center;align-items: center;}
.comm_cont{border-bottom: 2px solid #1e2225; display: flex;width: 100%;justify-content: space-between;align-items: center;}
.com_name{display: flex;background: #d4d6d5;color: #2e2e2c;padding: 0 5px;}
.com_num{display: flex;}
.abort{display: flex; width:49%;height: 100%;flex-direction: column;padding-bottom: 10px;box-sizing: border-box; justify-content:flex-start;align-items:flex-start;background: #1b1e25;}
.abot_tit{font-size: 14px;color: #e0e1e3;padding-left: 17px;box-sizing: border-box;padding-top: 5px;line-height: 28px;}
.abort_box{display: flex;width: 100%;height: 100%;overflow: hidden;flex-direction: column;justify-content:flex-start;align-items:flex-start;}
.abort_list{font-size: 14px;color: #e0e1e3;padding:0 10px;box-sizing: border-box; display: flex;width: 100%;height: 100%;overflow-y: scroll;flex-direction: column;justify-content:flex-start;align-items:flex-start;}
.abort_cont{line-height:30px; display: flex;width: 100%;justify-content: space-between;align-items: center;}
.abort_name{display: flex;width: 50%;justify-content:flex-start;align-items: center;}
.abort_num{display: flex;width: 50%;justify-content:flex-start;align-items: center;}
.abort_use{width: 100%;height: auto;}
/*截止时间出库率*/
.main_rig{display: flex;background: #1b1e25; width:15%;height: 100%;flex-direction: column;justify-content:flex-start;align-items:flex-start;padding: 10px;box-sizing: border-box;}
.situ_tit{display: flex; font-size: 14px;color: #979b9e;line-height: 20px;padding-top: 5px;}
.situ_use {display: flex;width: 100%;height: 100%;overflow: hidden;flex-direction: column;justify-content: flex-start;align-items: flex-start;}
.situ_list{font-size: 14px;color: #e0e1e3;padding:0 10px;box-sizing: border-box; display: flex;width: 100%;height: 100%;overflow-y: scroll;flex-direction: column;justify-content:flex-start;align-items:flex-start;}
.situ_use{width: 100%;height: 100%;}
.situ_top span{vertical-align: middle;}
.situ_name{display: inline-block;height: 20px;line-height: 20px;background: #d1d2d4;padding: 0 10px;color: #454b4b;}
.situ_use ul{height: auto;width: 100%;}
.situ_time{margin-left: 2px;}
.situ_use li{margin-top: 10px;}
.lssl{display: flex;justify-content: space-between;align-items: center;width: 100%;margin-top: 5px;}
.lsl_name{display: flex;color: #898e94;}
.lsl_num{display: flex;color: #dfe0e5;}
.lal_all{width: 100%;height: 5px;background: #704fba;}
.quan{display: flex;justify-content: space-between;align-items: center;width: 100%;margin-top: 5px;}
.quan_name{display: flex;color: #898e94;}
.quan_num{display: flex;color: #dfe0e5;}
.quan_all{width: 100%;height: 5px;background: #1f2326;margin-top: 2px;position: relative;}
.tity{width: 20%;height: 5px;position: absolute;left: 0;top: 0;background: #4983d4;}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/laydate.js "></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-4.2.1.min.js"></script>
<script>
$(function(){
$("body").click(function(){
$(".depo_down").slideUp();
})
$(".depot").click(function(e){
e.stopPropagation();
if($(this).hasClass("active")){
$(this).removeClass("active");
$(".depo_down").slideUp();
}else{
$(this).addClass("active");
$(".depo_down").slideDown();
}
})
$(".depo_down li").click(function(){
var tex=$(this).text();
$(".depot input").val(tex);
})
//选择仓库
laydate.render({
elem: '#time_star'
,type: 'datetime'
});
laydate.render({
elem: '#time_end'
,type: 'datetime'
});
//时间
var myChart1 =echarts.init(document.getElementById('home_today'));
var option1 = {
backgroundColor: '#1b1e25',
title: {
text: ''
},
tooltip: {
enterable:true,
trigger: 'axis'
},
grid: {
left: '3%',
right: '3%',
top: '10%',
bottom:"2%",
containLabel: true
},
xAxis : [
{
axisLine:{
lineStyle:{
color:'#3e4148',
width:1,//这里是为了突出显示加上的
}
},
type : 'category',
boundaryGap : false,
data : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
}
],
yAxis : [
{
splitLine:{
lineStyle:{
color: '#21242b',
}
},
type : 'value',
axisLine:{
lineStyle:{
color:'#43484e',
width:0,//这里是为了突出显示加上的
}
}
}
],
series : [
{
name:'新增单量',
type:'line',
symbol:'none',
data:[50, 132,40, 1500, 2000, 800, 210,100],
smooth: true,
itemStyle : {
normal : {
lineStyle:{
color:'#533d86'
}
}
},
areaStyle: {normal: { color: ['rgba(255,255,255,0.1)']}},
},
{
name:'拣选单量',
type:'line',
symbol:'none',
data:[2, 8, 500, 2000,200,100, 50,50],
smooth: true,
itemStyle : {
normal : {
lineStyle:{
color:'#60ba9e'
}
}
},
areaStyle: {normal: { color: ['rgba(255,255,255,0.1)']}},
},
{
name:'质检单量',
type:'line',
symbol:'none',
data:[150, 500, 530, 1500, 1000, 330, 410,60],
smooth: true,
itemStyle : {
normal : {
lineStyle:{
color:'#476d9e'
}
}
},
areaStyle: {normal: { color: ['rgba(255,255,255,0.1)']}},
},
{
name:'出库单量',
type:'line',
symbol:'none',
data:[800, 400, 1500, 1200, 800, 700, 600,200],
smooth: true,
itemStyle : {
normal : {
lineStyle:{
color:'#b1526a'
}
}
},
areaStyle: {normal: { color: ['rgba(255,255,255,0.1)']}},
}
]
};
var myChart2 =echarts.init(document.getElementById('ship_order'));
var option2 = {
backgroundColor: '#1b1e25',
title: {
text: '货主订单执行情况',
textStyle:{ //设置主标题风格
color:'#ffffff',//设置主标题字体颜色
fontSize:'14px',
},
subtext: '货主1 货主2 货主3 货主4 货主5 货主6 货主7',
subtextStyle: {
color: '#ffffff' // 副标题文字颜色
}
},
color: ['#ed4b97', '#26a0c9', '#44cb90', '#d2bd7a'],
tooltip: {},
legend: {
data: ['未开始', '作业中', '出库', '拦截'],
textStyle: {
color: '#ffffff'
},
right: 10,
itemWidth: 10,
itemHeight: 10
},
calculable: true,
grid: {
left: '3%',
right: '3%',
bottom:"20",
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['货主1', '货主2', '货主3', '货主4', '货主5','货主6','货主7'],
"axisLabel":{
interval: 0
},
axisLine:{
lineStyle:{
color:'#ffffff',
width:1,//这里是为了突出显示加上的
}
},
}
],
dataZoom: [{
type: 'slider',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
bottom: -5,
height: 15,
start: 0,//滚动条的起始位置
end: 50
}],
yAxis: [
{
splitLine:{
lineStyle:{
color: '#21242b',
}
},
type: 'value',
axisLine:{
lineStyle:{
color:'#43484e',
width:0,//这里是为了突出显示加上的
}
}
}
],
series: [
{
name: '未开始',
type: 'bar',
barGap: 0.2,
data: [320, 332,310,200,222,40,300]
},
{
name: '作业中',
type: 'bar',
data: [130, 182,30,50,122,20,30]
},
{
name: '出库',
type: 'bar',
data: [320, 82,220,250,322,50,10]
},
{
name: '拦截',
type: 'bar',
data: [100, 182,120,100,22,100,30]
}
]
};
var myChart3 =echarts.init(document.getElementById('imple'));
var option3 = {
grid: {
left: '3%',
right: '3%',
top: '10%',
bottom:"2%",
containLabel: true
},
title: {
text: '订单执行情况',
textStyle:{ //设置主标题风格
color:'#90939a',//设置主标题字体颜色
fontSize:'14px',
},
},
backgroundColor: '#1b1e25',
tooltip: {
trigger: 'item',
formatter: " {b}:{d}%"
},
legend: {
orient: 'vertical',
right: 10,
y:'center',
textStyle: {
color: '#7c8081'
},
itemWidth: 10,
itemHeight: 10,
data:['未开始','波次','拣选','质检','拦截','出库'],
formatter: function (params) {
for (var i = 0; i < option3.series[0].data.length; i++) {
if (option3.series[0].data[i].name == params) {
return params +":"+ option3.series[0].data[i].value;
}
}
}
},
series: [
{
name:'订单执行情况',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:734, name:'未开始'},
{value:260, name:'波次'},
{value:62, name:'拣选'},
{value:294, name:'质检'},
{value:5376, name:'拦截'},
{value:17672, name:'出库'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{
color:function(params) {
//自定义颜色
var colorList = [
'#74529e', '#da8f3c', '#447cb7', '#be4868', '#4dc892', '#efbb43',
];
return colorList[params.dataIndex]
}
}
}
}
]
};
var setoption=function(){
myChart1.setOption(option1);//今日作业趋势
myChart2.setOption(option2);//货主订单执行情况
myChart3.setOption(option3);//订单执行情况
}
setoption()
$(window).resize(function(){
myChart1.resize();
myChart2.resize();
myChart3.resize();
})
$(".abort_list").niceScroll({
cursorcolor: "rgba(255,255,255,0.2)", //#CC0071 光标颜色
cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
cursorwidth: "6px", //像素光标的宽度
cursorborder: "0", // 游标边框css定义
cursorborderradius: "5px", //以像素为光标边界半径
autohidemode:true //是否隐藏滚动条
});
$(".situ_list").niceScroll({
cursorcolor: "rgba(255,255,255,0.2)", //#CC0071 光标颜色
cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
cursorwidth: "6px", //像素光标的宽度
cursorborder: "0", // 游标边框css定义
cursorborderradius: "5px", //以像素为光标边界半径
autohidemode:true //是否隐藏滚动条
});
//滚动条
$(".situ_use li").each(function(){
var all_num=parseInt($(this).find(".lal_num").text());
var at_num=parseInt($(this).find(".quan_num").text());
var len=(at_num/all_num)*100+'%';
$(this).find(".tity").css({"width":len})
})
//上一小时作业情况
})
</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.nicescroll.js"></script>
</head>
<body>
<div id="container">
<div class="page_top">
<div class="top_left">
<div class="logo">
<img src="//repo.bfw.wiki/bfwrepo/icon/617245a85118d.png">
</div>
<h2 class="wms_name"><span>华东宁波正正保税A仓</span><em>单仓</em></h2>
<div class="depot">
<input type="text" placeholder="选择仓库..." readonly="readonly">
<div class="depo_down">
<ul>
<li>A仓库</li>
<li>B仓库</li>
<li>C仓库</li>
</ul>
</div>
</div>
</div>
<div class="top_time">
<input type="text" class="time_star" id="time_star" value="2018-11-11 00:00:00" readonly="readonly"><span>至</span><input type="text" class="time_end" id="time_end" value="2018-12-11 00:00:00" readonly="readonly">
</div>
</div>
<!--顶部-->
<div class="order_list">
<div class="order">
<div class="order_name">总单量</div>
<h2 class="order_num">204398</h2>
</div>
<div class="order">
<div class="order_name">总出库量</div>
<h2 class="order_num">197672</h2>
</div>
<div class="order">
<div class="order_name">未出库单量</div>
<h2 class="order_num">1350</h2>
</div>
<div class="order">
<div class="order_name">今天出库量</div>
<h2 class="order_num">5414</h2>
</div>
<div class="order">
<div class="order_name">未开始单量</div>
<h2 class="order_num">734</h2>
</div>
</div>
<!--订单量-->
<div class="main">
<div class="main_left">
<div class="home_today">
<div class="home_tit">
今天作业趋势图
</div>
<div class="home_list">
<div class="home_order">
<div class="home_name">
新增单量
</div>
<div class="home_num new_num">
86
</div>
</div>
<div class="home_order">
<div class="home_name">
拣选单量
</div>
<div class="home_num jian_num">
0
</div>
</div>
<div class="home_order">
<div class="home_name">
质检单量
</div>
<div class="home_num zhi_num">
2
</div>
</div>
<div class="home_order">
<div class="home_name">
出库单量
</div>
<div class="home_num chu_num">
5
</div>
</div>
</div>
<div id="home_today"></div>
<!--今日作业趋势图-->
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论1