网站建设 美食站点,重庆明建网络科技有限公司干啥的,北京建设网经济适用房,做网站网站会怎么样大数据可视化大屏实战项目#xff08;4#xff09;物流数据云看台#xff08;包括动态登陆页面#xff09;—HTMLCSSJS【源码在文末】#xff08;可用于比赛项目或者作业参考中#x1f415;#x1f415;#x1f415;#xff09;
一#xff0c;项目概览
☞☞☞☞☞☞…大数据可视化大屏实战项目4物流数据云看台包括动态登陆页面—HTMLCSSJS【源码在文末】可用于比赛项目或者作业参考中
一项目概览
☞☞☞☞☞☞项目演示链接http://59.110.22.223:8080/Data/4/
☞☞☞☞☞☞项目演示链接http://59.110.22.223:8080/Data/4/ 二运行视频
☞☞☞☞☞☞B站演示视频 【大数据可视化大屏实战项目4物流数据云看台包括动态登陆页面—HTMLCSSJS可用于比赛项目或者作业参考中】 https://www.bilibili.com/video/BV1EN411v7Yx/?share_sourcecopy_webvd_sourceb2e9b9ed746acda34f499009647748ed
三部分代码讲解
!DOCTYPE html
html
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
meta nameviewport contentinitial-scale1.0, user-scalableno, widthdevice-width
title看板/title
link relstylesheet typetext/css hrefcss/reset.css /
link relstylesheet typetext/css hrefcss/scanboard.css /
link relstylesheet typetext/css hrefcss/animsition.css /
link relstylesheet typetext/css hrefcss/jquery.shCircleLoader.css /
script typetext/javascript srcjs/jquery.min.js/script
script typetext/javascript srcjs/jquery.shCircleLoader-min.js/script
/head
bodydiv idloader/divscript typetext/javascript$(#loader).shCircleLoader({color: #00deff});/script!--Top Start!--div classscanboardWp animsitiondiv idtopdiv classwp clearfixdiv classleft pageTita classsummaryBtn hrefjavascript:;物流汇总看板/a/divdiv classcenter topLogoa hrefhttps://paycloud.vipimg srcimages/logo.png/a/divdiv classright topBardiv classtopTime时间加载中.../divdiv classclearfixa hrefindex.html classsignOut fr退出/adiv classcompany frh3 style资源优选/h3div classdropdowna hrefhttps://paycloud.vip资源淘宝店/aa hrefhttps://paycloud.vip可视化模板精选/aa hrefhttps://paycloud.vip优质资源/a/div/div/div/div/div/div!--Top End!--!--Main Start!--div idmain classwp clearfixdiv classleft!--今日运单数量--div classitem waybilldiv classitemTitspan classborder-yellow今日运单数量/span/divdiv classitemCon itembgdiv classprogress progress80%h3 classclearfixspan正常单/spani80单/i/h3div classprogressBarspan/span/divh40%/h4/divdiv classprogress progress15%h3 classclearfixspan临时单/spani15单/i/h3div classprogressBarspan/span/divh40%/h4/divdiv classprogress progress5%h3 classclearfixspan异常单/spani5单/i/h3div classprogressBarspan/span/divh40%/h4/div/div/div!--各阶段平均用时统计--div classitemdiv classitemTitspan classborder-green各阶段平均用时统计/span/divdiv classitemConul classlistStyleli classclearfixspan下单…配车/spanspanstrong3.4/strong秒/span/lili classclearfixspan配车…装货/spanspanstrong24/strong分钟/span/lili classclearfixspan到厂卸货/spanspanstrong14/strong分钟/span/lili classclearfixspan装回收器具/spanspanstrong7/strong分钟/span/lili classclearfixspan卸回收器具/spanspanstrong5/strong分钟/span/li/ul/div/div!--人员信息--div classitemdiv classitemTitspan classborder-blue人员信息/span/divdiv classitemCon itembgul classlistStyleli classclearfixspan领导strong5/strong人/spanspan司机strong36/strong人/spanspan门卫strong6/strong人/spanspan器具中心strong15/strong人/spanspan派单员strong20/strong人/spanspan售后卸载strong29/strong人/spanspan财务strong3/strong人/spanspan售后回收strong10/strong人/span/li/ul/div/div/divdiv classcenterdiv classcenterWp!--中间大地图--div classmapContainerdiv classbtnLayerdiv classsearchdiv classsearchInnera hrefjavascript:; classsearchBtnspan classicoSearch/span/aform classsearchFormbutton classicoSearch/buttoninput typetext name placeholder请搜索车辆/form/div/diva hrefjavascript:; classinfoBtnspan classicoCar/span/a/divdiv idmyMap classitem/div/div!--月运单量统计图--div classbillChartdiv classitemTitspan classborder-blue月运单量统计图small(2017年12月)/small/span/divdiv idmyChart1/div/div/div/divdiv classright!--总计运单数--div classitem total itembgdiv classitemTitspan classborder-yellow总计运单数/span/divdiv classitemCondiv classtotalNumstrong idtotalNum total3680820/strongspan单/span/div/div/div!--基本信息--div classitem basicInfodiv classitemTitspan classborder-green基本信息/span/divdiv classitemCon itembgdiv classinfoPieul classclearfixli classcolor-yellowspan classborder-yellow idindicator1 total320/spanp在途车辆/p/lili classcolor-greenspan classborder-green idindicator2 total650/spanp出车次数/p/lili classcolor-bluespan classborder-blue idindicator3 total1000/spanp今日订单/p/li/uldiv idindicatorContainer/div/div/div/div!--运单状态--div classitem billStatediv classitemTitspan classborder-green运单状态/span/divdiv classitemCondiv classStateBoxdiv classStateTitspan订单编号/spanspan使用时间/spanspan满载率/span/divdiv idFontScrollullidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress78%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress80%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress49%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress7%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress55%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress100%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress94%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress23%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress67%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress42%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress38%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/lilidiv classfontInner clearfixspanZC1712120023/spanspan2小时15分/spanspandiv classprogress progress76%div classprogressBarspan/span/divh3ih4/h4/i/h3/div/span/div/li/ul/div/div/div/div/div/div!--Main End!--/divdiv classfilterbg/divdiv classpopupa hrefjavascript:; classpopupClose/adiv classsummarydiv classsummaryTopdiv idsummaryPie1 classsummaryPie/divdiv idsummaryPie2 classsummaryPie/divdiv idsummaryPie3 classsummaryPie/div/divdiv classsummaryBottomdiv classsummaryBardiv classsummaryTitimg srcimages/tit1.png/divdiv idsummaryBar/div/divdiv classsummaryLinediv classsummaryTitimg srcimages/tit2.png/divdiv idsummaryLine/div/div/div/div/divdiv classcarInfoa hrefjavascript:; classcarClose/adiv classinfoBoxdiv classinfoTopdiv classinfoTitimg srcimages/tit3.png/div/divdiv classinfoMaindiv classinfoLeft fldiv classtopSearchformbutton/buttoninput typetext name placeholder请输入车牌号搜索/form/divdiv classcarStateh3span classfl车牌号码/spanspan classfr状态/span/h3ul classstateUllip粤A3456344/pspan classwork工作/span/lilip粤A3456344/pspan classnowork休息/span/lilip粤A3456344/pspan classwork工作/span/lilip粤A3456344/pspan classnowork休息/span/lilip粤A3456344/pspan classwork工作/span/lilip粤A3456344/pspan classnowork休息/span/lilip粤A3456344/pspan classwork工作/span/lilip粤A3456344/pspan classnowork休息/span/lilip粤A3456344/pspan classwork工作/span/lilip粤A3456344/pspan classnowork休息/span/lilip粤A3456344/pspan classwork工作/span/lilip粤A3456344/pspan classnowork休息/span/lilip粤A3456344/pspan classwork工作/span/lilip粤A3456344/pspan classnowork休息/span/lilip粤A3456344/pspan classwork工作/span/lilip粤A3456344/pspan classnowork休息/span/lilip粤A3456344/pspan classwork工作/span/lilip粤A3456344/pspan classnowork休息/span/li/ul/div/divdiv classinfoRight frdiv classrightWpdiv classcarIntrodiv classintroBox fldiv classcarImg flimg srcimages/car.jpg/divdiv classcarText fl clearfixp车辆类型大车/pp本周工作时长34.45小时/pp车牌号码粤A3456344/pp统计时段2018-1-12至2018-2-13/pp可载容量20.0方/pp当前状态span classcolor-green工作/span/p/div/divdiv classdriver frdiv classphotoimg srcimages/photo.jpg/divp司机李思林/p/div/divdiv classtimetablediv classtopTooldiv classtableExplain fldiv classitemExplain flspan classbg-green/spanp司机工作时间/p/divdiv classitemExplain flspan classbg-blue/spanp标准白晚班时间/p/div/divdiv classtopBtns fra hrefjavascript:; classprevWeek上一周/aa hrefjavascript:; classnextWeek下一周/a/div/divdiv classtiemWpdiv classtimeInnerdiv classweekListdiv classweekItemdiv classspace1/divp星期一/p/divdiv classweekItemdiv classspace1/divp星期二/p/divdiv classweekItemdiv classspace1/divp星期三/p/divdiv classweekItemdiv classspace1/divp星期四/p/divdiv classweekItemdiv classspace1/divp星期五/p/divdiv classweekItemdiv classspace1/divp星期六/p/divdiv classweekItemdiv classspace1/divp星期天/p/div/divdiv classtimeBoxdiv classdataContainerdiv classdataBoxdiv classspace1/divdiv classworkTime/divdiv classspace2/divdiv classstandard/divdiv classspace3/div/divdiv classdataBoxdiv classspace1/divdiv classworkTime/divdiv classspace2/divdiv classstandard/divdiv classspace3/div/divdiv classdataBoxdiv classspace1/divdiv classworkTime/divdiv classspace2/divdiv classstandard/divdiv classspace3/div/divdiv classdataBoxdiv classspace1/divdiv classworkTime/divdiv classspace2/divdiv classstandard/divdiv classspace3/div/divdiv classdataBoxdiv classspace1/divdiv classworkTime/divdiv classspace2/divdiv classstandard/divdiv classspace3/div/divdiv classdataBoxdiv classspace1/divdiv classworkTime/divdiv classspace2/divdiv classstandard/divdiv classspace3/div/divdiv classdataBoxdiv classspace1/divdiv classworkTime/divdiv classspace2/divdiv classstandard/divdiv classspace3/div/div/divdiv classtimeLine line1span0:00/span/divdiv classtimeLine line2span3:00/span/divdiv classtimeLine line3span6:00/span/divdiv classtimeLine line4span9:00/span/divdiv classtimeLine line5span12:00/span/divdiv classtimeLine line6span15:00/span/divdiv classtimeLine line7span18:00/span/divdiv classtimeLine line8span21:00/span/divdiv classtimeLine line9span24:00/span/div/div/divdiv classtotalTablediv classtotalTitspan总用时/天/spanspan总单数/天/span/divdiv classtotalDatadiv classtotalItemdiv classspace1/divdiv classtatleWpspan0.00/spanspan0/span/divdiv classtotalBar/div/divdiv classtotalItemdiv classspace1/divdiv classtatleWpspan0.00/spanspan0/span/divdiv classtotalBar/div/divdiv classtotalItemdiv classspace1/divdiv classtatleWpspan0.00/spanspan0/span/divdiv classtotalBar/div/divdiv classtotalItemdiv classspace1/divdiv classtatleWpspan0.00/spanspan0/span/divdiv classtotalBar/div/divdiv classtotalItemdiv classspace1/divdiv classtatleWpspan0.00/spanspan0/span/divdiv classtotalBar/div/divdiv classtotalItemdiv classspace1/divdiv classtatleWpspan0.00/spanspan0/span/divdiv classtotalBar/div/divdiv classtotalItemdiv classspace1/divdiv classtatleWpspan0.00/spanspan0/span/divdiv classtotalBar/div/div/div/div/div/div/div/div/div/div/divcanvas idcanvas styleposition: absolute;top: 0;left: 0;/canvas
/body
script typetext/javascript srcjs/bg.js/script
script typetext/javascript srcjs/scanboard.js/script
script typetext/javascript srcjs/fontscroll.js/script
script typetext/javascript srcjs/jquery.animsition.js/script
script typetext/javascript srcjs/jquery.nicescroll.js/script
script typetext/javascript srcjs/echarts.min.js/script
script typetext/javascript srchttp://webapi.amap.com/maps?v1.4.3keyf8ffe058b8e6f5b05e8ff43ca4207393/script
/html
这是一个HTML页面的代码它用于创建一个网页通常用于显示仪表板Dashboard和相关信息。我将逐段解释这段HTML代码的主要部分 !DOCTYPE html: 这是文档类型声明用于告诉浏览器这是一个HTML5文档。 html: HTML文档的根元素。 head: 头部部分通常包含一些关于文档的元信息例如字符编码、视口设置、页面标题和外部资源链接。 meta http-equivContent-Type contenttext/html; charsetutf-8 /: 设置文档的字符编码为UTF-8以支持各种字符。meta nameviewport contentinitial-scale1.0, user-scalableno, widthdevice-width: 设置视口的缩放比例、用户不可缩放和适应设备宽度。title看板/title: 设置页面的标题为“看板”。一系列link元素用于引入外部CSS样式文件这些样式文件位于css/目录下。一系列script元素用于引入外部JavaScript文件这些脚本文件位于js/目录下。 body: 网页的主体部分包含了页面上的所有可见内容。 div idloader/div: 一个div元素具有ID为loader用于显示加载动画。script typetext/javascript ... /script: 包含JavaScript代码用于初始化加载动画具体来说使用jQuery库初始化一个带有颜色的圆形加载器。 页面主体分为三个部分Top、Main、和一些弹出式窗口。 Top 部分: 包含了页面的顶部导航栏和一些公司信息。 导航栏包括标题、公司Logo、时间显示和退出按钮。公司信息以一个下拉菜单的形式展示包括一些公司相关链接。 Main 部分: 包含了页面的主要内容分为左、中、右三个部分。 左侧包含了三个子模块今日运单数量、各阶段平均用时统计和人员信息。中间部分包含了地图展示和月运单量统计图。右侧包含了总计运单数、基本信息和运单状态的信息。 弹出式窗口: 包括一个筛选弹窗和一个车辆信息弹窗用于用户与页面交互时弹出显示相关信息。 canvas idcanvas styleposition: absolute;top: 0;left: 0;/canvas: 一个HTML5 canvas 元素用于绘制图形。可能在JavaScript中使用它来创建动画或其他可视化效果。 script元素: 包含了一系列JavaScript文件的引用用于实现页面的交互和功能。这些脚本包括动画效果、地图显示、图表绘制等等。
总的来说这段HTML代码描述了一个仪表板页面包括导航、信息展示、地图、图表等内容通过JavaScript实现了一些动态效果和交互功能。如果需要进一步了解页面的细节和功能需要查看引用的JavaScript文件和相关CSS样式文件。
可视化图表的使用技巧
1、柱状图
柱状图中的颜色尽量不要超过3种。 柱状图柱子间的宽度和间隙要是适当。住在太窄用户的视觉可能会集中在两个柱子之间的负空间 对多个数据系列排序时最好复合一定的逻辑用直观的方式引导用户更好的查看数据此时可以通过升序和降序排列。 2、折线图
折线图连接各点可以使用直线和曲线这样更美观数据展示更加清晰 折线的颜色要清晰尽量不要使用与背景色和坐标轴相近的颜色 折线图中的线条尽量不要超过4条过多的线条会导致界面混乱无法阅读。 3、饼图
饼图适合用来展示单一维度数据的占比要求其数值没有零或者负值并确保各个分块占比总和为100%。 饼图不适合用于精确数据的比较因此当各类别数据占比相似时很难分辨出哪个类别占比比较大。 大多数人的视觉习惯是按照顺时针自上而下的顺序去观察因此在绘制饼图时建议从12点钟开始沿着顺时针右边的第一个分块绘制饼图最大的数据分块这样可以有效地强调其重要性 4、散点图
如果一个散点图没有显示变量的任何关系那么或许该图表类型不是次数据的最佳选择 散点图只有在足够多的数据点并且数据间有相关性时才能呈现很好的结果。 如果数据包含不同系列可以给不同系列使用不同的颜色
数据功能图介绍 在大数据的可视化图中按照数据的作用和功能可以把图分为比较类图、分布类图、流程类图、地图类图、占比类图、区间类图、关联类图、时间类图和趋势类图等。 1、比较类图 比较类图可视化的方法通常是显示值与值之间的不同和相似之处使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小通常用于展示不同分类间的数值对比一级不同时间点的数据对比。常见的比较类图主要有柱状图、双向柱状图、气泡图、子弹图、色块图、漏斗图和直方图等
2、分布类图 分布类图可视化的方法通常是显示频率将数据分散在一个区间或分组并使用图形的为、大小、颜色的渐变程度类表现数据的分布。分布类图通常用于展示连续数据上数值的分布情况。常见的分布类图主要有箱型图、热力图、散点图、分布曲线图、色块图和直方图
3、流程类图 流程类图可视化的方法通常是显示流程流转和流程流量。一般流程都会呈现出多个环节每个环节之间会有相应的流量关系因此这类图形可以很好的表示这些流量关系。常见的流程图主要有漏斗图和桑基图
4、地图类图 地图类图可视化的方法是显示地理区域上的数据并在显示是使用地图作为背景通过图形的位置来表现数据的地理位置。地图类图通常用来展示数据在不同地理区域上的分布情况。常见的地图类图主要有待气泡的地图和统计地图
5、占比类图 占比类图可视化的范式是显示同一维度上的占比关系。常见的占比类图主要有换图、马赛克图、堆叠面积图、堆叠柱状图和矩形树图
6、区间类图 区间类图可视化的方法是显示同一维度上值的上限和下限之间的差异。区间类图使用图形的大小和位置表示数值的上限和下限通常用于表示数据在某一分类时间点上的最大值和最小值。常见的区间类图主要有仪表盘图和堆叠面积图
7、关联类图 关联类图可视化的方法显示数据之间的相互关系。关联类图使用图形的嵌套和位置表示数据之间的关系通常用于表示数据之间的前后顺序、父子关系和相关性。常见的关联类图主要有和弦图、桑基图、矩阵树图、树状图和韦恩图
8、时间类图 时间类图可视化的方法显示以时间为特定维度的数据。时间类图使用图形的位置表现出数据在时间深的房补通常用于表现数据在时间维度上的趋势和变化。常见的实践类图主要有面截图、K线图、卡吉图和螺旋图
9、趋势类图 趋势类图可视化的方式分析数据的变化趋势趋势类图使用图形的位置表现出数据在连续区域上的分布通常展示数据在连续区域上的大小变化的规律。常见的趋势类图主要有面积图、K线图、折线图和回归曲线图 四源码
链接https://pan.baidu.com/s/13RP2wnNFIHEQSyweOdKubA 提取码
创作不易项目已加密有偿—9.9r—可修改页面做实验报告代码讲解待上服务器等…
请私信作者v15135757306
注非白嫖仅为维护服务器若想白嫖请CSDN私信我大概率可能时间忙顾不上回复
若侵权请私信作者下架博客
