数据可视化模版.zip

【实例简介】
内有多个可视化模版,开箱即用.在开发大屏数据可视化项目时，除了各类图表的开发外，大屏的风格设计也是一项十分重要且耗时的工作。 本文推荐的几款大屏模板，旨在帮助那些有大屏数据可视化开发需求的同学能够快速上手，把更多的时间、精力放在报表本身的开发上。 该套模板采用CSS3的flex布局，具备良好的适应性，能够适配普通PC及各类大屏的常用分辨率。 模板采用了通用的上下和左中右布局，把整个大屏分隔成了若干区域（代码中已实现），方便在具体开发过程中根据实际需要自行调整。
【实例截图】
【核心代码】
4744300845374824562.zip
├── 015
│   ├── css
│   │   └── comon0.css
│   ├── font
│   │   └── DS-DIGIT.TTF
│   ├── images
│   │   ├── bg.jpg
│   │   ├── head_bg.png
│   │   └── line(1).png
│   ├── index.html
│   ├── js
│   │   ├── area_echarts.js
│   │   ├── china.js
│   │   ├── echarts.min.js
│   │   ├── index.html
│   │   ├── jquery.js
│   │   └── js.js
│   └── picture
│   ├── jt.png
│   ├── lbx.png
│   ├── loading.gif
│   ├── map.png
│   └── weather.png
├── 016
│   ├── css
│   │   └── index.css
│   ├── img
│   │   ├── consumption.png
│   │   ├── end.png
│   │   ├── g.png
│   │   ├── indent.png
│   │   ├── j.png
│   │   ├── left_line.png
│   │   ├── linx.png
│   │   ├── map.png
│   │   ├── right_line.png
│   │   ├── sper.png
│   │   ├── s.png
│   │   ├── t.png
│   │   ├── true.png
│   │   └── vip.png
│   ├── index.html
│   └── js
│   ├── echarts.min.js
│   ├── guangxi.js
│   ├── index.js
│   ├── jquery-2.2.1.min.js
│   └── rem.js
├── 017
│   ├── css
│   │   ├── easyui.css
│   │   ├── jquery-ui.css
│   │   ├── main_design1.css
│   │   └── room.css
│   ├── Demo.html
│   ├── images
│   │   ├── content_comm1.png
│   │   ├── content_comm.png
│   │   ├── content_down1.png
│   │   ├── content_down.png
│   │   ├── index1.gif
│   │   ├── index.gif
│   │   ├── screenbg_design1.jpg
│   │   └── war_room_main.jpg
│   └── js
│   ├── big_design1.js
│   ├── china.js
│   ├── echarts.js
│   ├── echarts-wordcloud.js
│   ├── geoCoord.js
│   ├── jquery.easyui.min.js
│   ├── jquery.min.js
│   └── room.js
├── 018
│   ├── css
│   │   ├── abstract blue lights orange bokeh gaussian blur 1920x1200 wallpaper_www.wallpaperhi.com_43.jpg
│   │   ├── default.css
│   │   ├── font
│   │   │   ├── DS-DIGIB.TTF
│   │   │   ├── DS-DIGII.TTF
│   │   │   ├── DS-DIGI.TTF
│   │   │   └── DS-DIGIT.TTF
│   │   ├── jquery-ui.css
│   │   ├── mobile.css
│   │   ├── normalize.css
│   │   └── style.css
│   ├── images
│   │   ├── bg01big2index.png
│   │   ├── bg01bigindex.png
│   │   ├── bg01details01.png
│   │   ├── bg01details02.png
│   │   ├── bg01details03.png
│   │   ├── bg01details04.png
│   │   ├── bg01details05.png
│   │   ├── bg01details06.png
│   │   ├── bg01pandect.png
│   │   ├── bg01rightarea.png
│   │   ├── bg01righttext.png
│   │   ├── bg01slider2.png
│   │   ├── bg01submenu.png
│   │   ├── bg01top.png
│   │   ├── bg01warp.png
│   │   ├── bg02big2index.png
│   │   ├── bg02bigindex.png
│   │   ├── bg02bigindex_.png
│   │   ├── bg02pandect.png
│   │   ├── bg02rightarea.png
│   │   ├── bg02righttext.png
│   │   ├── bg02slider2.png
│   │   ├── bg02submenu.png
│   │   ├── bg03bigindex.png
│   │   ├── bg03bigindex_.png
│   │   ├── bg03details.png
│   │   ├── bg03pandect.png
│   │   ├── bg03rightarea.png
│   │   ├── bg03submenu.png
│   │   ├── bg04bigindex.png
│   │   ├── bg04pandect.png
│   │   ├── bg04rightarea.png
│   │   ├── bg04submenu.png
│   │   ├── bg05pandect.png
│   │   ├── bg05rightarea.png
│   │   ├── bg06rightarea.png
│   │   ├── bg07rightarea.png
│   │   ├── btn01slider2.png
│   │   ├── charts.png
│   │   ├── logofont.png
│   │   ├── logoline1.png
│   │   ├── logoline2.png
│   │   ├── logoline3.png
│   │   └── logoline.png
│   ├── index.html
│   ├── js
│   │   ├── common.js
│   │   ├── index.js
│   │   ├── jquery-1.8.3.min.js
│   │   └── jquery_and_jqueryui.js
│   └── less
│   └── style.less
├── 019
│   ├── css
│   │   ├── common.css
│   │   └── map.css
│   ├── images
│   │   └── map_bg.jpg
│   ├── index.html
│   ├── js
│   │   ├── china.js
│   │   ├── echarts.js
│   │   ├── echarts.min.js
│   │   └── jquery-2.1.1.min.js
│   └── picture
│   ├── info-img-1.png
│   ├── info-img-2.png
│   ├── info-img-3.png
│   ├── info-img-4.png
│   └── loading.gif
├── 020
│   ├── 404.html
│   ├── alerts.html
│   ├── assets
│   │   ├── amcharts
│   │   │   ├── amcharts3.14.2.js
│   │   │   ├── amcharts.js
│   │   │   ├── gauge.js
│   │   │   ├── lang
│   │   │   │   └── de.js
│   │   │   ├── pie.js
│   │   │   ├── serial3.14.2.js
│   │   │   └── serial.js
│   │   ├── bootstrap-select
│   │   │   ├── bootstrap-select.min.css
│   │   │   └── bootstrap-select.min.js
│   │   └── datepicker
│   │   ├── css
│   │   │   ├── bootstrap-datepicker.css
│   │   │   └── bootstrap-datepicker.min.css
│   │   ├── js
│   │   │   ├── bootstrap-datepicker.js
│   │   │   └── bootstrap-datepicker.min.js
│   │   ├── less
│   │   │   └── datepicker.less
│   │   └── locales
│   │   └── bootstrap-datepicker.zh-CN.min.js
│   ├── buttons.html
│   ├── calendar.html
│   ├── charts.html
│   ├── components.html
│   ├── content-widgets.html
│   ├── css
│   │   ├── AdminLTE.css
│   │   ├── _all-skins.min.css
│   │   ├── animate.css
│   │   ├── animate.min.css
│   │   ├── bootstrap.min.css
│   │   ├── calendar.css
│   │   ├── custom-ico-fonts.css
│   │   ├── deviceManager.css
│   │   ├── energy_consumption.css
│   │   ├── file-manager.css
│   │   ├── font-awesome.min.css
│   │   ├── form.css
│   │   ├── generics.css
│   │   ├── icons.css
│   │   ├── jquery.datetimepicker.css
│   │   ├── jquery.hotspot.css
│   │   ├── lightbox.css
│   │   ├── media-player.css
│   │   ├── menu.css
│   │   ├── mstp_map.css
│   │   ├── reset.css
│   │   └── style.css
│   ├── deviceManager.html
│   ├── dianfei.html
│   ├── efficiencyAnalysis.html
│   ├── energy_consumption.html
│   ├── file-manager.html
│   ├── fonts
│   │   ├── custom-ico-fonts
│   │   │   ├── custom-ico-font-.eot
│   │   │   ├── custom-ico-font.eot
│   │   │   └── custom-ico-font.ttf
│   │   ├── fontawesome
│   │   │   ├── fontawesome-webfont.eot
│   │   │   ├── fontawesome-webfont.svg
│   │   │   ├── fontawesome-webfont.ttf
│   │   │   └── fontawesome-webfont.woff
│   │   ├── glyphicons-halflings-regular.eot
│   │   ├── glyphicons-halflings-regular.svg
│   │   ├── glyphicons-halflings-regular.ttf
│   │   ├── glyphicons-halflings-regular.woff
│   │   ├── icons
│   │   │   ├── icon.svg
│   │   │   ├── icon.ttf
│   │   │   └── icon.woff
│   │   └── opan-sans
│   │   ├── OpenSans-Light-webfont.eot
│   │   ├── OpenSans-Light-webfont.svg
│   │   ├── OpenSans-Light-webfont.ttf
│   │   ├── OpenSans-Light-webfont.woff
│   │   ├── OpenSans-Regular-webfont.eot
│   │   ├── OpenSans-Regular-webfont.svg
│   │   ├── OpenSans-Regular-webfont.ttf
│   │   ├── OpenSans-Regular-webfont.woff
│   │   ├── OpenSans-Semibold-webfont.eot
│   │   ├── OpenSans-Semibold-webfont.svg
│   │   ├── OpenSans-Semibold-webfont.ttf
│   │   └── OpenSans-Semibold-webfont.woff
│   ├── form-components.html
│   ├── form-elements.html
│   ├── form-examples.html
│   ├── form-validation.html
│   ├── images-icons.html
│   ├── img
│   │   ├── arrow1.png
│   │   ├── arrow2.png
│   │   ├── body
│   │   │   ├── blue.jpg
│   │   │   ├── chrome.jpg
│   │   │   ├── city.jpg
│   │   │   ├── cloth.png
│   │   │   ├── greenish.jpg
│   │   │   ├── kiwi.jpg
│   │   │   ├── lights.jpg
│   │   │   ├── night.jpg
│   │   │   ├── ocean.jpg
│   │   │   ├── sunny.jpg
│   │   │   ├── sunset.jpg
│   │   │   ├── tectile.png
│   │   │   ├── violate.jpg
│   │   │   └── yellow.jpg
│   │   ├── browsers
│   │   │   ├── chrome.png
│   │   │   ├── firefox.png
│   │   │   ├── ie.png
│   │   │   ├── opera.png
│   │   │   └── safari.png
│   │   ├── carousel
│   │   │   ├── c-1.jpg
│   │   │   ├── c-2.jpg
│   │   │   └── c-3.jpg
│   │   ├── color-picker
│   │   │   ├── alpha.png
│   │   │   ├── hue.png
│   │   │   └── saturation.png
│   │   ├── cover-bg.jpg
│   │   ├── editor
│   │   │   ├── align@2x.png
│   │   │   ├── align.png
│   │   │   ├── bold@2x.png
│   │   │   ├── bold.png
│   │   │   ├── code@2x.png
│   │   │   ├── code.png
│   │   │   ├── font@2x.png
│   │   │   ├── font.png
│   │   │   ├── full-screen@2x.png
│   │   │   ├── full-screen.png
│   │   │   ├── heading@2x.png
│   │   │   ├── heading.png
│   │   │   ├── help@2x.png
│   │   │   ├── help.png
│   │   │   ├── italic@2x.png
│   │   │   ├── italic.png
│   │   │   ├── line-height@2x.png
│   │   │   ├── line-height.png
│   │   │   ├── link@2x.png
│   │   │   ├── link.png
│   │   │   ├── orderlist@2x.png
│   │   │   ├── orderlist.png
│   │   │   ├── picture@2x.png
│   │   │   ├── picture.png
│   │   │   ├── table@2x.png
│   │   │   ├── table.png
│   │   │   ├── text@2x.png
│   │   │   ├── text.png
│   │   │   ├── underline@2x.png
│   │   │   ├── underline.png
│   │   │   ├── unlist@2x.png
│   │   │   ├── unlist.png
│   │   │   ├── unstyle@2x.png
│   │   │   ├── unstyle.png
│   │   │   ├── video@2x.png
│   │   │   └── video.png
│   │   ├── filemanager
│   │   │   ├── arrows.png
│   │   │   ├── icon
│   │   │   │   ├── css.png
│   │   │   │   ├── doc.png
│   │   │   │   ├── exe.png
│   │   │   │   ├── file.png
│   │   │   │   ├── flash.png
│   │   │   │   ├── folder.png
│   │   │   │   ├── html.png
│   │   │   │   ├── js.png
│   │   │   │   ├── mp3.png
│   │   │   │   ├── pdf.png
│   │   │   │   ├── perl.png
│   │   │   │   ├── php.png
│   │   │   │   ├── ppt.png
│   │   │   │   ├── psd.png
│   │   │   │   ├── py.png
│   │   │   │   ├── rar.png
│   │   │   │   ├── txt.png
│   │   │   │   ├── video.png
│   │   │   │   ├── xls.png
│   │   │   │   ├── xml.png
│   │   │   │   └── zip.png
│   │   │   ├── progress.gif
│   │   │   ├── quicklook-icons.png
│   │   │   ├── resize-preview.png
│   │   │   └── spinner-mini.gif
│   │   ├── gallery
│   │   │   ├── 1.jpg
│   │   │   ├── 2.jpg
│   │   │   ├── 3.jpg
│   │   │   ├── 4.jpg
│   │   │   ├── 5.jpg
│   │   │   └── thumbs
│   │   │   ├── 1.jpg
│   │   │   ├── 2.jpg
│   │   │   ├── 3.jpg
│   │   │   ├── 4.jpg
│   │   │   └── 5.jpg
│   │   ├── icon
│   │   │   ├── add@2x.png
│   │   │   ├── add.png
│   │   │   ├── archive@2x.png
│   │   │   ├── archive.png
│   │   │   ├── back@2x.png
│   │   │   ├── back.png
│   │   │   ├── calendar@2x.png
│   │   │   ├── calendar.png
│   │   │   ├── chart@2x.png
│   │   │   ├── chart.png
│   │   │   ├── day@2x.png
│   │   │   ├── day.png
│   │   │   ├── delete@2x.png
│   │   │   ├── delete.png
│   │   │   ├── file@2x.png
│   │   │   ├── file.png
│   │   │   ├── folder@2x.png
│   │   │   ├── folder.png
│   │   │   ├── folder-sm@2x.png
│   │   │   ├── folder-sm.png
│   │   │   ├── form@2x.png
│   │   │   ├── form.png
│   │   │   ├── forwad@2x.png
│   │   │   ├── forwad.png
│   │   │   ├── home@2x.png
│   │   │   ├── home.png
│   │   │   ├── icon-view@2x.png
│   │   │   ├── icon-view.png
│   │   │   ├── list-view@2x.png
│   │   │   ├── list-view.png
│   │   │   ├── menu@2x.png
│   │   │   ├── menu.png
│   │   │   ├── message@2x.png
│   │   │   ├── message.png
│   │   │   ├── month@2x.png
│   │   │   ├── month.png
│   │   │   ├── move@2x.png
│   │   │   ├── move.png
│   │   │   ├── pages@2x.png
│   │   │   ├── pages.png
│   │   │   ├── photos@2x.png
│   │   │   ├── photos.png
│   │   │   ├── plus-sm@2x.png
│   │   │   ├── plus-sm.png
│   │   │   ├── refresh@2x.png
│   │   │   ├── refresh.png
│   │   │   ├── search@2x.png
│   │   │   ├── search.png
│   │   │   ├── search-sm.png
│   │   │   ├── sorting@2x.png
│   │   │   ├── sorting.png
│   │   │   ├── spam@2x.png
│   │   │   ├── spam.png
│   │   │   ├── table@2x.png
│   │   │   ├── table.png
│   │   │   ├── tile-actions@2x.png
│   │   │   ├── tile-actions.png
│   │   │   ├── typography@2x.png
│   │   │   ├── typography.png
│   │   │   ├── ui@2x.png
│   │   │   ├── ui.png
│   │   │   ├── updates@2x.png
│   │   │   ├── updates.png
│   │   │   ├── upload@2x.png
│   │   │   ├── upload.png
│   │   │   ├── week@2x.png
│   │   │   ├── week.png
│   │   │   ├── widgets@2x.png
│   │   │   └── widgets.png
│   │   ├── images-doc
│   │   │   ├── circle.png
│   │   │   ├── rounded.png
│   │   │   ├── shadowed.png
│   │   │   └── thumbnail.png
│   │   ├── loadinfo.gif
│   │   ├── mapmaker.png
│   │   ├── media-player
│   │   │   ├── background.png
│   │   │   ├── bigplay.png
│   │   │   ├── bigplay.svg
│   │   │   ├── controls.png
│   │   │   ├── controls.svg
│   │   │   ├── loading.gif
│   │   │   └── media-player-poster.jpg
│   │   ├── Nova4.png
│   │   ├── profile-pic.jpg
│   │   ├── profile-pics
│   │   │   ├── 1.jpg
│   │   │   ├── 1.png
│   │   │   ├── 2.jpg
│   │   │   ├── 2.png
│   │   │   ├── 3.jpg
│   │   │   ├── 3.png
│   │   │   ├── 4.jpg
│   │   │   ├── 4.png
│   │   │   ├── 5.jpg
│   │   │   ├── 5.png
│   │   │   ├── 6.jpg
│   │   │   └── 6.png
│   │   ├── projects
│   │   │   ├── 1.png
│   │   │   ├── 2.png
│   │   │   └── 3.png
│   │   ├── qinghai.jpg
│   │   ├── qinghai.png
│   │   ├── select-bg.png
│   │   ├── shortcuts
│   │   │   ├── calendar.png
│   │   │   ├── connections.png
│   │   │   ├── money.png
│   │   │   ├── reports.png
│   │   │   ├── stats.png
│   │   │   └── twitter.png
│   │   ├── skin-blue.jpg
│   │   ├── skin-chrome.jpg
│   │   ├── skin-city.jpg
│   │   ├── skin-cloth.jpg
│   │   ├── skin-greenish.jpg
│   │   ├── skin-kiwi.jpg
│   │   ├── skin-lights.jpg
│   │   ├── skin-night.jpg
│   │   ├── skin-ocean.jpg
│   │   ├── skin-sunny.jpg
│   │   ├── skin-sunset.jpg
│   │   ├── skin-tectile.jpg
│   │   ├── skin-violate.jpg
│   │   ├── skin-yellow.jpg
│   │   ├── sort.png
│   │   └── swf
│   │   └── Red_glow.swf
│   ├── index.html
│   ├── js
│   │   ├── autosize.min.js
│   │   ├── bootstrap-3.3.4.css
│   │   ├── bootstrap.min.js
│   │   ├── calendar.min.js
│   │   ├── charts
│   │   │   ├── jquery.flot.animator.min.js
│   │   │   ├── jquery.flot.js
│   │   │   ├── jquery.flot.orderBar.js
│   │   │   ├── jquery.flot.pie.min.js
│   │   │   ├── jquery.flot.resize.min.js
│   │   │   └── jquery.flot.time.js
│   │   ├── charts.js
│   │   ├── chosen.min.js
│   │   ├── colorpicker.min.js
│   │   ├── datetimepicker.min.js
│   │   ├── deviceManager.js
│   │   ├── dianfei.js
│   │   ├── easypiechart.js
│   │   ├── echarts
│   │   │   └── echarts.min.js
│   │   ├── editor2.min.js
│   │   ├── editor.min.js
│   │   ├── enchart.js
│   │   ├── energy_consumption.js
│   │   ├── feeds.min.js
│   │   ├── file-manager
│   │   │   └── elfinder.min.js
│   │   ├── fileupload.min.js
│   │   ├── font-awesome.4.6.0.css
│   │   ├── functions.js
│   │   ├── icheck.js
│   │   ├── input-mask.min.js
│   │   ├── jquery.cookie.js
│   │   ├── jquery.datetimepicker.js
│   │   ├── jquery.easing.1.3.js
│   │   ├── jquery.hotspot.min.js
│   │   ├── jquery.min.js
│   │   ├── jquery-ui.min.js
│   │   ├── maps
│   │   │   ├── China.js
│   │   │   ├── jvectormap.min.js
│   │   │   ├── usa.js
│   │   │   └── world.js
│   │   ├── markdown.min.js
│   │   ├── media
│   │   │   └── flashmediaelement.swf
│   │   ├── media-player.min.js
│   │   ├── modernizr.custom.49511.js
│   │   ├── mstp_map.js
│   │   ├── pirobox.min.js
│   │   ├── scroll.min.js
│   │   ├── select.min.js
│   │   ├── slider.min.js
│   │   ├── sparkline.min.js
│   │   ├── spinner.min.js
│   │   ├── toggler.min.js
│   │   ├── validation
│   │   │   ├── validate.min.js
│   │   │   └── validationEngine.min.js
│   │   └── weather.min.js
│   ├── keyInfo.html
│   ├── labels.html
│   ├── list-view.html
│   ├── login.html
│   ├── media
│   │   └── flashmediaelement.swf
│   ├── media.html
│   ├── messages.html
│   ├── mstp_105_SuperAdmin.iml
│   ├── mstp_map.html
│   ├── other-components.html
│   ├── profile-page.html
│   ├── QHME.iml
│   ├── real-time.html
│   ├── sa.html
│   ├── tables.html
│   ├── typography.html
│   └── userMng.html
└── __MACOSX
├── 015
│   ├── css
│   ├── font
│   ├── images
│   ├── js
│   └── picture
├── 016
│   ├── css
│   ├── img
│   └── js
├── 017
│   ├── css
│   ├── images
│   └── js
├── 018
│   ├── css
│   │   └── font
│   ├── images
│   ├── js
│   └── less
├── 019
│   ├── css
│   ├── images
│   ├── js
│   └── picture
└── 020
├── assets
│   ├── amcharts
│   │   └── lang
│   ├── bootstrap-select
│   └── datepicker
│   ├── css
│   ├── js
│   ├── less
│   └── locales
├── css
├── fonts
│   ├── custom-ico-fonts
│   ├── fontawesome
│   ├── icons
│   └── opan-sans
├── img
│   ├── body
│   ├── browsers
│   ├── carousel
│   ├── color-picker
│   ├── editor
│   ├── filemanager
│   │   └── icon
│   ├── gallery
│   │   └── thumbs
│   ├── icon
│   ├── images-doc
│   ├── media-player
│   ├── profile-pics
│   ├── projects
│   ├── shortcuts
│   └── swf
├── js
│   ├── charts
│   ├── echarts
│   ├── file-manager
│   ├── maps
│   ├── media
│   └── validation
└── media

133 directories, 508 files