├── .gitignore ├── README.md ├── case01 ├── css │ ├── app.css │ └── bootstrap.min.css ├── img │ ├── bg01.png │ ├── bg02.png │ ├── bg03.png │ ├── bg04.png │ ├── header.png │ ├── panel.png │ └── thumb.jpg ├── index.html └── js │ ├── echarts-3.8.5.min.js │ ├── echarts-china-cities │ └── jiang1_su1_su1_zhou1.js │ ├── echarts-china-counties │ └── jiang1su1_su1zhou1_kun1shan1shi4.js │ ├── echarts-china-provinces │ └── jiangsu.js │ ├── echarts-map-china.js │ ├── echarts-map-world.js │ └── jquery-3.3.1.min.js ├── case02 ├── css │ ├── app.css │ └── bootstrap.min.css ├── img │ ├── bg05.png │ ├── bg06.png │ ├── bg07.png │ ├── bg08.png │ ├── bg09.jpg │ ├── globe.jpg │ ├── header.png │ ├── loading.gif │ ├── panel.png │ ├── pisa.hdr │ └── thumb.jpg ├── index.html └── js │ ├── echarts-gl.min.js │ ├── echarts.js │ └── jquery-3.3.1.min.js ├── case03 ├── css │ ├── app.css │ └── bootstrap.min.css ├── data │ ├── bmap.json │ ├── coord.json │ └── heatmap.json ├── img │ ├── bg02.png │ ├── header-left.png │ ├── header-right.png │ ├── loading.gif │ ├── panel.png │ └── thumb.jpg ├── index.html └── js │ ├── echarts-3.8.5.min.js │ ├── echarts-bmap.js │ └── jquery-3.3.1.min.js ├── case04 ├── css │ ├── app.css │ └── bootstrap.min.css ├── img │ ├── bg06.png │ ├── header-left.png │ ├── header-right.png │ ├── loading.gif │ ├── panel.png │ └── thumb.jpg ├── index.html └── js │ ├── echarts-3.8.5.min.js │ ├── echarts-liquidfill.min.js │ ├── echarts-map-china.js │ ├── echarts-wordcloud.min.js │ └── jquery-3.3.1.min.js ├── case06 ├── css │ └── app.css ├── data │ └── industry.json ├── img │ ├── bg.png │ ├── header.png │ └── thumb.jpg ├── index.html └── js │ ├── echarts-theme-shine.js │ ├── echarts.min.js │ └── jquery-3.3.1.min.js ├── case07 ├── css │ └── pace.css ├── data │ └── listed-company.json ├── img │ └── thumb.jpg ├── index.html └── js │ ├── echarts-bmap.js │ ├── echarts.min.js │ ├── jquery-3.3.1.min.js │ └── pace.min.js ├── case08 ├── css │ └── app.css ├── img │ ├── bg.png │ ├── header.png │ └── thumb.jpg ├── index.html └── js │ ├── echarts-theme-shine.js │ ├── echarts.min.js │ └── jquery-3.3.1.min.js ├── case09 ├── css │ └── app.css ├── data │ ├── count-data.json │ ├── csrc-industry.json │ ├── month-count.json │ ├── ranking-list.json │ └── region-count.json ├── img │ ├── bg.png │ ├── footer.png │ ├── header.png │ ├── icon-01.png │ ├── icon-02.png │ ├── icon-03.png │ ├── icon-04.png │ ├── icon-05.png │ ├── icon-06.png │ ├── icon-07.png │ ├── icon-bg.png │ └── thumb.jpg ├── index.html └── js │ ├── countUp.min.js │ ├── echarts-map-china.js │ ├── echarts-theme-shine.js │ ├── echarts.min.js │ └── jquery-3.3.1.min.js ├── datav ├── datav1.jpg └── datav2.jpg ├── index.html ├── sugar ├── sugar1.jpg └── sugar2.jpg ├── tpl01 ├── css │ └── app.css ├── img │ ├── bg.png │ ├── footer.png │ ├── header.png │ ├── icon-01.png │ ├── icon-02.png │ ├── icon-03.png │ ├── icon-04.png │ ├── icon-05.png │ ├── icon-06.png │ ├── icon-07.png │ ├── icon-bg.png │ └── thumb.jpg └── index.html ├── tpl02 ├── css │ └── app.css ├── img │ ├── bg.png │ ├── footer.png │ ├── header.png │ └── thumb.jpg └── index.html ├── tpl03 ├── css │ └── app.css ├── img │ ├── bg.png │ ├── chart-wrapper.png │ ├── header.png │ └── thumb.jpg └── index.html ├── tpl04 ├── css │ └── app.css ├── img │ ├── loading.gif │ ├── panel-c-b.png │ ├── panel-l-b.png │ ├── panel-l-t.png │ ├── panel-r-b.png │ ├── panel-r-m.png │ ├── panel-r-t.png │ ├── thumb.jpg │ ├── title-bg-long.png │ ├── title-bg.png │ └── wrapper-bg.png └── index.html ├── tpl05 ├── css │ └── app.css ├── img │ ├── chart-bg.png │ ├── chart-c-bg.png │ ├── chart-c-multi-bg.png │ ├── chart-multi-bg.png │ ├── container-bg.png │ ├── dashboard-bg.png │ ├── header-bg.png │ ├── header-title.png │ ├── icon-indicator.png │ ├── indicator-bg.png │ ├── map-bg.png │ ├── map-circle-inner.png │ ├── map-circle.png │ ├── panel-bg.png │ ├── panel-title-bg.png │ ├── point-1.png │ ├── point-2.png │ ├── point-3.png │ ├── point-4.png │ ├── point-5.png │ ├── tab-active.png │ └── thumb.png └── index.html └── yuntu ├── yuntu1.jpg └── yuntu2.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | .git 2 | .project 3 | *.zip 4 | test.html -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 大屏数据可视化 2 | 3 | ## 重要声明 4 | 5 | 本项目所有案例采用的数据均属虚构，切勿当真！ 6 | 7 | ## 项目案例 - 上市公司全景概览 8 | 9 | 综合使用条形图、柱状图、折线图、饼图、地图、数字翻牌器来实现一个常规的大屏数据可视化项目。 10 | 11 | ## 项目案例 - 上市公司地域分布 12 | 13 | 以百度地图为底图，结合ECharts绘制地理信息数据 14 | 15 | ## 旭日图 - 基于ECharts V4.2 16 | 17 | 旭日图（Sunburst）是ECharts 4.0新增的图表类型，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。 18 | 因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。 19 | 20 | ## 树图 - 基于ECharts V4.2 21 | 22 | 树图是一种流行的利用包含关系表达层次化数据的可视化方法。 23 | 24 | ## 地图数据可视化 - 基于ECharts Geo 25 | 26 | 地图热点、飞线动效，世界地图、中国地图、省份地图、城市地图、区县地图 27 | 28 | ## 3D图表展示 - 基于ECharts GL 29 | 30 | 3D柱形图，3D地球，二维数据的3D化展示 31 | 32 | ## 热力图展示 - 基于ECharts & 百度地图 33 | 34 | 基于百度地图的热力图，基于笛卡尔坐标系的热力图 35 | 36 | ## ECharts扩展示例 37 | 38 | 词云，水球图，烟花秀，关系图谱，中国地图 39 | 40 | ## 阿里云DataV案例 - 智慧文旅驾驶舱 41 | 42 | 基于阿里云DataV大屏制作工具，演示图表组件基本用法 43 | 44 | ## 阿里云DataV案例 - 企业实时销售大盘 45 | 46 | 基于DataV行业模板快速生成，采用静态JSON数据 47 | 48 | ## 百度Sugar案例 - 上交所上市公司全景概览 49 | 50 | 基于百度Sugar行业模板快速生成，采用远程数据源 51 | 52 | ## 百度Sugar案例 - 深交所上市公司全景概览 53 | 54 | 以已有的大屏为模板快速创建，切换风格，更改数据源 55 | 56 | ## 腾讯云图案例 - 云计算服务监控 57 | 58 | 基于腾讯云图平台提供的模板制作，采用静态JSON数据 59 | 60 | ## 腾讯云图案例 - 智慧零售门店数据（竖屏版） 61 | 62 | 基于腾讯云图平台提供的模板制作，采用静态JSON数据，适用于竖屏展示 63 | 64 | ## 大屏模板 65 | 66 | 可在这些不同风格的模板基础上快速开始一个可视化大屏项目 67 | 68 | ------------------------------------------------- 69 | 70 | 演示地址：[https://yyhsong.github.io/iDataV/](https://yyhsong.github.io/iDataV/) 71 | 72 | 项目简介：[https://blog.csdn.net/hwhsong/article/details/80805511](https://blog.csdn.net/hwhsong/article/details/80805511) -------------------------------------------------------------------------------- /case01/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /********** Global **********/ 4 | /* 5 | *常用背景色： #0b0f34 (6,64,102) (29,45,57) (7,33,58) (8,13,28) (15,43,36) 6 | */ 7 | html, body { 8 | width:100%; 9 | height:100%; 10 | min-height:635px; 11 | font-family:"microsoft yahei", arial, sans-serif; 12 | background-color:#0f1c30; 13 | background-repeat:no-repeat; 14 | background-position:center; 15 | background-size:100% 100%; 16 | overflow-x:hidden; 17 | overflow-y:auto; 18 | } 19 | body.bg01 {background-image:url("../img/bg01.png");} 20 | body.bg02 {background-image:url("../img/bg02.png");} 21 | body.bg03 {background-image:url("../img/bg03.png");} 22 | body.bg04 {background-image:url("../img/bg04.png");} 23 | .header { 24 | margin:0 auto; 25 | width:100%; 26 | height:65px; 27 | max-width:1920px; 28 | background:url("../img/header.png") center no-repeat; 29 | } 30 | .header h3 { 31 | margin:0; 32 | padding:0; 33 | line-height:50px; 34 | text-align:center; 35 | font-size:24px; 36 | color:#5dc2fe; 37 | } 38 | .wrapper {position:absolute;top:80px;bottom:0;left:0;right:0;min-height:555px;} 39 | .container-fluid {height:100%;min-height:100%;} 40 | .row {margin-left:-7px;margin-right:-8px;} 41 | .row>div {padding-left:7px;padding-right:8px;} 42 | .xpanel-wrapper {padding-bottom:15px;box-sizing:border-box;} 43 | .xpanel-wrapper-1 {height:100%;} 44 | .xpanel-wrapper-2 {height:50%;} 45 | .xpanel-wrapper-3 {height:33.33333%;} 46 | .xpanel { 47 | padding:15px; 48 | height:100%; 49 | min-height:170px; 50 | background:url("../img/panel.png") center no-repeat; 51 | background-size:100% 100%; 52 | box-sizing:border-box; 53 | } 54 | 55 | /* tool */ 56 | .fill-h {height:100%;min-height:100%;} 57 | .no-margin {margin:0 !important;} 58 | .no-padding {padding:0 !important;} 59 | 60 | /* scrollbar */ 61 | ::-webkit-scrollbar {width:0;height:0;} 62 | ::-webkit-scrollbar-track {background-color:transparent;} 63 | ::-webkit-scrollbar-thumb {border-radius:5px;background-color:rgba(0, 0, 0, 0.3);} -------------------------------------------------------------------------------- /case01/img/bg01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case01/img/bg01.png -------------------------------------------------------------------------------- /case01/img/bg02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case01/img/bg02.png -------------------------------------------------------------------------------- /case01/img/bg03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case01/img/bg03.png -------------------------------------------------------------------------------- /case01/img/bg04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case01/img/bg04.png -------------------------------------------------------------------------------- /case01/img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case01/img/header.png -------------------------------------------------------------------------------- /case01/img/panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case01/img/panel.png -------------------------------------------------------------------------------- /case01/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case01/img/thumb.jpg -------------------------------------------------------------------------------- /case01/js/echarts-china-counties/jiang1su1_su1zhou1_kun1shan1shi4.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) {if (typeof define === 'function' && define.amd) {define(['exports', 'echarts'], factory);} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {factory(exports, require('echarts'));} else {factory({}, root.echarts);}}(this, function (exports, echarts) {var log = function (msg) {if (typeof console !== 'undefined') {console && console.error && console.error(msg);}};if (!echarts) {log('ECharts is not Loaded');return;}if (!echarts.registerMap) {log('ECharts Map is not loaded');return;}echarts.registerMap('昆山市', {"type":"FeatureCollection","features":[{"type":"Feature","id":"320583","properties":{"name":"昆山市","cp":[120.980736,31.385597],"childNum":1},"geometry":{"type":"Polygon","coordinates":["@@GACASDEBWFMBSBYDCAEAGAICGAE@AAC@A@MDA@MASAA@AAA@AAAACCAAAAACAC@A@A@CCCEE@@AAA@AAA@@CCCA@A@@A@ACBGFAA@@A@A@A@A@@@@@@@@@@@@B@@@@A@AB@@DBA@ADCBGDSJMFKB@N@BAJ@F@N@BBBJ@B@B@@F@BAH@F@B@BA@@B@@BB@@BB@B@B@@A@AB@@@@A@@@@@A@@@@BA@@@@A@@EDAAABGBEFCBJTHN^FLHB@LHPFHFHDHBRBHCFADAD@BHF@@DF@HAH@D@BFF@AF@DABFB@FC@AD@B@@@@CJ@@@@@BAB@@C@AB@BAB@@C@AAA@@D@BAFBBBBD@BB@B@B@@@@A@C@AD@@CAAJAB@BAD@@@BA@BB@BABAB@B@B@D@@@@@BBB@@D@@@@BA@@@E@BD@@AFD@@@DD@@@BGA@DD@@@D@@B@B@BE@@BC@@D@B@@AB@DABA@A@EBABA@@NADADAD@@ABADAB@B@@GNERCJCF@JCLCNG\\CAAFEACDFBADOAB@EAADC@@BOC@HFDE^@BFV@FBNDPH\\BD@@DHDT@RK^ADAJADGHAB@BAB@BE@@DA@@@AB@BBFBF@H@B@@@@A@A@A@A@DB@@@B@@@B@@CAA@@B@D@B@@ABC@@BA@@@@B@@@BB@BBF@B@@BBB@@A@BB@DB@D@@@@A@@B@@BB@@@B@F@LBJ@RBB@DBFA@C@@ACCB@GB@@DD@BK@@A@A@@@BBA@A@@@@@@AC@@BC@@A@@@@D@BAB@@@AA@@AA@ADBB@BAB@@@FBB@@EF@@D@@F@D@BAF@BEB@@BBJC@@F@BNE@BEB@DFABBC@BBC@BB@@BBABB@AB@BB@AB@FF@@BA@@BD@@BD@@HB@@@@B@@B@BAD@@@BBB@BB@@@BAB@@BDHCBB@@BB@ABB@@B@HCDFCD@BAB@BD@B@DADC@AEGEEAAAAFGDBVHDKAAJGBDHDJDFDHFHD@A@CD@@EBEE@BAB@BGDBBEB@@@BBABDBDMH@DIB@@C@@@CD@@CCA@AFB@AB@@AB@@@@@@DB@@@BBD@@@D@DA@CBABABA@@B@BBB@@@B@@ABADBB@@A@BBCFDBBJF@@B@BADELFDGFBBCDBD@DAB@CBBBDABDD@@CAA@EHEAAFEFB@CECC@AA@ABAAA@ABACC@AAA@C@AC@@CA@A@@GD@@C@A@A@A@@HCHABAH@AAACCCEABE@GDA@@@@@CB@AEH@BCJABBB@D@D@DBJEBCBABABBFC@@DB@BBBDBDBBBB@B@B@B@@ABGD@@CH@@CB@NHFHDFDDB@B@B@DCHEBAFIDCCABA@@@@MEACACL@AIACCEAACE@E@CAA@@@C@AD@DGBAB@BA@BDB@BBB@BB@@@@@B@@@@A@@FSB@DKA@FO@@@@@A@A@ABC@@@@@A@C@@@A@AA@BA@@AA@@B@BAAA@@@CB@D@@@B@@AB@BBD@DB@ABABA@ABAA@C@@GF@B@B@BAFBB@DBB@@@@A@A@@@A@@AABA@@@A@@@A@A@@@AA@BAB@AABA@@B@@AB@AAB@@A@AA@AAB@B@@A@AA@@@A@@A@A@@@A@@AA@@A@@A@@@AA@@@A@@A@@@A@A@@BA@A@@@A@@@A@A@@BAAAB@@A@A@A@A@ABAAABAB@B@B@NBAD@@@BFDDDDEBADI@@DCC@@AA@@AB@BA@BBAB@@@BCCA@CBBBA@@@CDB@@@C@@D@@AD@@@B@BEBAA@@AC@BAAAA@C@@A@AAAAA@@EAEAA@C@CB@DC@@AA@A@A@@@ABBBCBAAC@BDEB@CGBED@B@@BBGB@BA@@@@A@AC@ABA@C@AAACCAACCCAAEC@@D@AAC@CBCBAD@B@BABAFAFADA@@BA@ABABCBCABA@@EECMAGFACE@ACCA@E@EAA@CAC@C@G@@@AA@@B@AI@GBAA@@A@@AA@@B@@CAG@A@@@CA@ABAA@@@@B@BA@@B@@@@@@@@@@@B@@BB@B@@C@ABA@AAB@C@A@ACAA@BC@AB@B@@AB@@AD@@A@AA@A@@C@CC@@A@@@A@@@A@@@@@A@@@@@A@@@ABA@@@A@A@ABA@@@A@@@A@@@@@A@ABA@@@A@@@A@ABA@E@ABA@C@@BA@A@@@CA@A@@@@CF@@ADABAA@AA@A@@@ABA@@@A@AA@CABCJBBAICBCBADCBEEA@AA@@ABAFB@ADE@CIABCFB@A@AA@BCEC@@A@@A@CA@@DAA@ACAAABC@A@AEBA@BB@BC@@BA@@BE@E@AAA@BAC@C@C@@BAFGA@CCACA@@@EBAB@B@CIACACC@@BAAA@AFCB@@ABC@CA@B@@@DC@@A@@AA@AE@AABCGGA@A@SAA@]@C@"],"encodeOffsets":[[123894,31881]]}}],"UTF8Encoding":true});})); -------------------------------------------------------------------------------- /case02/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /********** Global **********/ 4 | /* 5 | *常用背景色： #0f1c30 #0b0f34 (6,64,102) (29,45,57) (7,33,58) (8,13,28) (15,43,36) 6 | */ 7 | html, body { 8 | width:100%; 9 | height:100%; 10 | min-height:635px; 11 | font-family:"microsoft yahei", arial, sans-serif; 12 | background-color:#0f1c30; 13 | background-repeat:no-repeat; 14 | background-position:center; 15 | background-size:100% 100%; 16 | overflow-x:hidden; 17 | overflow-y:auto; 18 | } 19 | body.bg05 {background-image:url("../img/bg05.png");} 20 | body.bg06 {background-image:url("../img/bg06.png");} 21 | body.bg07 {background-image:url("../img/bg07.png");} 22 | body.bg08 {background-image:url("../img/bg08.png");} 23 | .header { 24 | margin:0 auto; 25 | width:100%; 26 | height:72px; 27 | max-width:1920px; 28 | background:url("../img/header.png") center no-repeat; 29 | background-size:100% 100%; 30 | } 31 | .header h3 { 32 | margin:0; 33 | padding:0; 34 | line-height:44px; 35 | text-align:center; 36 | font-size:24px; 37 | color:#5dc2fe; 38 | } 39 | .wrapper {position:absolute;top:87px;bottom:0;left:0;right:0;min-height:545px;} 40 | .container-fluid {height:100%;min-height:100%;} 41 | .row {margin-left:-7px;margin-right:-8px;} 42 | .row>div {padding-left:7px;padding-right:8px;} 43 | .xpanel-wrapper {padding-bottom:15px;box-sizing:border-box;} 44 | .xpanel-wrapper-1 {height:100%;} 45 | .xpanel-wrapper-2 {height:50%;} 46 | .xpanel-wrapper-1-3 {height:33.33333%;} 47 | .xpanel-wrapper-2-3 {height:66.66666%;} 48 | .xpanel { 49 | padding:15px; 50 | height:100%; 51 | min-height:170px; 52 | background:url("../img/panel.png") center no-repeat; 53 | background-size:100% 100%; 54 | box-sizing:border-box; 55 | } 56 | 57 | /* tool */ 58 | .fill-h {height:100%;min-height:100%;} 59 | .no-margin {margin:0 !important;} 60 | .no-padding {padding:0 !important;} 61 | .no-bg {background:none !important;} 62 | .no-border {border:0 !important;} 63 | 64 | /* scrollbar */ 65 | ::-webkit-scrollbar {width:0;height:0;} 66 | ::-webkit-scrollbar-track {background-color:transparent;} 67 | ::-webkit-scrollbar-thumb {border-radius:5px;background-color:rgba(0, 0, 0, 0.3);} -------------------------------------------------------------------------------- /case02/img/bg05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/bg05.png -------------------------------------------------------------------------------- /case02/img/bg06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/bg06.png -------------------------------------------------------------------------------- /case02/img/bg07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/bg07.png -------------------------------------------------------------------------------- /case02/img/bg08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/bg08.png -------------------------------------------------------------------------------- /case02/img/bg09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/bg09.jpg -------------------------------------------------------------------------------- /case02/img/globe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/globe.jpg -------------------------------------------------------------------------------- /case02/img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/header.png -------------------------------------------------------------------------------- /case02/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/loading.gif -------------------------------------------------------------------------------- /case02/img/panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/panel.png -------------------------------------------------------------------------------- /case02/img/pisa.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/pisa.hdr -------------------------------------------------------------------------------- /case02/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case02/img/thumb.jpg -------------------------------------------------------------------------------- /case02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 3D图表展示 9 | 10 | 11 | 12 | 13 | 14 |
15 |

3D图表展示

16 |
17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 | 45 | 46 | 47 | 282 | 283 | -------------------------------------------------------------------------------- /case03/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /********** Global **********/ 4 | /* 5 | *常用背景色： #0f1c30 #0b0f34 (6,64,102) (29,45,57) (7,33,58) (8,13,28) (15,43,36) 6 | */ 7 | html, body { 8 | width:100%; 9 | height:100%; 10 | min-height:635px; 11 | font-family:"microsoft yahei", arial, sans-serif; 12 | background-color:#0f0a28; 13 | background-repeat:no-repeat; 14 | background-position:center; 15 | background-size:100% 100%; 16 | overflow-x:hidden; 17 | overflow-y:auto; 18 | } 19 | body.bg02 {background-image:url("../img/bg02.png");} 20 | .header { 21 | margin:0 auto; 22 | width:100%; 23 | height:42px; 24 | max-width:1920px; 25 | background:url("../img/header-left.png") left center no-repeat, url("../img/header-right.png") right center no-repeat; 26 | background-size:43% 80%, 43% 80%; 27 | overflow:hidden; 28 | } 29 | .header h3 { 30 | margin:0; 31 | padding:0; 32 | line-height:42px; 33 | text-align:center; 34 | font-size:24px; 35 | color:#5dc2fe; 36 | } 37 | @media (max-width: 1199px) { 38 | .header { 39 | background-size:25% 60%, 25% 60%; 40 | } 41 | } 42 | .wrapper {position:absolute;top:57px;bottom:0;left:0;right:0;min-height:565px;} 43 | .container-fluid {height:100%;min-height:100%;} 44 | .row {margin-left:-7px;margin-right:-8px;} 45 | .row>div {padding-left:7px;padding-right:8px;} 46 | .xpanel-wrapper {padding-bottom:15px;box-sizing:border-box;} 47 | .xpanel-wrapper-1 {height:100%;} 48 | .xpanel-wrapper-2 {height:50%;} 49 | .xpanel-wrapper-1-3 {height:33.33333%;} 50 | .xpanel-wrapper-2-3 {height:66.66666%;} 51 | .xpanel { 52 | padding:15px; 53 | height:100%; 54 | min-height:170px; 55 | background:url("../img/panel.png") center no-repeat; 56 | background-size:100% 100%; 57 | box-sizing:border-box; 58 | } 59 | 60 | /* tool */ 61 | .fill-h {height:100%;min-height:100%;} 62 | .no-margin {margin:0 !important;} 63 | .no-padding {padding:0 !important;} 64 | .no-bg {background:none !important;} 65 | .no-border {border:0 !important;} 66 | 67 | /* scrollbar */ 68 | ::-webkit-scrollbar {width:0;height:0;} 69 | ::-webkit-scrollbar-track {background-color:transparent;} 70 | ::-webkit-scrollbar-thumb {border-radius:5px;background-color:rgba(0, 0, 0, 0.3);} -------------------------------------------------------------------------------- /case03/data/coord.json: -------------------------------------------------------------------------------- 1 | [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]] -------------------------------------------------------------------------------- /case03/img/bg02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case03/img/bg02.png -------------------------------------------------------------------------------- /case03/img/header-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case03/img/header-left.png -------------------------------------------------------------------------------- /case03/img/header-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case03/img/header-right.png -------------------------------------------------------------------------------- /case03/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case03/img/loading.gif -------------------------------------------------------------------------------- /case03/img/panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case03/img/panel.png -------------------------------------------------------------------------------- /case03/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case03/img/thumb.jpg -------------------------------------------------------------------------------- /case03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 热力图展示 9 | 10 | 11 | 12 | 13 | 14 |
15 |

热力图展示

16 |
17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 | 45 | 46 | 47 | 48 | 251 | 252 | -------------------------------------------------------------------------------- /case03/js/echarts-bmap.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('echarts')) : 3 | typeof define === 'function' && define.amd ? define(['exports', 'echarts'], factory) : 4 | (factory((global.bmap = {}),global.echarts)); 5 | }(this, (function (exports,echarts) { 'use strict'; 6 | 7 | /* 8 | * Licensed to the Apache Software Foundation (ASF) under one 9 | * or more contributor license agreements. See the NOTICE file 10 | * distributed with this work for additional information 11 | * regarding copyright ownership. The ASF licenses this file 12 | * to you under the Apache License, Version 2.0 (the 13 | * "License"); you may not use this file except in compliance 14 | * with the License. You may obtain a copy of the License at 15 | * 16 | * http://www.apache.org/licenses/LICENSE-2.0 17 | * 18 | * Unless required by applicable law or agreed to in writing, 19 | * software distributed under the License is distributed on an 20 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 21 | * KIND, either express or implied. See the License for the 22 | * specific language governing permissions and limitations 23 | * under the License. 24 | */ 25 | 26 | /* global BMap */ 27 | 28 | function BMapCoordSys(bmap, api) { 29 | this._bmap = bmap; 30 | this.dimensions = ['lng', 'lat']; 31 | this._mapOffset = [0, 0]; 32 | 33 | this._api = api; 34 | 35 | this._projection = new BMap.MercatorProjection(); 36 | } 37 | 38 | BMapCoordSys.prototype.dimensions = ['lng', 'lat']; 39 | 40 | BMapCoordSys.prototype.setZoom = function (zoom) { 41 | this._zoom = zoom; 42 | }; 43 | 44 | BMapCoordSys.prototype.setCenter = function (center) { 45 | this._center = this._projection.lngLatToPoint(new BMap.Point(center[0], center[1])); 46 | }; 47 | 48 | BMapCoordSys.prototype.setMapOffset = function (mapOffset) { 49 | this._mapOffset = mapOffset; 50 | }; 51 | 52 | BMapCoordSys.prototype.getBMap = function () { 53 | return this._bmap; 54 | }; 55 | 56 | BMapCoordSys.prototype.dataToPoint = function (data) { 57 | var point = new BMap.Point(data[0], data[1]); 58 | // TODO mercator projection is toooooooo slow 59 | // var mercatorPoint = this._projection.lngLatToPoint(point); 60 | 61 | // var width = this._api.getZr().getWidth(); 62 | // var height = this._api.getZr().getHeight(); 63 | // var divider = Math.pow(2, 18 - 10); 64 | // return [ 65 | // Math.round((mercatorPoint.x - this._center.x) / divider + width / 2), 66 | // Math.round((this._center.y - mercatorPoint.y) / divider + height / 2) 67 | // ]; 68 | var px = this._bmap.pointToOverlayPixel(point); 69 | var mapOffset = this._mapOffset; 70 | return [px.x - mapOffset[0], px.y - mapOffset[1]]; 71 | }; 72 | 73 | BMapCoordSys.prototype.pointToData = function (pt) { 74 | var mapOffset = this._mapOffset; 75 | var pt = this._bmap.overlayPixelToPoint({ 76 | x: pt[0] + mapOffset[0], 77 | y: pt[1] + mapOffset[1] 78 | }); 79 | return [pt.lng, pt.lat]; 80 | }; 81 | 82 | BMapCoordSys.prototype.getViewRect = function () { 83 | var api = this._api; 84 | return new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight()); 85 | }; 86 | 87 | BMapCoordSys.prototype.getRoamTransform = function () { 88 | return echarts.matrix.create(); 89 | }; 90 | 91 | BMapCoordSys.prototype.prepareCustoms = function (data) { 92 | var rect = this.getViewRect(); 93 | return { 94 | coordSys: { 95 | // The name exposed to user is always 'cartesian2d' but not 'grid'. 96 | type: 'bmap', 97 | x: rect.x, 98 | y: rect.y, 99 | width: rect.width, 100 | height: rect.height 101 | }, 102 | api: { 103 | coord: echarts.util.bind(this.dataToPoint, this), 104 | size: echarts.util.bind(dataToCoordSize, this) 105 | } 106 | }; 107 | }; 108 | 109 | function dataToCoordSize(dataSize, dataItem) { 110 | dataItem = dataItem || [0, 0]; 111 | return echarts.util.map([0, 1], function (dimIdx) { 112 | var val = dataItem[dimIdx]; 113 | var halfSize = dataSize[dimIdx] / 2; 114 | var p1 = []; 115 | var p2 = []; 116 | p1[dimIdx] = val - halfSize; 117 | p2[dimIdx] = val + halfSize; 118 | p1[1 - dimIdx] = p2[1 - dimIdx] = dataItem[1 - dimIdx]; 119 | return Math.abs(this.dataToPoint(p1)[dimIdx] - this.dataToPoint(p2)[dimIdx]); 120 | }, this); 121 | } 122 | 123 | var Overlay; 124 | 125 | // For deciding which dimensions to use when creating list data 126 | BMapCoordSys.dimensions = BMapCoordSys.prototype.dimensions; 127 | 128 | function createOverlayCtor() { 129 | function Overlay(root) { 130 | this._root = root; 131 | } 132 | 133 | Overlay.prototype = new BMap.Overlay(); 134 | /** 135 | * 初始化 136 | * 137 | * @param {BMap.Map} map 138 | * @override 139 | */ 140 | Overlay.prototype.initialize = function (map) { 141 | map.getPanes().labelPane.appendChild(this._root); 142 | return this._root; 143 | }; 144 | /** 145 | * @override 146 | */ 147 | Overlay.prototype.draw = function () {}; 148 | 149 | return Overlay; 150 | } 151 | 152 | BMapCoordSys.create = function (ecModel, api) { 153 | var bmapCoordSys; 154 | var root = api.getDom(); 155 | 156 | // TODO Dispose 157 | ecModel.eachComponent('bmap', function (bmapModel) { 158 | var painter = api.getZr().painter; 159 | var viewportRoot = painter.getViewportRoot(); 160 | if (typeof BMap === 'undefined') { 161 | throw new Error('BMap api is not loaded'); 162 | } 163 | Overlay = Overlay || createOverlayCtor(); 164 | if (bmapCoordSys) { 165 | throw new Error('Only one bmap component can exist'); 166 | } 167 | if (!bmapModel.__bmap) { 168 | // Not support IE8 169 | var bmapRoot = root.querySelector('.ec-extension-bmap'); 170 | if (bmapRoot) { 171 | // Reset viewport left and top, which will be changed 172 | // in moving handler in BMapView 173 | viewportRoot.style.left = '0px'; 174 | viewportRoot.style.top = '0px'; 175 | root.removeChild(bmapRoot); 176 | } 177 | bmapRoot = document.createElement('div'); 178 | bmapRoot.style.cssText = 'width:100%;height:100%'; 179 | // Not support IE8 180 | bmapRoot.classList.add('ec-extension-bmap'); 181 | root.appendChild(bmapRoot); 182 | var bmap = bmapModel.__bmap = new BMap.Map(bmapRoot); 183 | 184 | var overlay = new Overlay(viewportRoot); 185 | bmap.addOverlay(overlay); 186 | 187 | // Override 188 | painter.getViewportRootOffset = function () { 189 | return {offsetLeft: 0, offsetTop: 0}; 190 | }; 191 | } 192 | var bmap = bmapModel.__bmap; 193 | 194 | // Set bmap options 195 | // centerAndZoom before layout and render 196 | var center = bmapModel.get('center'); 197 | var zoom = bmapModel.get('zoom'); 198 | if (center && zoom) { 199 | var pt = new BMap.Point(center[0], center[1]); 200 | bmap.centerAndZoom(pt, zoom); 201 | } 202 | 203 | bmapCoordSys = new BMapCoordSys(bmap, api); 204 | bmapCoordSys.setMapOffset(bmapModel.__mapOffset || [0, 0]); 205 | bmapCoordSys.setZoom(zoom); 206 | bmapCoordSys.setCenter(center); 207 | 208 | bmapModel.coordinateSystem = bmapCoordSys; 209 | }); 210 | 211 | ecModel.eachSeries(function (seriesModel) { 212 | if (seriesModel.get('coordinateSystem') === 'bmap') { 213 | seriesModel.coordinateSystem = bmapCoordSys; 214 | } 215 | }); 216 | }; 217 | 218 | /* 219 | * Licensed to the Apache Software Foundation (ASF) under one 220 | * or more contributor license agreements. See the NOTICE file 221 | * distributed with this work for additional information 222 | * regarding copyright ownership. The ASF licenses this file 223 | * to you under the Apache License, Version 2.0 (the 224 | * "License"); you may not use this file except in compliance 225 | * with the License. You may obtain a copy of the License at 226 | * 227 | * http://www.apache.org/licenses/LICENSE-2.0 228 | * 229 | * Unless required by applicable law or agreed to in writing, 230 | * software distributed under the License is distributed on an 231 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 232 | * KIND, either express or implied. See the License for the 233 | * specific language governing permissions and limitations 234 | * under the License. 235 | */ 236 | 237 | function v2Equal(a, b) { 238 | return a && b && a[0] === b[0] && a[1] === b[1]; 239 | } 240 | 241 | echarts.extendComponentModel({ 242 | type: 'bmap', 243 | 244 | getBMap: function () { 245 | // __bmap is injected when creating BMapCoordSys 246 | return this.__bmap; 247 | }, 248 | 249 | setCenterAndZoom: function (center, zoom) { 250 | this.option.center = center; 251 | this.option.zoom = zoom; 252 | }, 253 | 254 | centerOrZoomChanged: function (center, zoom) { 255 | var option = this.option; 256 | return !(v2Equal(center, option.center) && zoom === option.zoom); 257 | }, 258 | 259 | defaultOption: { 260 | 261 | center: [104.114129, 37.550339], 262 | 263 | zoom: 5, 264 | 265 | mapStyle: {}, 266 | 267 | roam: false 268 | } 269 | }); 270 | 271 | /* 272 | * Licensed to the Apache Software Foundation (ASF) under one 273 | * or more contributor license agreements. See the NOTICE file 274 | * distributed with this work for additional information 275 | * regarding copyright ownership. The ASF licenses this file 276 | * to you under the Apache License, Version 2.0 (the 277 | * "License"); you may not use this file except in compliance 278 | * with the License. You may obtain a copy of the License at 279 | * 280 | * http://www.apache.org/licenses/LICENSE-2.0 281 | * 282 | * Unless required by applicable law or agreed to in writing, 283 | * software distributed under the License is distributed on an 284 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 285 | * KIND, either express or implied. See the License for the 286 | * specific language governing permissions and limitations 287 | * under the License. 288 | */ 289 | 290 | echarts.extendComponentView({ 291 | type: 'bmap', 292 | 293 | render: function (bMapModel, ecModel, api) { 294 | var rendering = true; 295 | 296 | var bmap = bMapModel.getBMap(); 297 | var viewportRoot = api.getZr().painter.getViewportRoot(); 298 | var coordSys = bMapModel.coordinateSystem; 299 | var moveHandler = function (type, target) { 300 | if (rendering) { 301 | return; 302 | } 303 | var offsetEl = viewportRoot.parentNode.parentNode.parentNode; 304 | var mapOffset = [ 305 | -parseInt(offsetEl.style.left, 10) || 0, 306 | -parseInt(offsetEl.style.top, 10) || 0 307 | ]; 308 | viewportRoot.style.left = mapOffset[0] + 'px'; 309 | viewportRoot.style.top = mapOffset[1] + 'px'; 310 | 311 | coordSys.setMapOffset(mapOffset); 312 | bMapModel.__mapOffset = mapOffset; 313 | 314 | api.dispatchAction({ 315 | type: 'bmapRoam' 316 | }); 317 | }; 318 | 319 | function zoomEndHandler() { 320 | if (rendering) { 321 | return; 322 | } 323 | api.dispatchAction({ 324 | type: 'bmapRoam' 325 | }); 326 | } 327 | 328 | bmap.removeEventListener('moving', this._oldMoveHandler); 329 | // FIXME 330 | // Moveend may be triggered by centerAndZoom method when creating coordSys next time 331 | // bmap.removeEventListener('moveend', this._oldMoveHandler); 332 | bmap.removeEventListener('zoomend', this._oldZoomEndHandler); 333 | bmap.addEventListener('moving', moveHandler); 334 | // bmap.addEventListener('moveend', moveHandler); 335 | bmap.addEventListener('zoomend', zoomEndHandler); 336 | 337 | this._oldMoveHandler = moveHandler; 338 | this._oldZoomEndHandler = zoomEndHandler; 339 | 340 | var roam = bMapModel.get('roam'); 341 | if (roam && roam !== 'scale') { 342 | bmap.enableDragging(); 343 | } 344 | else { 345 | bmap.disableDragging(); 346 | } 347 | if (roam && roam !== 'move') { 348 | bmap.enableScrollWheelZoom(); 349 | bmap.enableDoubleClickZoom(); 350 | bmap.enablePinchToZoom(); 351 | } 352 | else { 353 | bmap.disableScrollWheelZoom(); 354 | bmap.disableDoubleClickZoom(); 355 | bmap.disablePinchToZoom(); 356 | } 357 | 358 | var originalStyle = bMapModel.__mapStyle; 359 | 360 | var newMapStyle = bMapModel.get('mapStyle') || {}; 361 | // FIXME, Not use JSON methods 362 | var mapStyleStr = JSON.stringify(newMapStyle); 363 | if (JSON.stringify(originalStyle) !== mapStyleStr) { 364 | // FIXME May have blank tile when dragging if setMapStyle 365 | if (Object.keys(newMapStyle).length) { 366 | bmap.setMapStyle(newMapStyle); 367 | } 368 | bMapModel.__mapStyle = JSON.parse(mapStyleStr); 369 | } 370 | 371 | rendering = false; 372 | } 373 | }); 374 | 375 | /* 376 | * Licensed to the Apache Software Foundation (ASF) under one 377 | * or more contributor license agreements. See the NOTICE file 378 | * distributed with this work for additional information 379 | * regarding copyright ownership. The ASF licenses this file 380 | * to you under the Apache License, Version 2.0 (the 381 | * "License"); you may not use this file except in compliance 382 | * with the License. You may obtain a copy of the License at 383 | * 384 | * http://www.apache.org/licenses/LICENSE-2.0 385 | * 386 | * Unless required by applicable law or agreed to in writing, 387 | * software distributed under the License is distributed on an 388 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 389 | * KIND, either express or implied. See the License for the 390 | * specific language governing permissions and limitations 391 | * under the License. 392 | */ 393 | 394 | /** 395 | * BMap component extension 396 | */ 397 | 398 | echarts.registerCoordinateSystem('bmap', BMapCoordSys); 399 | 400 | // Action 401 | echarts.registerAction({ 402 | type: 'bmapRoam', 403 | event: 'bmapRoam', 404 | update: 'updateLayout' 405 | }, function (payload, ecModel) { 406 | ecModel.eachComponent('bmap', function (bMapModel) { 407 | var bmap = bMapModel.getBMap(); 408 | var center = bmap.getCenter(); 409 | bMapModel.setCenterAndZoom([center.lng, center.lat], bmap.getZoom()); 410 | }); 411 | }); 412 | 413 | var version = '1.0.0'; 414 | 415 | exports.version = version; 416 | 417 | }))); 418 | //# sourceMappingURL=bmap.js.map 419 | -------------------------------------------------------------------------------- /case04/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /********** Global **********/ 4 | /* 5 | *常用背景色： #0f1c30 #0b0f34 (6,64,102) (29,45,57) (7,33,58) (8,13,28) (15,43,36) 6 | */ 7 | html, body { 8 | width:100%; 9 | height:100%; 10 | min-height:635px; 11 | font-family:"microsoft yahei", arial, sans-serif; 12 | background-color:#152a59; 13 | background-repeat:no-repeat; 14 | background-position:center; 15 | background-size:100% 100%; 16 | overflow-x:hidden; 17 | overflow-y:auto; 18 | } 19 | body.bg06 {background-image:url("../img/bg06.png");} 20 | .header { 21 | margin:0 auto; 22 | width:100%; 23 | height:55px; 24 | max-width:1920px; 25 | background:url("../img/header-left.png") left center no-repeat, url("../img/header-right.png") right center no-repeat; 26 | background-size:43% 100%, 43% 100%; 27 | overflow:hidden; 28 | } 29 | .header h3 { 30 | margin:0; 31 | padding:0; 32 | line-height:60px; 33 | text-align:center; 34 | font-size:24px; 35 | color:#5dc2fe; 36 | } 37 | @media (max-width: 1199px) { 38 | .header { 39 | background:url("../img/header-left.png") left bottom no-repeat, url("../img/header-right.png") right bottom no-repeat; 40 | background-size:100%, 100%; 41 | } 42 | .header h3 {line-height:48px;} 43 | } 44 | .wrapper {position:absolute;top:70px;bottom:0;left:0;right:0;min-height:555px;} 45 | .container-fluid {height:100%;min-height:100%;} 46 | .row {margin-left:-7px;margin-right:-8px;} 47 | .row>div {padding-left:7px;padding-right:8px;} 48 | .xpanel-wrapper {padding-bottom:15px;box-sizing:border-box;} 49 | .xpanel-wrapper-1 {height:100%;} 50 | .xpanel-wrapper-1-2 {height:50%;} 51 | .xpanel-wrapper-1-3 {height:33.33333%;} 52 | .xpanel-wrapper-2-3 {height:66.66666%;} 53 | .xpanel { 54 | padding:15px; 55 | height:100%; 56 | min-height:170px; 57 | background:url("../img/panel.png") center no-repeat; 58 | background-size:100% 100%; 59 | box-sizing:border-box; 60 | } 61 | 62 | /* tool */ 63 | .fill-h {height:100%;min-height:100%;} 64 | .no-margin {margin:0 !important;} 65 | .no-padding {padding:0 !important;} 66 | .no-bg {background:none !important;} 67 | .no-border {border:0 !important;} 68 | 69 | /* scrollbar */ 70 | ::-webkit-scrollbar {width:0;height:0;} 71 | ::-webkit-scrollbar-track {background-color:transparent;} 72 | ::-webkit-scrollbar-thumb {border-radius:5px;background-color:rgba(0, 0, 0, 0.3);} -------------------------------------------------------------------------------- /case04/img/bg06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case04/img/bg06.png -------------------------------------------------------------------------------- /case04/img/header-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case04/img/header-left.png -------------------------------------------------------------------------------- /case04/img/header-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case04/img/header-right.png -------------------------------------------------------------------------------- /case04/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case04/img/loading.gif -------------------------------------------------------------------------------- /case04/img/panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case04/img/panel.png -------------------------------------------------------------------------------- /case04/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case04/img/thumb.jpg -------------------------------------------------------------------------------- /case06/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* global */ 4 | * {margin:0;padding:0;box-sizing:border-box;} 5 | html, body { 6 | width:100%; 7 | height:100%; 8 | min-width:1200px; 9 | min-height:600px; 10 | overflow:hidden; 11 | } 12 | body { 13 | position:relative; 14 | font-family:"Microsoft Yahei", Arial, sans-serif; 15 | background:rgb(3, 12, 59) url("../img/bg.png") 0 0 / 100% 100% no-repeat; 16 | } 17 | 18 | /* layout */ 19 | #header { 20 | position:relative; 21 | height:64px; 22 | background:rgb(3, 12, 59) url("../img/header.png") 0 0 / 100% 100% no-repeat; 23 | overflow:hidden; 24 | } 25 | #header .title {line-height:64px;text-align:center;font-size:32px;font-weight:400;color:#fff;} 26 | #container {position:absolute;top:0;bottom:0;left:0;right:0;} 27 | .chart-div {width:100%;height:100%;} 28 | 29 | /* media query */ 30 | @media (max-width:1900px) { 31 | #header {height:36px;} 32 | #header .title {line-height:36px;font-size:18px;} 33 | #container {top:0;} 34 | } 35 | 36 | /* chart-loader */ 37 | .chart-loader { 38 | position:absolute; 39 | top:0; 40 | left:0; 41 | z-index:99; 42 | width:100%; 43 | height:100%; 44 | background:rgba(255, 255, 255, 0); 45 | transition:all .8s; 46 | } 47 | .chart-loader .loader { 48 | position:absolute; 49 | left:50%; 50 | top:50%; 51 | width:60px; 52 | height:60px; 53 | margin:-30px 0 0 -30px; 54 | border:3px solid transparent; 55 | border-top-color:#3498db; 56 | border-radius:50% !important; 57 | -webkit-animation:spin 2s linear infinite; 58 | animation:spin 2s linear infinite; 59 | } 60 | .chart-loader .loader:before { 61 | content:""; 62 | position:absolute; 63 | top:3px; 64 | left:5px; 65 | right:5px; 66 | bottom:5px; 67 | border:3px solid transparent; 68 | border-top-color:#e74c3c; 69 | border-radius:50% !important; 70 | -webkit-animation:spin 3s linear infinite; 71 | animation:spin 3s linear infinite; 72 | } 73 | .chart-loader .loader:after { 74 | content:""; 75 | position:absolute; 76 | top:9px; 77 | left:10px; 78 | right:10px; 79 | bottom:10px; 80 | border:3px solid transparent; 81 | border-top-color:#f9c922; 82 | border-radius:50% !important; 83 | -webkit-animation:spin 1.5s linear infinite; 84 | animation:spin 1.5s linear infinite; 85 | } 86 | .chart-done .chart-loader {display:none;} 87 | @-webkit-keyframes spin { 88 | 0% { 89 | -webkit-transform: rotate(0deg); 90 | -ms-transform: rotate(0deg); 91 | transform: rotate(0deg) 92 | } 93 | 100% { 94 | -webkit-transform: rotate(360deg); 95 | -ms-transform: rotate(360deg); 96 | transform: rotate(360deg) 97 | } 98 | } 99 | @keyframes spin { 100 | 0% { 101 | -webkit-transform: rotate(0deg); 102 | -ms-transform: rotate(0deg); 103 | transform: rotate(0deg) 104 | } 105 | 100% { 106 | -webkit-transform: rotate(360deg); 107 | -ms-transform: rotate(360deg); 108 | transform: rotate(360deg) 109 | } 110 | } -------------------------------------------------------------------------------- /case06/data/industry.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "农林牧渔", 4 | "children": [ 5 | { 6 | "name": "农业", 7 | "value": 15 8 | }, { 9 | "name": "林业", 10 | "value": 4 11 | }, { 12 | "name": "畜牧业", 13 | "value": 12 14 | }, { 15 | "name": "渔业", 16 | "value": 9 17 | }, { 18 | "name": "农、林、牧、渔服务业", 19 | "value": 1 20 | } 21 | ] 22 | }, { 23 | "name": "采矿业", 24 | "children": [ 25 | { 26 | "name": "煤炭开采和洗选业", 27 | "value": 27 28 | }, { 29 | "name": "石油和天然气开采业", 30 | "value": 5 31 | }, { 32 | "name": "黑色金属矿采选业", 33 | "value": 5 34 | }, { 35 | "name": "有色金属矿采选业", 36 | "value": 23 37 | }, { 38 | "name": "非金属矿采选业", 39 | "value": 1 40 | }, { 41 | "name": "开采辅助活动", 42 | "value": 16 43 | } 44 | ] 45 | }, { 46 | "name": "制造业", 47 | "children": [ 48 | { 49 | "name": "农副食品加工业", 50 | "value": 49 51 | }, { 52 | "name": "食品制造业", 53 | "value": 42 54 | }, { 55 | "name": "酒、饮料和精制茶制造业", 56 | "value": 43 57 | }, { 58 | "name": "纺织业", 59 | "value": 40 60 | }, { 61 | "name": "纺织服装、服饰业", 62 | "value": 37 63 | }, { 64 | "name": "皮革、毛皮、羽毛及其制品和制鞋业", 65 | "value": 11 66 | }, { 67 | "name": "木材加工及木、竹、藤、棕、草制品业", 68 | "value": 8 69 | }, { 70 | "name": "家具制造业", 71 | "value": 23 72 | }, { 73 | "name": "造纸及纸制品业", 74 | "value": 29 75 | }, { 76 | "name": "印刷和记录媒介复制业", 77 | "value": 12 78 | }, { 79 | "name": "文教、工美、体育和娱乐用品制造业", 80 | "value": 13 81 | }, { 82 | "name": "石油加工、炼焦及核燃料加工业", 83 | "value": 16 84 | }, { 85 | "name": "化学原料及化学制品制造业", 86 | "value": 33 87 | }, { 88 | "name": "医药制造业", 89 | "value": 64 90 | }, { 91 | "name": "化学纤维制造业", 92 | "value": 23 93 | }, { 94 | "name": "橡胶和塑料制品业", 95 | "value": 74 96 | }, { 97 | "name": "非金属矿物制品业", 98 | "value": 83 99 | }, { 100 | "name": "黑色金属冶炼及压延加工业", 101 | "value": 31 102 | }, { 103 | "name": "有色金属冶炼及压延加工业", 104 | "value": 68 105 | }, { 106 | "name": "金属制品业", 107 | "value": 59 108 | }, { 109 | "name": "通用设备制造业", 110 | "value": 68 111 | }, { 112 | "name": "专用设备制造业", 113 | "value": 42 114 | }, { 115 | "name": "汽车制造业", 116 | "value": 27 117 | }, { 118 | "name": "铁路、船舶、航空航天和其它运输设备制造业", 119 | "value": 48 120 | }, { 121 | "name": "电气机械及器材制造业", 122 | "value": 36 123 | }, { 124 | "name": "计算机、通信和其他电子设备制造业", 125 | "value": 29 126 | }, { 127 | "name": "仪器仪表制造业", 128 | "value": 45 129 | }, { 130 | "name": "其他制造业", 131 | "value": 21 132 | }, { 133 | "name": "废弃资源综合利用业", 134 | "value": 5 135 | } 136 | ] 137 | }, { 138 | "name": "水电煤气", 139 | "children": [ 140 | { 141 | "name": "电力、热力生产和供应业", 142 | "value": 70 143 | }, { 144 | "name": "燃气生产和供应业", 145 | "value": 24 146 | }, { 147 | "name": "水的生产和供应业", 148 | "value": 15 149 | } 150 | ] 151 | }, { 152 | "name": "建筑业", 153 | "children": [ 154 | { 155 | "name": "房屋建筑业", 156 | "value": 2 157 | }, { 158 | "name": "土木工程建筑业", 159 | "value": 65 160 | }, { 161 | "name": "建筑安装业", 162 | "value": 1 163 | }, { 164 | "name": "建筑装饰和其他建筑业", 165 | "value": 29 166 | } 167 | ] 168 | }, { 169 | "name": "批发零售", 170 | "children": [ 171 | { 172 | "name": "批发业", 173 | "value": 77 174 | }, { 175 | "name": "零售业", 176 | "value": 86 177 | } 178 | ] 179 | }, { 180 | "name": "运输仓储", 181 | "children": [ 182 | { 183 | "name": "铁路运输业", 184 | "value": 4 185 | }, { 186 | "name": "道路运输业", 187 | "value": 35 188 | }, { 189 | "name": "水上运输业", 190 | "value": 28 191 | }, { 192 | "name": "航空运输业", 193 | "value": 13 194 | }, { 195 | "name": "装卸搬运和其他运输代理业", 196 | "value": 7 197 | }, { 198 | "name": "仓储业", 199 | "value": 9 200 | }, { 201 | "name": "邮政业", 202 | "value": 5 203 | } 204 | ] 205 | }, { 206 | "name": "住宿餐饮", 207 | "children": [ 208 | { 209 | "name": "住宿业", 210 | "value": 6 211 | }, { 212 | "name": "餐饮业", 213 | "value": 3 214 | } 215 | ] 216 | }, { 217 | "name": "信息技术", 218 | "children": [ 219 | { 220 | "name": "电信、广播电视和卫星传输传输服务", 221 | "value": 15 222 | }, { 223 | "name": "互联网和相关服务", 224 | "value": 60 225 | }, { 226 | "name": "软件和信息技术服务业", 227 | "value": 186 228 | } 229 | ] 230 | }, { 231 | "name": "金融业", 232 | "children": [ 233 | { 234 | "name": "货币金融服务", 235 | "value": 28 236 | }, { 237 | "name": "资本市场服务", 238 | "value": 42 239 | }, { 240 | "name": "保险业", 241 | "value": 6 242 | }, { 243 | "name": "其他金融业", 244 | "value": 11 245 | } 246 | ] 247 | }, { 248 | "name": "房地产", 249 | "children": [ 250 | { 251 | "name": "房地产业", 252 | "value": 128 253 | } 254 | ] 255 | }, { 256 | "name": "商务服务", 257 | "children": [ 258 | { 259 | "name": "租赁业", 260 | "value": 4 261 | }, { 262 | "name": "商务服务业", 263 | "value": 48 264 | } 265 | ] 266 | }, { 267 | "name": "科学服务", 268 | "children": [ 269 | { 270 | "name": "研究和试验发展", 271 | "value": 6 272 | }, { 273 | "name": "专业技术服务业", 274 | "value": 42 275 | }, { 276 | "name": "科技推广和应用服务业", 277 | "value": 1 278 | } 279 | ] 280 | }, { 281 | "name": "公共环保", 282 | "children": [ 283 | { 284 | "name": "生态保护和环境治理业", 285 | "value": 33 286 | }, { 287 | "name": "公共设施管理业", 288 | "value": 16 289 | } 290 | ] 291 | }, { 292 | "name": "居民服务", 293 | "children": [ 294 | { 295 | "name": "机动车、电子产品和日用", 296 | "value": 1 297 | } 298 | ] 299 | }, { 300 | "name": "教育", 301 | "children": [ 302 | { 303 | "name": "教育", 304 | "value": 3 305 | } 306 | ] 307 | }, { 308 | "name": "卫生", 309 | "children": [ 310 | { 311 | "name": "卫生", 312 | "value": 10 313 | }, { 314 | "name": "新闻和出版业", 315 | "value": 23 316 | } 317 | ] 318 | }, { 319 | "name": "文化传播", 320 | "children": [ 321 | { 322 | "name": "广播、电视、电影和影视录音制作业", 323 | "value": 25 324 | }, { 325 | "name": "文化艺术业", 326 | "value": 9 327 | }, { 328 | "name": "体育", 329 | "value": 1 330 | } 331 | ] 332 | }, { 333 | "name": "综合", 334 | "children": [ 335 | { 336 | "name": "综合", 337 | "value": 22 338 | } 339 | ] 340 | } 341 | ] -------------------------------------------------------------------------------- /case06/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case06/img/bg.png -------------------------------------------------------------------------------- /case06/img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case06/img/header.png -------------------------------------------------------------------------------- /case06/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case06/img/thumb.jpg -------------------------------------------------------------------------------- /case06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 旭日图 - 基于ECharts V4.2 8 | 9 | 10 | 11 | 12 | 15 | 16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | 109 | 110 | -------------------------------------------------------------------------------- /case06/js/echarts-theme-shine.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) {if (typeof define === 'function' && define.amd) { 2 | // AMD. Register as an anonymous module. 3 | define(['exports', 'echarts'], factory); 4 | } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { 5 | // CommonJS 6 | factory(exports, require('echarts')); 7 | } else { 8 | // Browser globals 9 | factory({}, root.echarts); 10 | } 11 | }(this, function (exports, echarts) { 12 | var log = function (msg) { 13 | if (typeof console !== 'undefined') { 14 | console && console.error && console.error(msg); 15 | } 16 | }; 17 | if (!echarts) { 18 | log('ECharts is not Loaded'); 19 | return; 20 | } 21 | 22 | var colorPalette = [ 23 | '#c12e34','#e6b600','#0098d9','#2b821d', 24 | '#005eaa','#339ca8','#cda819','#32a487' 25 | ]; 26 | 27 | var theme = { 28 | 29 | color: colorPalette, 30 | 31 | title: { 32 | textStyle: { 33 | fontWeight: 'normal' 34 | } 35 | }, 36 | 37 | visualMap: { 38 | color:['#1790cf','#a2d4e6'] 39 | }, 40 | 41 | toolbox: { 42 | iconStyle: { 43 | normal: { 44 | borderColor: '#06467c' 45 | } 46 | } 47 | }, 48 | 49 | tooltip: { 50 | backgroundColor: 'rgba(0,0,0,0.6)' 51 | }, 52 | 53 | dataZoom: { 54 | dataBackgroundColor: '#dedede', 55 | fillerColor: 'rgba(154,217,247,0.2)', 56 | handleColor: '#005eaa' 57 | }, 58 | 59 | timeline: { 60 | lineStyle: { 61 | color: '#005eaa' 62 | }, 63 | controlStyle: { 64 | normal: { 65 | color: '#005eaa', 66 | borderColor: '#005eaa' 67 | } 68 | } 69 | }, 70 | 71 | candlestick: { 72 | itemStyle: { 73 | normal: { 74 | color: '#c12e34', 75 | color0: '#2b821d', 76 | lineStyle: { 77 | width: 1, 78 | color: '#c12e34', 79 | color0: '#2b821d' 80 | } 81 | } 82 | } 83 | }, 84 | 85 | graph: { 86 | color: colorPalette 87 | }, 88 | 89 | map: { 90 | label: { 91 | normal: { 92 | textStyle: { 93 | color: '#c12e34' 94 | } 95 | }, 96 | emphasis: { 97 | textStyle: { 98 | color: '#c12e34' 99 | } 100 | } 101 | }, 102 | itemStyle: { 103 | normal: { 104 | borderColor: '#eee', 105 | areaColor: '#ddd' 106 | }, 107 | emphasis: { 108 | areaColor: '#e6b600' 109 | } 110 | } 111 | }, 112 | 113 | gauge: { 114 | axisLine: { 115 | show: true, 116 | lineStyle: { 117 | color: [[0.2, '#2b821d'],[0.8, '#005eaa'],[1, '#c12e34']], 118 | width: 5 119 | } 120 | }, 121 | axisTick: { 122 | splitNumber: 10, 123 | length:8, 124 | lineStyle: { 125 | color: 'auto' 126 | } 127 | }, 128 | axisLabel: { 129 | textStyle: { 130 | color: 'auto' 131 | } 132 | }, 133 | splitLine: { 134 | length: 12, 135 | lineStyle: { 136 | color: 'auto' 137 | } 138 | }, 139 | pointer: { 140 | length: '90%', 141 | width: 3, 142 | color: 'auto' 143 | }, 144 | title: { 145 | textStyle: { 146 | color: '#333' 147 | } 148 | }, 149 | detail: { 150 | textStyle: { 151 | color: 'auto' 152 | } 153 | } 154 | } 155 | }; 156 | echarts.registerTheme('shine', theme); 157 | })); -------------------------------------------------------------------------------- /case07/css/pace.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* Minimal */ 4 | .pace { 5 | -webkit-pointer-events: none; 6 | pointer-events: none; 7 | -webkit-user-select: none; 8 | -moz-user-select: none; 9 | user-select: none; 10 | } 11 | 12 | .pace-inactive { 13 | display: none; 14 | } 15 | 16 | .pace .pace-progress { 17 | background: #29d; 18 | position: fixed; 19 | z-index: 2000; 20 | top: 0; 21 | right: 100%; 22 | width: 100%; 23 | height: 2px; 24 | } 25 | -------------------------------------------------------------------------------- /case07/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case07/img/thumb.jpg -------------------------------------------------------------------------------- /case07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 上市公司地域分布 - 大屏数据可视化案例 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 267 | 268 | -------------------------------------------------------------------------------- /case07/js/echarts-bmap.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('echarts')) : 3 | typeof define === 'function' && define.amd ? define(['exports', 'echarts'], factory) : 4 | (factory((global.bmap = {}),global.echarts)); 5 | }(this, (function (exports,echarts) { 'use strict'; 6 | 7 | /* 8 | * Licensed to the Apache Software Foundation (ASF) under one 9 | * or more contributor license agreements. See the NOTICE file 10 | * distributed with this work for additional information 11 | * regarding copyright ownership. The ASF licenses this file 12 | * to you under the Apache License, Version 2.0 (the 13 | * "License"); you may not use this file except in compliance 14 | * with the License. You may obtain a copy of the License at 15 | * 16 | * http://www.apache.org/licenses/LICENSE-2.0 17 | * 18 | * Unless required by applicable law or agreed to in writing, 19 | * software distributed under the License is distributed on an 20 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 21 | * KIND, either express or implied. See the License for the 22 | * specific language governing permissions and limitations 23 | * under the License. 24 | */ 25 | 26 | /* global BMap */ 27 | 28 | function BMapCoordSys(bmap, api) { 29 | this._bmap = bmap; 30 | this.dimensions = ['lng', 'lat']; 31 | this._mapOffset = [0, 0]; 32 | 33 | this._api = api; 34 | 35 | this._projection = new BMap.MercatorProjection(); 36 | } 37 | 38 | BMapCoordSys.prototype.dimensions = ['lng', 'lat']; 39 | 40 | BMapCoordSys.prototype.setZoom = function (zoom) { 41 | this._zoom = zoom; 42 | }; 43 | 44 | BMapCoordSys.prototype.setCenter = function (center) { 45 | this._center = this._projection.lngLatToPoint(new BMap.Point(center[0], center[1])); 46 | }; 47 | 48 | BMapCoordSys.prototype.setMapOffset = function (mapOffset) { 49 | this._mapOffset = mapOffset; 50 | }; 51 | 52 | BMapCoordSys.prototype.getBMap = function () { 53 | return this._bmap; 54 | }; 55 | 56 | BMapCoordSys.prototype.dataToPoint = function (data) { 57 | var point = new BMap.Point(data[0], data[1]); 58 | // TODO mercator projection is toooooooo slow 59 | // var mercatorPoint = this._projection.lngLatToPoint(point); 60 | 61 | // var width = this._api.getZr().getWidth(); 62 | // var height = this._api.getZr().getHeight(); 63 | // var divider = Math.pow(2, 18 - 10); 64 | // return [ 65 | // Math.round((mercatorPoint.x - this._center.x) / divider + width / 2), 66 | // Math.round((this._center.y - mercatorPoint.y) / divider + height / 2) 67 | // ]; 68 | var px = this._bmap.pointToOverlayPixel(point); 69 | var mapOffset = this._mapOffset; 70 | return [px.x - mapOffset[0], px.y - mapOffset[1]]; 71 | }; 72 | 73 | BMapCoordSys.prototype.pointToData = function (pt) { 74 | var mapOffset = this._mapOffset; 75 | var pt = this._bmap.overlayPixelToPoint({ 76 | x: pt[0] + mapOffset[0], 77 | y: pt[1] + mapOffset[1] 78 | }); 79 | return [pt.lng, pt.lat]; 80 | }; 81 | 82 | BMapCoordSys.prototype.getViewRect = function () { 83 | var api = this._api; 84 | return new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight()); 85 | }; 86 | 87 | BMapCoordSys.prototype.getRoamTransform = function () { 88 | return echarts.matrix.create(); 89 | }; 90 | 91 | BMapCoordSys.prototype.prepareCustoms = function (data) { 92 | var rect = this.getViewRect(); 93 | return { 94 | coordSys: { 95 | // The name exposed to user is always 'cartesian2d' but not 'grid'. 96 | type: 'bmap', 97 | x: rect.x, 98 | y: rect.y, 99 | width: rect.width, 100 | height: rect.height 101 | }, 102 | api: { 103 | coord: echarts.util.bind(this.dataToPoint, this), 104 | size: echarts.util.bind(dataToCoordSize, this) 105 | } 106 | }; 107 | }; 108 | 109 | function dataToCoordSize(dataSize, dataItem) { 110 | dataItem = dataItem || [0, 0]; 111 | return echarts.util.map([0, 1], function (dimIdx) { 112 | var val = dataItem[dimIdx]; 113 | var halfSize = dataSize[dimIdx] / 2; 114 | var p1 = []; 115 | var p2 = []; 116 | p1[dimIdx] = val - halfSize; 117 | p2[dimIdx] = val + halfSize; 118 | p1[1 - dimIdx] = p2[1 - dimIdx] = dataItem[1 - dimIdx]; 119 | return Math.abs(this.dataToPoint(p1)[dimIdx] - this.dataToPoint(p2)[dimIdx]); 120 | }, this); 121 | } 122 | 123 | var Overlay; 124 | 125 | // For deciding which dimensions to use when creating list data 126 | BMapCoordSys.dimensions = BMapCoordSys.prototype.dimensions; 127 | 128 | function createOverlayCtor() { 129 | function Overlay(root) { 130 | this._root = root; 131 | } 132 | 133 | Overlay.prototype = new BMap.Overlay(); 134 | /** 135 | * 初始化 136 | * 137 | * @param {BMap.Map} map 138 | * @override 139 | */ 140 | Overlay.prototype.initialize = function (map) { 141 | map.getPanes().labelPane.appendChild(this._root); 142 | return this._root; 143 | }; 144 | /** 145 | * @override 146 | */ 147 | Overlay.prototype.draw = function () {}; 148 | 149 | return Overlay; 150 | } 151 | 152 | BMapCoordSys.create = function (ecModel, api) { 153 | var bmapCoordSys; 154 | var root = api.getDom(); 155 | 156 | // TODO Dispose 157 | ecModel.eachComponent('bmap', function (bmapModel) { 158 | var painter = api.getZr().painter; 159 | var viewportRoot = painter.getViewportRoot(); 160 | if (typeof BMap === 'undefined') { 161 | throw new Error('BMap api is not loaded'); 162 | } 163 | Overlay = Overlay || createOverlayCtor(); 164 | if (bmapCoordSys) { 165 | throw new Error('Only one bmap component can exist'); 166 | } 167 | if (!bmapModel.__bmap) { 168 | // Not support IE8 169 | var bmapRoot = root.querySelector('.ec-extension-bmap'); 170 | if (bmapRoot) { 171 | // Reset viewport left and top, which will be changed 172 | // in moving handler in BMapView 173 | viewportRoot.style.left = '0px'; 174 | viewportRoot.style.top = '0px'; 175 | root.removeChild(bmapRoot); 176 | } 177 | bmapRoot = document.createElement('div'); 178 | bmapRoot.style.cssText = 'width:100%;height:100%'; 179 | // Not support IE8 180 | bmapRoot.classList.add('ec-extension-bmap'); 181 | root.appendChild(bmapRoot); 182 | var bmap = bmapModel.__bmap = new BMap.Map(bmapRoot); 183 | 184 | var overlay = new Overlay(viewportRoot); 185 | bmap.addOverlay(overlay); 186 | 187 | // Override 188 | painter.getViewportRootOffset = function () { 189 | return {offsetLeft: 0, offsetTop: 0}; 190 | }; 191 | } 192 | var bmap = bmapModel.__bmap; 193 | 194 | // Set bmap options 195 | // centerAndZoom before layout and render 196 | var center = bmapModel.get('center'); 197 | var zoom = bmapModel.get('zoom'); 198 | if (center && zoom) { 199 | var pt = new BMap.Point(center[0], center[1]); 200 | bmap.centerAndZoom(pt, zoom); 201 | } 202 | 203 | bmapCoordSys = new BMapCoordSys(bmap, api); 204 | bmapCoordSys.setMapOffset(bmapModel.__mapOffset || [0, 0]); 205 | bmapCoordSys.setZoom(zoom); 206 | bmapCoordSys.setCenter(center); 207 | 208 | bmapModel.coordinateSystem = bmapCoordSys; 209 | }); 210 | 211 | ecModel.eachSeries(function (seriesModel) { 212 | if (seriesModel.get('coordinateSystem') === 'bmap') { 213 | seriesModel.coordinateSystem = bmapCoordSys; 214 | } 215 | }); 216 | }; 217 | 218 | /* 219 | * Licensed to the Apache Software Foundation (ASF) under one 220 | * or more contributor license agreements. See the NOTICE file 221 | * distributed with this work for additional information 222 | * regarding copyright ownership. The ASF licenses this file 223 | * to you under the Apache License, Version 2.0 (the 224 | * "License"); you may not use this file except in compliance 225 | * with the License. You may obtain a copy of the License at 226 | * 227 | * http://www.apache.org/licenses/LICENSE-2.0 228 | * 229 | * Unless required by applicable law or agreed to in writing, 230 | * software distributed under the License is distributed on an 231 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 232 | * KIND, either express or implied. See the License for the 233 | * specific language governing permissions and limitations 234 | * under the License. 235 | */ 236 | 237 | function v2Equal(a, b) { 238 | return a && b && a[0] === b[0] && a[1] === b[1]; 239 | } 240 | 241 | echarts.extendComponentModel({ 242 | type: 'bmap', 243 | 244 | getBMap: function () { 245 | // __bmap is injected when creating BMapCoordSys 246 | return this.__bmap; 247 | }, 248 | 249 | setCenterAndZoom: function (center, zoom) { 250 | this.option.center = center; 251 | this.option.zoom = zoom; 252 | }, 253 | 254 | centerOrZoomChanged: function (center, zoom) { 255 | var option = this.option; 256 | return !(v2Equal(center, option.center) && zoom === option.zoom); 257 | }, 258 | 259 | defaultOption: { 260 | 261 | center: [104.114129, 37.550339], 262 | 263 | zoom: 5, 264 | 265 | mapStyle: {}, 266 | 267 | roam: false 268 | } 269 | }); 270 | 271 | /* 272 | * Licensed to the Apache Software Foundation (ASF) under one 273 | * or more contributor license agreements. See the NOTICE file 274 | * distributed with this work for additional information 275 | * regarding copyright ownership. The ASF licenses this file 276 | * to you under the Apache License, Version 2.0 (the 277 | * "License"); you may not use this file except in compliance 278 | * with the License. You may obtain a copy of the License at 279 | * 280 | * http://www.apache.org/licenses/LICENSE-2.0 281 | * 282 | * Unless required by applicable law or agreed to in writing, 283 | * software distributed under the License is distributed on an 284 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 285 | * KIND, either express or implied. See the License for the 286 | * specific language governing permissions and limitations 287 | * under the License. 288 | */ 289 | 290 | echarts.extendComponentView({ 291 | type: 'bmap', 292 | 293 | render: function (bMapModel, ecModel, api) { 294 | var rendering = true; 295 | 296 | var bmap = bMapModel.getBMap(); 297 | var viewportRoot = api.getZr().painter.getViewportRoot(); 298 | var coordSys = bMapModel.coordinateSystem; 299 | var moveHandler = function (type, target) { 300 | if (rendering) { 301 | return; 302 | } 303 | var offsetEl = viewportRoot.parentNode.parentNode.parentNode; 304 | var mapOffset = [ 305 | -parseInt(offsetEl.style.left, 10) || 0, 306 | -parseInt(offsetEl.style.top, 10) || 0 307 | ]; 308 | viewportRoot.style.left = mapOffset[0] + 'px'; 309 | viewportRoot.style.top = mapOffset[1] + 'px'; 310 | 311 | coordSys.setMapOffset(mapOffset); 312 | bMapModel.__mapOffset = mapOffset; 313 | 314 | api.dispatchAction({ 315 | type: 'bmapRoam' 316 | }); 317 | }; 318 | 319 | function zoomEndHandler() { 320 | if (rendering) { 321 | return; 322 | } 323 | api.dispatchAction({ 324 | type: 'bmapRoam' 325 | }); 326 | } 327 | 328 | bmap.removeEventListener('moving', this._oldMoveHandler); 329 | // FIXME 330 | // Moveend may be triggered by centerAndZoom method when creating coordSys next time 331 | // bmap.removeEventListener('moveend', this._oldMoveHandler); 332 | bmap.removeEventListener('zoomend', this._oldZoomEndHandler); 333 | bmap.addEventListener('moving', moveHandler); 334 | // bmap.addEventListener('moveend', moveHandler); 335 | bmap.addEventListener('zoomend', zoomEndHandler); 336 | 337 | this._oldMoveHandler = moveHandler; 338 | this._oldZoomEndHandler = zoomEndHandler; 339 | 340 | var roam = bMapModel.get('roam'); 341 | if (roam && roam !== 'scale') { 342 | bmap.enableDragging(); 343 | } 344 | else { 345 | bmap.disableDragging(); 346 | } 347 | if (roam && roam !== 'move') { 348 | bmap.enableScrollWheelZoom(); 349 | bmap.enableDoubleClickZoom(); 350 | bmap.enablePinchToZoom(); 351 | } 352 | else { 353 | bmap.disableScrollWheelZoom(); 354 | bmap.disableDoubleClickZoom(); 355 | bmap.disablePinchToZoom(); 356 | } 357 | 358 | var originalStyle = bMapModel.__mapStyle; 359 | 360 | var newMapStyle = bMapModel.get('mapStyle') || {}; 361 | // FIXME, Not use JSON methods 362 | var mapStyleStr = JSON.stringify(newMapStyle); 363 | if (JSON.stringify(originalStyle) !== mapStyleStr) { 364 | // FIXME May have blank tile when dragging if setMapStyle 365 | if (Object.keys(newMapStyle).length) { 366 | bmap.setMapStyle(newMapStyle); 367 | } 368 | bMapModel.__mapStyle = JSON.parse(mapStyleStr); 369 | } 370 | 371 | rendering = false; 372 | } 373 | }); 374 | 375 | /* 376 | * Licensed to the Apache Software Foundation (ASF) under one 377 | * or more contributor license agreements. See the NOTICE file 378 | * distributed with this work for additional information 379 | * regarding copyright ownership. The ASF licenses this file 380 | * to you under the Apache License, Version 2.0 (the 381 | * "License"); you may not use this file except in compliance 382 | * with the License. You may obtain a copy of the License at 383 | * 384 | * http://www.apache.org/licenses/LICENSE-2.0 385 | * 386 | * Unless required by applicable law or agreed to in writing, 387 | * software distributed under the License is distributed on an 388 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 389 | * KIND, either express or implied. See the License for the 390 | * specific language governing permissions and limitations 391 | * under the License. 392 | */ 393 | 394 | /** 395 | * BMap component extension 396 | */ 397 | 398 | echarts.registerCoordinateSystem('bmap', BMapCoordSys); 399 | 400 | // Action 401 | echarts.registerAction({ 402 | type: 'bmapRoam', 403 | event: 'bmapRoam', 404 | update: 'updateLayout' 405 | }, function (payload, ecModel) { 406 | ecModel.eachComponent('bmap', function (bMapModel) { 407 | var bmap = bMapModel.getBMap(); 408 | var center = bmap.getCenter(); 409 | bMapModel.setCenterAndZoom([center.lng, center.lat], bmap.getZoom()); 410 | }); 411 | }); 412 | 413 | var version = '1.0.0'; 414 | 415 | exports.version = version; 416 | 417 | }))); 418 | //# sourceMappingURL=bmap.js.map 419 | -------------------------------------------------------------------------------- /case07/js/pace.min.js: -------------------------------------------------------------------------------- 1 | /*! pace 1.0.0 */ 2 | (function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X=[].slice,Y={}.hasOwnProperty,Z=function(a,b){function c(){this.constructor=a}for(var d in b)Y.call(b,d)&&(a[d]=b[d]);return c.prototype=b.prototype,a.prototype=new c,a.__super__=b.prototype,a},$=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};for(u={catchupTime:100,initialRate:.03,minTime:250,ghostTime:100,maxProgressPerFrame:20,easeFactor:1.25,startOnPageLoad:!0,restartOnPushState:!0,restartOnRequestAfter:500,target:"body",elements:{checkInterval:100,selectors:["body"]},eventLag:{minSamples:10,sampleCount:3,lagThreshold:3},ajax:{trackMethods:["GET"],trackWebSockets:!0,ignoreURLs:[]}},C=function(){var a;return null!=(a="undefined"!=typeof performance&&null!==performance&&"function"==typeof performance.now?performance.now():void 0)?a:+new Date},E=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,t=window.cancelAnimationFrame||window.mozCancelAnimationFrame,null==E&&(E=function(a){return setTimeout(a,50)},t=function(a){return clearTimeout(a)}),G=function(a){var b,c;return b=C(),(c=function(){var d;return d=C()-b,d>=33?(b=C(),a(d,function(){return E(c)})):setTimeout(c,33-d)})()},F=function(){var a,b,c;return c=arguments[0],b=arguments[1],a=3<=arguments.length?X.call(arguments,2):[],"function"==typeof c[b]?c[b].apply(c,a):c[b]},v=function(){var a,b,c,d,e,f,g;for(b=arguments[0],d=2<=arguments.length?X.call(arguments,1):[],f=0,g=d.length;g>f;f++)if(c=d[f])for(a in c)Y.call(c,a)&&(e=c[a],null!=b[a]&&"object"==typeof b[a]&&null!=e&&"object"==typeof e?v(b[a],e):b[a]=e);return b},q=function(a){var b,c,d,e,f;for(c=b=0,e=0,f=a.length;f>e;e++)d=a[e],c+=Math.abs(d),b++;return c/b},x=function(a,b){var c,d,e;if(null==a&&(a="options"),null==b&&(b=!0),e=document.querySelector("[data-pace-"+a+"]")){if(c=e.getAttribute("data-pace-"+a),!b)return c;try{return JSON.parse(c)}catch(f){return d=f,"undefined"!=typeof console&&null!==console?console.error("Error parsing inline pace options",d):void 0}}},g=function(){function a(){}return a.prototype.on=function(a,b,c,d){var e;return null==d&&(d=!1),null==this.bindings&&(this.bindings={}),null==(e=this.bindings)[a]&&(e[a]=[]),this.bindings[a].push({handler:b,ctx:c,once:d})},a.prototype.once=function(a,b,c){return this.on(a,b,c,!0)},a.prototype.off=function(a,b){var c,d,e;if(null!=(null!=(d=this.bindings)?d[a]:void 0)){if(null==b)return delete this.bindings[a];for(c=0,e=[];cQ;Q++)K=U[Q],D[K]===!0&&(D[K]=u[K]);i=function(a){function b(){return V=b.__super__.constructor.apply(this,arguments)}return Z(b,a),b}(Error),b=function(){function a(){this.progress=0}return a.prototype.getElement=function(){var a;if(null==this.el){if(a=document.querySelector(D.target),!a)throw new i;this.el=document.createElement("div"),this.el.className="pace pace-active",document.body.className=document.body.className.replace(/pace-done/g,""),document.body.className+=" pace-running",this.el.innerHTML='
\n
\n
\n
',null!=a.firstChild?a.insertBefore(this.el,a.firstChild):a.appendChild(this.el)}return this.el},a.prototype.finish=function(){var a;return a=this.getElement(),a.className=a.className.replace("pace-active",""),a.className+=" pace-inactive",document.body.className=document.body.className.replace("pace-running",""),document.body.className+=" pace-done"},a.prototype.update=function(a){return this.progress=a,this.render()},a.prototype.destroy=function(){try{this.getElement().parentNode.removeChild(this.getElement())}catch(a){i=a}return this.el=void 0},a.prototype.render=function(){var a,b,c,d,e,f,g;if(null==document.querySelector(D.target))return!1;for(a=this.getElement(),d="translate3d("+this.progress+"%, 0, 0)",g=["webkitTransform","msTransform","transform"],e=0,f=g.length;f>e;e++)b=g[e],a.children[0].style[b]=d;return(!this.lastRenderedProgress||this.lastRenderedProgress|0!==this.progress|0)&&(a.children[0].setAttribute("data-progress-text",""+(0|this.progress)+"%"),this.progress>=100?c="99":(c=this.progress<10?"0":"",c+=0|this.progress),a.children[0].setAttribute("data-progress",""+c)),this.lastRenderedProgress=this.progress},a.prototype.done=function(){return this.progress>=100},a}(),h=function(){function a(){this.bindings={}}return a.prototype.trigger=function(a,b){var c,d,e,f,g;if(null!=this.bindings[a]){for(f=this.bindings[a],g=[],d=0,e=f.length;e>d;d++)c=f[d],g.push(c.call(this,b));return g}},a.prototype.on=function(a,b){var c;return null==(c=this.bindings)[a]&&(c[a]=[]),this.bindings[a].push(b)},a}(),P=window.XMLHttpRequest,O=window.XDomainRequest,N=window.WebSocket,w=function(a,b){var c,d,e,f;f=[];for(d in b.prototype)try{e=b.prototype[d],f.push(null==a[d]&&"function"!=typeof e?a[d]=e:void 0)}catch(g){c=g}return f},A=[],j.ignore=function(){var a,b,c;return b=arguments[0],a=2<=arguments.length?X.call(arguments,1):[],A.unshift("ignore"),c=b.apply(null,a),A.shift(),c},j.track=function(){var a,b,c;return b=arguments[0],a=2<=arguments.length?X.call(arguments,1):[],A.unshift("track"),c=b.apply(null,a),A.shift(),c},J=function(a){var b;if(null==a&&(a="GET"),"track"===A[0])return"force";if(!A.length&&D.ajax){if("socket"===a&&D.ajax.trackWebSockets)return!0;if(b=a.toUpperCase(),$.call(D.ajax.trackMethods,b)>=0)return!0}return!1},k=function(a){function b(){var a,c=this;b.__super__.constructor.apply(this,arguments),a=function(a){var b;return b=a.open,a.open=function(d,e){return J(d)&&c.trigger("request",{type:d,url:e,request:a}),b.apply(a,arguments)}},window.XMLHttpRequest=function(b){var c;return c=new P(b),a(c),c};try{w(window.XMLHttpRequest,P)}catch(d){}if(null!=O){window.XDomainRequest=function(){var b;return b=new O,a(b),b};try{w(window.XDomainRequest,O)}catch(d){}}if(null!=N&&D.ajax.trackWebSockets){window.WebSocket=function(a,b){var d;return d=null!=b?new N(a,b):new N(a),J("socket")&&c.trigger("request",{type:"socket",url:a,protocols:b,request:d}),d};try{w(window.WebSocket,N)}catch(d){}}}return Z(b,a),b}(h),R=null,y=function(){return null==R&&(R=new k),R},I=function(a){var b,c,d,e;for(e=D.ajax.ignoreURLs,c=0,d=e.length;d>c;c++)if(b=e[c],"string"==typeof b){if(-1!==a.indexOf(b))return!0}else if(b.test(a))return!0;return!1},y().on("request",function(b){var c,d,e,f,g;return f=b.type,e=b.request,g=b.url,I(g)?void 0:j.running||D.restartOnRequestAfter===!1&&"force"!==J(f)?void 0:(d=arguments,c=D.restartOnRequestAfter||0,"boolean"==typeof c&&(c=0),setTimeout(function(){var b,c,g,h,i,k;if(b="socket"===f?e.readyState<2:0<(h=e.readyState)&&4>h){for(j.restart(),i=j.sources,k=[],c=0,g=i.length;g>c;c++){if(K=i[c],K instanceof a){K.watch.apply(K,d);break}k.push(void 0)}return k}},c))}),a=function(){function a(){var a=this;this.elements=[],y().on("request",function(){return a.watch.apply(a,arguments)})}return a.prototype.watch=function(a){var b,c,d,e;return d=a.type,b=a.request,e=a.url,I(e)?void 0:(c="socket"===d?new n(b):new o(b),this.elements.push(c))},a}(),o=function(){function a(a){var b,c,d,e,f,g,h=this;if(this.progress=0,null!=window.ProgressEvent)for(c=null,a.addEventListener("progress",function(a){return h.progress=a.lengthComputable?100*a.loaded/a.total:h.progress+(100-h.progress)/2},!1),g=["load","abort","timeout","error"],d=0,e=g.length;e>d;d++)b=g[d],a.addEventListener(b,function(){return h.progress=100},!1);else f=a.onreadystatechange,a.onreadystatechange=function(){var b;return 0===(b=a.readyState)||4===b?h.progress=100:3===a.readyState&&(h.progress=50),"function"==typeof f?f.apply(null,arguments):void 0}}return a}(),n=function(){function a(a){var b,c,d,e,f=this;for(this.progress=0,e=["error","open"],c=0,d=e.length;d>c;c++)b=e[c],a.addEventListener(b,function(){return f.progress=100},!1)}return a}(),d=function(){function a(a){var b,c,d,f;for(null==a&&(a={}),this.elements=[],null==a.selectors&&(a.selectors=[]),f=a.selectors,c=0,d=f.length;d>c;c++)b=f[c],this.elements.push(new e(b))}return a}(),e=function(){function a(a){this.selector=a,this.progress=0,this.check()}return a.prototype.check=function(){var a=this;return document.querySelector(this.selector)?this.done():setTimeout(function(){return a.check()},D.elements.checkInterval)},a.prototype.done=function(){return this.progress=100},a}(),c=function(){function a(){var a,b,c=this;this.progress=null!=(b=this.states[document.readyState])?b:100,a=document.onreadystatechange,document.onreadystatechange=function(){return null!=c.states[document.readyState]&&(c.progress=c.states[document.readyState]),"function"==typeof a?a.apply(null,arguments):void 0}}return a.prototype.states={loading:0,interactive:50,complete:100},a}(),f=function(){function a(){var a,b,c,d,e,f=this;this.progress=0,a=0,e=[],d=0,c=C(),b=setInterval(function(){var g;return g=C()-c-50,c=C(),e.push(g),e.length>D.eventLag.sampleCount&&e.shift(),a=q(e),++d>=D.eventLag.minSamples&&a=100&&(this.done=!0),b===this.last?this.sinceLastUpdate+=a:(this.sinceLastUpdate&&(this.rate=(b-this.last)/this.sinceLastUpdate),this.catchup=(b-this.progress)/D.catchupTime,this.sinceLastUpdate=0,this.last=b),b>this.progress&&(this.progress+=this.catchup*a),c=1-Math.pow(this.progress/100,D.easeFactor),this.progress+=c*this.rate*a,this.progress=Math.min(this.lastProgress+D.maxProgressPerFrame,this.progress),this.progress=Math.max(0,this.progress),this.progress=Math.min(100,this.progress),this.lastProgress=this.progress,this.progress},a}(),L=null,H=null,r=null,M=null,p=null,s=null,j.running=!1,z=function(){return D.restartOnPushState?j.restart():void 0},null!=window.history.pushState&&(T=window.history.pushState,window.history.pushState=function(){return z(),T.apply(window.history,arguments)}),null!=window.history.replaceState&&(W=window.history.replaceState,window.history.replaceState=function(){return z(),W.apply(window.history,arguments)}),l={ajax:a,elements:d,document:c,eventLag:f},(B=function(){var a,c,d,e,f,g,h,i;for(j.sources=L=[],g=["ajax","elements","document","eventLag"],c=0,e=g.length;e>c;c++)a=g[c],D[a]!==!1&&L.push(new l[a](D[a]));for(i=null!=(h=D.extraSources)?h:[],d=0,f=i.length;f>d;d++)K=i[d],L.push(new K(D));return j.bar=r=new b,H=[],M=new m})(),j.stop=function(){return j.trigger("stop"),j.running=!1,r.destroy(),s=!0,null!=p&&("function"==typeof t&&t(p),p=null),B()},j.restart=function(){return j.trigger("restart"),j.stop(),j.start()},j.go=function(){var a;return j.running=!0,r.render(),a=C(),s=!1,p=G(function(b,c){var d,e,f,g,h,i,k,l,n,o,p,q,t,u,v,w;for(l=100-r.progress,e=p=0,f=!0,i=q=0,u=L.length;u>q;i=++q)for(K=L[i],o=null!=H[i]?H[i]:H[i]=[],h=null!=(w=K.elements)?w:[K],k=t=0,v=h.length;v>t;k=++t)g=h[k],n=null!=o[k]?o[k]:o[k]=new m(g),f&=n.done,n.done||(e++,p+=n.tick(b));return d=p/e,r.update(M.tick(b,d)),r.done()||f||s?(r.update(100),j.trigger("done"),setTimeout(function(){return r.finish(),j.running=!1,j.trigger("hide")},Math.max(D.ghostTime,Math.max(D.minTime-(C()-a),0)))):c()})},j.start=function(a){v(D,a),j.running=!0;try{r.render()}catch(b){i=b}return document.querySelector(".pace")?(j.trigger("start"),j.go()):setTimeout(j.start,50)},"function"==typeof define&&define.amd?define(function(){return j}):"object"==typeof exports?module.exports=j:D.startOnPageLoad&&j.start()}).call(this); -------------------------------------------------------------------------------- /case08/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* global */ 4 | * {margin:0;padding:0;box-sizing:border-box;} 5 | html, body { 6 | width:100%; 7 | height:100%; 8 | min-width:1200px; 9 | min-height:600px; 10 | overflow:hidden; 11 | } 12 | body { 13 | position:relative; 14 | font-family:"Microsoft Yahei", Arial, sans-serif; 15 | background:rgb(3, 12, 59) url("../img/bg.png") 0 0 / 100% 100% no-repeat; 16 | } 17 | 18 | /* layout */ 19 | #header { 20 | position:relative; 21 | height:64px; 22 | background:rgb(3, 12, 59) url("../img/header.png") 0 0 / 100% 100% no-repeat; 23 | overflow:hidden; 24 | } 25 | #header .title {line-height:64px;text-align:center;font-size:32px;font-weight:400;color:#fff;} 26 | #container {position:absolute;top:0;bottom:0;left:0;right:0;} 27 | .chart-div {width:100%;height:100%;} 28 | 29 | /* media query */ 30 | @media (max-width:1900px) { 31 | #header {height:36px;} 32 | #header .title {line-height:36px;font-size:18px;} 33 | #container {top:0;} 34 | } 35 | 36 | /* chart-loader */ 37 | .chart-loader { 38 | position:absolute; 39 | top:0; 40 | left:0; 41 | z-index:99; 42 | width:100%; 43 | height:100%; 44 | background:rgba(255, 255, 255, 0); 45 | transition:all .8s; 46 | } 47 | .chart-loader .loader { 48 | position:absolute; 49 | left:50%; 50 | top:50%; 51 | width:60px; 52 | height:60px; 53 | margin:-30px 0 0 -30px; 54 | border:3px solid transparent; 55 | border-top-color:#3498db; 56 | border-radius:50% !important; 57 | -webkit-animation:spin 2s linear infinite; 58 | animation:spin 2s linear infinite; 59 | } 60 | .chart-loader .loader:before { 61 | content:""; 62 | position:absolute; 63 | top:3px; 64 | left:5px; 65 | right:5px; 66 | bottom:5px; 67 | border:3px solid transparent; 68 | border-top-color:#e74c3c; 69 | border-radius:50% !important; 70 | -webkit-animation:spin 3s linear infinite; 71 | animation:spin 3s linear infinite; 72 | } 73 | .chart-loader .loader:after { 74 | content:""; 75 | position:absolute; 76 | top:9px; 77 | left:10px; 78 | right:10px; 79 | bottom:10px; 80 | border:3px solid transparent; 81 | border-top-color:#f9c922; 82 | border-radius:50% !important; 83 | -webkit-animation:spin 1.5s linear infinite; 84 | animation:spin 1.5s linear infinite; 85 | } 86 | .chart-done .chart-loader {display:none;} 87 | @-webkit-keyframes spin { 88 | 0% { 89 | -webkit-transform: rotate(0deg); 90 | -ms-transform: rotate(0deg); 91 | transform: rotate(0deg) 92 | } 93 | 100% { 94 | -webkit-transform: rotate(360deg); 95 | -ms-transform: rotate(360deg); 96 | transform: rotate(360deg) 97 | } 98 | } 99 | @keyframes spin { 100 | 0% { 101 | -webkit-transform: rotate(0deg); 102 | -ms-transform: rotate(0deg); 103 | transform: rotate(0deg) 104 | } 105 | 100% { 106 | -webkit-transform: rotate(360deg); 107 | -ms-transform: rotate(360deg); 108 | transform: rotate(360deg) 109 | } 110 | } -------------------------------------------------------------------------------- /case08/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case08/img/bg.png -------------------------------------------------------------------------------- /case08/img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case08/img/header.png -------------------------------------------------------------------------------- /case08/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case08/img/thumb.jpg -------------------------------------------------------------------------------- /case08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 树图 - 基于ECharts V4.2 8 | 9 | 10 | 11 | 12 | 15 | 16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | 350 | 351 | -------------------------------------------------------------------------------- /case08/js/echarts-theme-shine.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) {if (typeof define === 'function' && define.amd) { 2 | // AMD. Register as an anonymous module. 3 | define(['exports', 'echarts'], factory); 4 | } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { 5 | // CommonJS 6 | factory(exports, require('echarts')); 7 | } else { 8 | // Browser globals 9 | factory({}, root.echarts); 10 | } 11 | }(this, function (exports, echarts) { 12 | var log = function (msg) { 13 | if (typeof console !== 'undefined') { 14 | console && console.error && console.error(msg); 15 | } 16 | }; 17 | if (!echarts) { 18 | log('ECharts is not Loaded'); 19 | return; 20 | } 21 | 22 | var colorPalette = [ 23 | '#c12e34','#e6b600','#0098d9','#2b821d', 24 | '#005eaa','#339ca8','#cda819','#32a487' 25 | ]; 26 | 27 | var theme = { 28 | 29 | color: colorPalette, 30 | 31 | title: { 32 | textStyle: { 33 | fontWeight: 'normal' 34 | } 35 | }, 36 | 37 | visualMap: { 38 | color:['#1790cf','#a2d4e6'] 39 | }, 40 | 41 | toolbox: { 42 | iconStyle: { 43 | normal: { 44 | borderColor: '#06467c' 45 | } 46 | } 47 | }, 48 | 49 | tooltip: { 50 | backgroundColor: 'rgba(0,0,0,0.6)' 51 | }, 52 | 53 | dataZoom: { 54 | dataBackgroundColor: '#dedede', 55 | fillerColor: 'rgba(154,217,247,0.2)', 56 | handleColor: '#005eaa' 57 | }, 58 | 59 | timeline: { 60 | lineStyle: { 61 | color: '#005eaa' 62 | }, 63 | controlStyle: { 64 | normal: { 65 | color: '#005eaa', 66 | borderColor: '#005eaa' 67 | } 68 | } 69 | }, 70 | 71 | candlestick: { 72 | itemStyle: { 73 | normal: { 74 | color: '#c12e34', 75 | color0: '#2b821d', 76 | lineStyle: { 77 | width: 1, 78 | color: '#c12e34', 79 | color0: '#2b821d' 80 | } 81 | } 82 | } 83 | }, 84 | 85 | graph: { 86 | color: colorPalette 87 | }, 88 | 89 | map: { 90 | label: { 91 | normal: { 92 | textStyle: { 93 | color: '#c12e34' 94 | } 95 | }, 96 | emphasis: { 97 | textStyle: { 98 | color: '#c12e34' 99 | } 100 | } 101 | }, 102 | itemStyle: { 103 | normal: { 104 | borderColor: '#eee', 105 | areaColor: '#ddd' 106 | }, 107 | emphasis: { 108 | areaColor: '#e6b600' 109 | } 110 | } 111 | }, 112 | 113 | gauge: { 114 | axisLine: { 115 | show: true, 116 | lineStyle: { 117 | color: [[0.2, '#2b821d'],[0.8, '#005eaa'],[1, '#c12e34']], 118 | width: 5 119 | } 120 | }, 121 | axisTick: { 122 | splitNumber: 10, 123 | length:8, 124 | lineStyle: { 125 | color: 'auto' 126 | } 127 | }, 128 | axisLabel: { 129 | textStyle: { 130 | color: 'auto' 131 | } 132 | }, 133 | splitLine: { 134 | length: 12, 135 | lineStyle: { 136 | color: 'auto' 137 | } 138 | }, 139 | pointer: { 140 | length: '90%', 141 | width: 3, 142 | color: 'auto' 143 | }, 144 | title: { 145 | textStyle: { 146 | color: '#333' 147 | } 148 | }, 149 | detail: { 150 | textStyle: { 151 | color: 'auto' 152 | } 153 | } 154 | } 155 | }; 156 | echarts.registerTheme('shine', theme); 157 | })); -------------------------------------------------------------------------------- /case09/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* global */ 4 | * {margin:0;padding:0;box-sizing:border-box;} 5 | html, body { 6 | width:100%; 7 | height:100%; 8 | min-width:1200px; 9 | min-height:600px; 10 | overflow:hidden; 11 | } 12 | body { 13 | position:relative; 14 | font-family:"Microsoft Yahei", Arial, sans-serif; 15 | background:rgb(40, 30, 47) url("../img/bg.png") 0 0 / 100% 100% no-repeat; 16 | } 17 | 18 | /* layout */ 19 | #header { 20 | position:relative; 21 | height:72px; 22 | background:url("../img/header.png") 0 0 / 100% 100% no-repeat; 23 | overflow:hidden; 24 | } 25 | .header-title {line-height:64px;text-align:center;font-size:34px;font-weight:400;color:#fff;} 26 | .header-info {position:absolute;top:32px;font-size:18px;color:#73aae5;} 27 | .header-info-l {left:20px;} 28 | .header-info-r {right:20px;} 29 | #footer { 30 | position:absolute; 31 | bottom:0; 32 | left:0; 33 | right:0; 34 | height:28px; 35 | background:url("../img/footer.png") 0 0 / 100% 100% no-repeat; 36 | } 37 | #container {position:absolute;top:72px;bottom:22px;left:0;right:0;} 38 | 39 | #flexCon { 40 | height:100%; 41 | display:-webkit-flex; 42 | display:-ms-flexbox; 43 | display:flex; 44 | -webkit-flex-direction:column; 45 | -ms-flex-direction:column; 46 | flex-direction:column; 47 | } 48 | .flex-row { 49 | -webkit-flex:1; 50 | -ms-flex:1; 51 | flex:1; 52 | display:-webkit-flex; 53 | display:-ms-flexbox; 54 | display:flex; 55 | } 56 | .flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:15px;} 57 | .flex-cell-l, 58 | .flex-cell-r {-webkit-flex:2;-ms-flex:2;flex:2;} 59 | .flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;} 60 | .flex-cell-lc {-webkit-flex:5;-ms-flex:5;flex:5;} 61 | 62 | .chart-wrapper {position:relative;height:100%;} 63 | .chart-title {height:32px;font-size:22px;font-weight:normal;color:#9aa8d4;} 64 | .chart-div {position:absolute;top:32px;bottom:0;left:0;right:0;} 65 | 66 | .data-t {table-layout:fixed;width:100%;height:100%;border-collapse:collapse;} 67 | .data-t th, 68 | .data-t td {min-height:48px;} 69 | .data-t th {width:60px;text-align:center;background:url("../img/icon-bg.png") center / 100% no-repeat;} 70 | .data-t th img {width:30px;height:30px;} 71 | .data-t td {padding-left:15px;} 72 | .data-t p {margin:5px 0;line-height:1;font-size:14px;color:#b0c2f9;} 73 | .data-t p span {font-size:32px;font-weight:bold;color:#fff;} 74 | 75 | /* media query */ 76 | @media (max-width:1900px) { 77 | #header {height:48px;} 78 | .header-title {line-height:42px;font-size:24px;} 79 | .header-info {top:17px;font-size:14px;} 80 | .header-info-l {left:15px;} 81 | .header-info-r {right:15px;} 82 | .flex-cell {padding:10px;} 83 | .chart-title {height:24px;font-size:18px;} 84 | .chart-div {top:24px;} 85 | .data-t p span {font-size:24px;} 86 | #footer {height:16px;} 87 | #container {top:48px;bottom:12px;} 88 | } 89 | 90 | /* chart-loader */ 91 | .chart-loader { 92 | position:absolute; 93 | top:0; 94 | left:0; 95 | z-index:99; 96 | width:100%; 97 | height:100%; 98 | background:rgba(255, 255, 255, 0); 99 | transition:all .8s; 100 | } 101 | .chart-loader .loader { 102 | position:absolute; 103 | left:50%; 104 | top:50%; 105 | width:60px; 106 | height:60px; 107 | margin:-30px 0 0 -30px; 108 | border:3px solid transparent; 109 | border-top-color:#3498db; 110 | border-radius:50% !important; 111 | -webkit-animation:spin 2s linear infinite; 112 | animation:spin 2s linear infinite; 113 | } 114 | .chart-loader .loader:before { 115 | content:""; 116 | position:absolute; 117 | top:3px; 118 | left:5px; 119 | right:5px; 120 | bottom:5px; 121 | border:3px solid transparent; 122 | border-top-color:#e74c3c; 123 | border-radius:50% !important; 124 | -webkit-animation:spin 3s linear infinite; 125 | animation:spin 3s linear infinite; 126 | } 127 | .chart-loader .loader:after { 128 | content:""; 129 | position:absolute; 130 | top:9px; 131 | left:10px; 132 | right:10px; 133 | bottom:10px; 134 | border:3px solid transparent; 135 | border-top-color:#f9c922; 136 | border-radius:50% !important; 137 | -webkit-animation:spin 1.5s linear infinite; 138 | animation:spin 1.5s linear infinite; 139 | } 140 | .chart-done .chart-loader {display:none;} 141 | @-webkit-keyframes spin { 142 | 0% { 143 | -webkit-transform: rotate(0deg); 144 | -ms-transform: rotate(0deg); 145 | transform: rotate(0deg) 146 | } 147 | 100% { 148 | -webkit-transform: rotate(360deg); 149 | -ms-transform: rotate(360deg); 150 | transform: rotate(360deg) 151 | } 152 | } 153 | @keyframes spin { 154 | 0% { 155 | -webkit-transform: rotate(0deg); 156 | -ms-transform: rotate(0deg); 157 | transform: rotate(0deg) 158 | } 159 | 100% { 160 | -webkit-transform: rotate(360deg); 161 | -ms-transform: rotate(360deg); 162 | transform: rotate(360deg) 163 | } 164 | } -------------------------------------------------------------------------------- /case09/data/count-data.json: -------------------------------------------------------------------------------- 1 | { 2 | "listed_companies_total": 3574, 3 | "listed_securities_total": 20018, 4 | "total_market_value": 455294.1, 5 | "circulation_market_value": 370447.9, 6 | "sh_pe_ratio": 13.16, 7 | "sz_pe_ratio": 20.99 8 | } -------------------------------------------------------------------------------- /case09/data/csrc-industry.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "code": "A", 4 | "industry": "农、林、牧、渔业", 5 | "alias": "农林牧渔", 6 | "sh_stock": 15, 7 | "sz_stock": 26, 8 | "stock": 41 9 | }, 10 | { 11 | "code": "B", 12 | "industry": "采矿业", 13 | "alias": "采矿业", 14 | "sh_stock": 51, 15 | "sz_stock": 26, 16 | "stock": 77 17 | }, 18 | { 19 | "code": "C", 20 | "industry": "制造业", 21 | "alias": "制造业", 22 | "sh_stock": 828, 23 | "sz_stock": 1471, 24 | "stock": 999 25 | }, 26 | { 27 | "code": "D", 28 | "industry": "电力、热力、燃气及水生产和供应业", 29 | "alias": "水电煤气", 30 | "sh_stock": 66, 31 | "sz_stock": 47, 32 | "stock": 113 33 | }, 34 | { 35 | "code": "E", 36 | "industry": "建筑业", 37 | "alias": "建筑业", 38 | "sh_stock": 50, 39 | "sz_stock": 49, 40 | "stock": 99 41 | }, 42 | { 43 | "code": "F", 44 | "industry": "批发和零售业", 45 | "alias": "批发零售", 46 | "sh_stock": 103, 47 | "sz_stock": 68, 48 | "stock": 171 49 | }, 50 | { 51 | "code": "G", 52 | "industry": "交通运输、仓储和邮政业", 53 | "alias": "运输仓储", 54 | "sh_stock": 73, 55 | "sz_stock": 34, 56 | "stock": 107 57 | }, 58 | { 59 | "code": "H", 60 | "industry": "住宿和餐饮业", 61 | "alias": "住宿餐饮", 62 | "sh_stock": 4, 63 | "sz_stock": 7, 64 | "stock": 11 65 | }, 66 | { 67 | "code": "I", 68 | "industry": "信息传输、软件和信息技术服务业", 69 | "alias": "信息技术", 70 | "sh_stock": 60, 71 | "sz_stock": 204, 72 | "stock": 264 73 | }, 74 | { 75 | "code": "J", 76 | "industry": "金融业", 77 | "alias": "金融业", 78 | "sh_stock": 64, 79 | "sz_stock": 27, 80 | "stock": 91 81 | }, 82 | { 83 | "code": "K", 84 | "industry": "房地产业", 85 | "alias": "房地产", 86 | "sh_stock": 74, 87 | "sz_stock": 63, 88 | "stock": 137 89 | }, 90 | { 91 | "code": "L", 92 | "industry": "租赁和商务服务业", 93 | "alias": "商务服务", 94 | "sh_stock": 17, 95 | "sz_stock": 36, 96 | "stock": 53 97 | }, 98 | { 99 | "code": "M", 100 | "industry": "科学研究和技术服务业", 101 | "alias": "科学服务", 102 | "sh_stock": 20, 103 | "sz_stock": 29, 104 | "stock": 49 105 | }, 106 | { 107 | "code": "N", 108 | "industry": "水利、环境和公共设施管理业", 109 | "alias": "公共环保", 110 | "sh_stock": 19, 111 | "sz_stock": 31, 112 | "stock": 50 113 | }, 114 | { 115 | "code": "O", 116 | "industry": "居民服务、修理和其他服务业", 117 | "alias": "居民服务", 118 | "sh_stock": 0, 119 | "sz_stock": 1, 120 | "stock": 1 121 | }, 122 | { 123 | "code": "P", 124 | "industry": "教育", 125 | "alias": "教育", 126 | "sh_stock": 2, 127 | "sz_stock": 1, 128 | "stock": 3 129 | }, 130 | { 131 | "code": "Q", 132 | "industry": "卫生和社会工作", 133 | "alias": "卫生", 134 | "sh_stock": 3, 135 | "sz_stock": 7, 136 | "stock": 10 137 | }, 138 | { 139 | "code": "R", 140 | "industry": "文化、体育和娱乐业", 141 | "alias": "文化传播", 142 | "sh_stock": 26, 143 | "sz_stock": 32, 144 | "stock": 58 145 | }, 146 | { 147 | "code": "S", 148 | "industry": "综合", 149 | "alias": "综合", 150 | "sh_stock": 15, 151 | "sz_stock": 7, 152 | "stock": 22 153 | } 154 | ] -------------------------------------------------------------------------------- /case09/data/month-count.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "month": "1月", 4 | "sh_market_capitalization": 351041.76, 5 | "sh_transaction_amount": 58096.59, 6 | "sh_pe_ratio": 19.25, 7 | "sz_market_capitalization": 0, 8 | "sz_transaction_amount": 0, 9 | "sz_pe_ratio": 0 10 | }, 11 | { 12 | "month": "2月", 13 | "sh_market_capitalization": 334105.65, 14 | "sh_transaction_amount": 32855.64, 15 | "sh_pe_ratio": 18.29, 16 | "sz_market_capitalization": 0, 17 | "sz_transaction_amount": 0, 18 | "sz_pe_ratio": 0 19 | }, 20 | { 21 | "month": "3月", 22 | "sh_market_capitalization": 351041.76, 23 | "sh_transaction_amount": 44281.8, 24 | "sh_pe_ratio": 17.77, 25 | "sz_market_capitalization": 0, 26 | "sz_transaction_amount": 0, 27 | "sz_pe_ratio": 0 28 | }, 29 | { 30 | "month": "4月", 31 | "sh_market_capitalization": 317966.5, 32 | "sh_transaction_amount": 34107.67, 33 | "sh_pe_ratio": 17.31, 34 | "sz_market_capitalization": 0, 35 | "sz_transaction_amount": 0, 36 | "sz_pe_ratio": 0 37 | }, 38 | { 39 | "month": "5月", 40 | "sh_market_capitalization": 320700.9, 41 | "sh_transaction_amount": 38396.92, 42 | "sh_pe_ratio": 15.16, 43 | "sz_market_capitalization": 0, 44 | "sz_transaction_amount": 0, 45 | "sz_pe_ratio": 0 46 | }, 47 | { 48 | "month": "6月", 49 | "sh_market_capitalization": 299581.98, 50 | "sh_transaction_amount": 31271.66, 51 | "sh_pe_ratio": 14.06, 52 | "sz_market_capitalization": 0, 53 | "sz_transaction_amount": 0, 54 | "sz_pe_ratio": 0 55 | }, 56 | { 57 | "month": "7月", 58 | "sh_market_capitalization": 305437.19, 59 | "sh_transaction_amount": 32764.68, 60 | "sh_pe_ratio": 14.29, 61 | "sz_market_capitalization": 0, 62 | "sz_transaction_amount": 0, 63 | "sz_pe_ratio": 0 64 | }, 65 | { 66 | "month": "8月", 67 | "sh_market_capitalization": 290651.27, 68 | "sh_transaction_amount": 28885.38, 69 | "sh_pe_ratio": 13.58, 70 | "sz_market_capitalization": 0, 71 | "sz_transaction_amount": 0, 72 | "sz_pe_ratio": 0 73 | }, 74 | { 75 | "month": "9月", 76 | "sh_market_capitalization": 301557.15, 77 | "sh_transaction_amount": 21689.22, 78 | "sh_pe_ratio": 14.07, 79 | "sz_market_capitalization": 0, 80 | "sz_transaction_amount": 0, 81 | "sz_pe_ratio": 0 82 | }, 83 | { 84 | "month": "10月", 85 | "sh_market_capitalization": 278622.02, 86 | "sh_transaction_amount": 24566.14, 87 | "sh_pe_ratio": 13, 88 | "sz_market_capitalization": 0, 89 | "sz_transaction_amount": 0, 90 | "sz_pe_ratio": 0 91 | }, 92 | { 93 | "month": "11月", 94 | "sh_market_capitalization": 300285.49, 95 | "sh_transaction_amount": 29652.15, 96 | "sh_pe_ratio": 13.88, 97 | "sz_market_capitalization": 0, 98 | "sz_transaction_amount": 0, 99 | "sz_pe_ratio": 0 100 | }, 101 | { 102 | "month": "12月", 103 | "sh_market_capitalization": 320765.48, 104 | "sh_transaction_amount": 30985.4, 105 | "sh_pe_ratio": 14.65, 106 | "sz_market_capitalization": 0, 107 | "sz_transaction_amount": 0, 108 | "sz_pe_ratio": 0 109 | } 110 | ] -------------------------------------------------------------------------------- /case09/data/ranking-list.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "order": 1, 4 | "stock_code": "601398", 5 | "stock_name": "工商银行", 6 | "market_capitalization": 14451.21 7 | }, 8 | { 9 | "order": 2, 10 | "stock_code": "601857", 11 | "stock_name": "中国石油", 12 | "market_capitalization": 13148.07 13 | }, 14 | { 15 | "order": 3, 16 | "stock_code": "601288", 17 | "stock_name": "农业银行", 18 | "market_capitalization": 11620.49 19 | }, 20 | { 21 | "order": 4, 22 | "stock_code": "601988", 23 | "stock_name": "中国银行", 24 | "market_capitalization": 7608.64 25 | }, 26 | { 27 | "order": 5, 28 | "stock_code": "601318", 29 | "stock_name": "中国平安", 30 | "market_capitalization": 7004.4 31 | }, 32 | { 33 | "order": 6, 34 | "stock_code": "600519", 35 | "stock_name": "贵州茅台", 36 | "market_capitalization": 6934.21 37 | }, 38 | { 39 | "order": 7, 40 | "stock_code": "600028", 41 | "stock_name": "中国石化", 42 | "market_capitalization": 5905.48 43 | }, 44 | { 45 | "order": 8, 46 | "stock_code": "600036", 47 | "stock_name": "招商银行", 48 | "market_capitalization": 5891.63 49 | }, 50 | { 51 | "order": 9, 52 | "stock_code": "601628", 53 | "stock_name": "中国人寿", 54 | "market_capitalization": 4583.26 55 | }, 56 | { 57 | "order": 10, 58 | "stock_code": "601088", 59 | "stock_name": "中国神华", 60 | "market_capitalization": 3298.21 61 | } 62 | ] -------------------------------------------------------------------------------- /case09/data/region-count.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "region": "安徽", 4 | "sh_count": 46, 5 | "sz_count": 57, 6 | "count": 103 7 | }, 8 | { 9 | "region": "内蒙古", 10 | "sh_count": 16, 11 | "sz_count": 10, 12 | "count": 26 13 | }, 14 | { 15 | "region": "宁夏", 16 | "sh_count": 5, 17 | "sz_count": 8, 18 | "count": 13 19 | }, 20 | { 21 | "region": "青海", 22 | "sh_count": 8, 23 | "sz_count": 4, 24 | "count": 12 25 | }, 26 | { 27 | "region": "福建", 28 | "sh_count": 53, 29 | "sz_count": 81, 30 | "count": 134 31 | }, 32 | { 33 | "region": "山东", 34 | "sh_count": 74, 35 | "sz_count": 126, 36 | "count": 200 37 | }, 38 | { 39 | "region": "山西", 40 | "sh_count": 18, 41 | "sz_count": 18, 42 | "count": 36 43 | }, 44 | { 45 | "region": "陕西", 46 | "sh_count": 24, 47 | "sz_count": 27, 48 | "count": 51 49 | }, 50 | { 51 | "region": "上海", 52 | "sh_count": 185, 53 | "sz_count": 78, 54 | "count": 263 55 | }, 56 | { 57 | "region": "四川", 58 | "sh_count": 44, 59 | "sz_count": 80, 60 | "count": 124 61 | }, 62 | { 63 | "region": "天津", 64 | "sh_count": 25, 65 | "sz_count": 24, 66 | "count": 49 67 | }, 68 | { 69 | "region": "北京", 70 | "sh_count": 138, 71 | "sz_count": 177, 72 | "count": 315 73 | }, 74 | { 75 | "region": "西藏", 76 | "sh_count": 9, 77 | "sz_count": 8, 78 | "count": 17 79 | }, 80 | { 81 | "region": "新疆", 82 | "sh_count": 29, 83 | "sz_count": 25, 84 | "count": 54 85 | }, 86 | { 87 | "region": "云南", 88 | "sh_count": 15, 89 | "sz_count": 20, 90 | "count": 35 91 | }, 92 | { 93 | "region": "浙江", 94 | "sh_count": 193, 95 | "sz_count": 239, 96 | "count": 432 97 | }, 98 | { 99 | "region": "甘肃", 100 | "sh_count": 18, 101 | "sz_count": 17, 102 | "count": 35 103 | }, 104 | { 105 | "region": "重庆", 106 | "sh_count": 26, 107 | "sz_count": 24, 108 | "count": 50 109 | }, 110 | { 111 | "region": "广东", 112 | "sh_count": 83, 113 | "sz_count": 506, 114 | "count": 589 115 | }, 116 | { 117 | "region": "广西", 118 | "sh_count": 17, 119 | "sz_count": 20, 120 | "count": 37 121 | }, 122 | { 123 | "region": "贵州", 124 | "sh_count": 14, 125 | "sz_count": 15, 126 | "count": 29 127 | }, 128 | { 129 | "region": "海南", 130 | "sh_count": 9, 131 | "sz_count": 20, 132 | "count": 29 133 | }, 134 | { 135 | "region": "黑龙江", 136 | "sh_count": 27, 137 | "sz_count": 11, 138 | "count": 38 139 | }, 140 | { 141 | "region": "河北", 142 | "sh_count": 26, 143 | "sz_count": 34, 144 | "count": 60 145 | }, 146 | { 147 | "region": "河南", 148 | "sh_count": 31, 149 | "sz_count": 49, 150 | "count": 80 151 | }, 152 | { 153 | "region": "江苏", 154 | "sh_count": 176, 155 | "sz_count": 226, 156 | "count": 402 157 | }, 158 | { 159 | "region": "湖北", 160 | "sh_count": 41, 161 | "sz_count": 61, 162 | "count": 102 163 | }, 164 | { 165 | "region": "湖南", 166 | "sh_count": 33, 167 | "sz_count": 73, 168 | "count": 106 169 | }, 170 | { 171 | "region": "吉林", 172 | "sh_count": 20, 173 | "sz_count": 24, 174 | "count": 44 175 | }, 176 | { 177 | "region": "江西", 178 | "sh_count": 17, 179 | "sz_count": 24, 180 | "count": 41 181 | }, 182 | { 183 | "region": "辽宁", 184 | "sh_count": 34, 185 | "sz_count": 42, 186 | "count": 76 187 | } 188 | ] -------------------------------------------------------------------------------- /case09/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/bg.png -------------------------------------------------------------------------------- /case09/img/footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/footer.png -------------------------------------------------------------------------------- /case09/img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/header.png -------------------------------------------------------------------------------- /case09/img/icon-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/icon-01.png -------------------------------------------------------------------------------- /case09/img/icon-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/icon-02.png -------------------------------------------------------------------------------- /case09/img/icon-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/icon-03.png -------------------------------------------------------------------------------- /case09/img/icon-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/icon-04.png -------------------------------------------------------------------------------- /case09/img/icon-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/icon-05.png -------------------------------------------------------------------------------- /case09/img/icon-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/icon-06.png -------------------------------------------------------------------------------- /case09/img/icon-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/icon-07.png -------------------------------------------------------------------------------- /case09/img/icon-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/icon-bg.png -------------------------------------------------------------------------------- /case09/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/case09/img/thumb.jpg -------------------------------------------------------------------------------- /case09/js/countUp.min.js: -------------------------------------------------------------------------------- 1 | !function(a,n){"function"==typeof define&&define.amd?define(n):"object"==typeof exports?module.exports=n(require,exports,module):a.CountUp=n()}(this,function(a,n,t){var e=function(a,n,t,e,i,r){function o(a){var n,t,e,i,r,o,s=a<0;if(a=Math.abs(a).toFixed(l.decimals),a+="",n=a.split("."),t=n[0],e=n.length>1?l.options.decimal+n[1]:"",l.options.useGrouping){for(i="",r=0,o=t.length;rl.endVal,l.frameVal=l.startVal,l.initialized=!0,!0):(l.error="[CountUp] startVal ("+n+") or endVal ("+t+") is not a number",!1)):(l.error="[CountUp] target is null or undefined",!1))},l.printValue=function(a){var n=l.options.formattingFn(a);"INPUT"===l.d.tagName?this.d.value=n:"text"===l.d.tagName||"tspan"===l.d.tagName?this.d.textContent=n:this.d.innerHTML=n},l.count=function(a){l.startTime||(l.startTime=a),l.timestamp=a;var n=a-l.startTime;l.remaining=l.duration-n,l.options.useEasing?l.countDown?l.frameVal=l.startVal-l.options.easingFn(n,0,l.startVal-l.endVal,l.duration):l.frameVal=l.options.easingFn(n,l.startVal,l.endVal-l.startVal,l.duration):l.countDown?l.frameVal=l.startVal-(l.startVal-l.endVal)*(n/l.duration):l.frameVal=l.startVal+(l.endVal-l.startVal)*(n/l.duration),l.countDown?l.frameVal=l.frameVall.endVal?l.endVal:l.frameVal,l.frameVal=Math.round(l.frameVal*l.dec)/l.dec,l.printValue(l.frameVal),nl.endVal,l.rAF=requestAnimationFrame(l.count))}},l.initialize()&&l.printValue(l.startVal)};return e}); -------------------------------------------------------------------------------- /case09/js/echarts-theme-shine.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) {if (typeof define === 'function' && define.amd) { 2 | // AMD. Register as an anonymous module. 3 | define(['exports', 'echarts'], factory); 4 | } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { 5 | // CommonJS 6 | factory(exports, require('echarts')); 7 | } else { 8 | // Browser globals 9 | factory({}, root.echarts); 10 | } 11 | }(this, function (exports, echarts) { 12 | var log = function (msg) { 13 | if (typeof console !== 'undefined') { 14 | console && console.error && console.error(msg); 15 | } 16 | }; 17 | if (!echarts) { 18 | log('ECharts is not Loaded'); 19 | return; 20 | } 21 | 22 | var colorPalette = [ 23 | '#c12e34','#e6b600','#0098d9','#2b821d', 24 | '#005eaa','#339ca8','#cda819','#32a487' 25 | ]; 26 | 27 | var theme = { 28 | 29 | color: colorPalette, 30 | 31 | title: { 32 | textStyle: { 33 | fontWeight: 'normal' 34 | } 35 | }, 36 | 37 | visualMap: { 38 | color:['#1790cf','#a2d4e6'] 39 | }, 40 | 41 | toolbox: { 42 | iconStyle: { 43 | normal: { 44 | borderColor: '#06467c' 45 | } 46 | } 47 | }, 48 | 49 | tooltip: { 50 | backgroundColor: 'rgba(0,0,0,0.6)' 51 | }, 52 | 53 | dataZoom: { 54 | dataBackgroundColor: '#dedede', 55 | fillerColor: 'rgba(154,217,247,0.2)', 56 | handleColor: '#005eaa' 57 | }, 58 | 59 | timeline: { 60 | lineStyle: { 61 | color: '#005eaa' 62 | }, 63 | controlStyle: { 64 | normal: { 65 | color: '#005eaa', 66 | borderColor: '#005eaa' 67 | } 68 | } 69 | }, 70 | 71 | candlestick: { 72 | itemStyle: { 73 | normal: { 74 | color: '#c12e34', 75 | color0: '#2b821d', 76 | lineStyle: { 77 | width: 1, 78 | color: '#c12e34', 79 | color0: '#2b821d' 80 | } 81 | } 82 | } 83 | }, 84 | 85 | graph: { 86 | color: colorPalette 87 | }, 88 | 89 | map: { 90 | label: { 91 | normal: { 92 | textStyle: { 93 | color: '#c12e34' 94 | } 95 | }, 96 | emphasis: { 97 | textStyle: { 98 | color: '#c12e34' 99 | } 100 | } 101 | }, 102 | itemStyle: { 103 | normal: { 104 | borderColor: '#eee', 105 | areaColor: '#ddd' 106 | }, 107 | emphasis: { 108 | areaColor: '#e6b600' 109 | } 110 | } 111 | }, 112 | 113 | gauge: { 114 | axisLine: { 115 | show: true, 116 | lineStyle: { 117 | color: [[0.2, '#2b821d'],[0.8, '#005eaa'],[1, '#c12e34']], 118 | width: 5 119 | } 120 | }, 121 | axisTick: { 122 | splitNumber: 10, 123 | length:8, 124 | lineStyle: { 125 | color: 'auto' 126 | } 127 | }, 128 | axisLabel: { 129 | textStyle: { 130 | color: 'auto' 131 | } 132 | }, 133 | splitLine: { 134 | length: 12, 135 | lineStyle: { 136 | color: 'auto' 137 | } 138 | }, 139 | pointer: { 140 | length: '90%', 141 | width: 3, 142 | color: 'auto' 143 | }, 144 | title: { 145 | textStyle: { 146 | color: '#333' 147 | } 148 | }, 149 | detail: { 150 | textStyle: { 151 | color: 'auto' 152 | } 153 | } 154 | } 155 | }; 156 | echarts.registerTheme('shine', theme); 157 | })); -------------------------------------------------------------------------------- /datav/datav1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/datav/datav1.jpg -------------------------------------------------------------------------------- /datav/datav2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/datav/datav2.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 大屏数据可视化 7 | 17 | 18 | 19 |
大屏数据可视化
20 |
21 | 22 |

项目案例 - 上市公司全景概览

23 | 24 | 25 | 26 |

项目案例 - 上市公司地域分布

27 | 28 | 29 |
30 |
31 | 32 |

旭日图 - 基于ECharts V4.2

33 | 34 | 35 | 36 |

树图 - 基于ECharts V4.2

37 | 38 | 39 |
40 |
41 | 42 |

地图数据可视化 - 基于ECharts Geo

43 | 44 | 45 | 46 |

3D图表展示 - 基于ECharts GL

47 | 48 | 49 |
50 |
51 | 52 |

热力图展示 - 基于ECharts & 百度地图

53 | 54 | 55 | 56 |

ECharts扩展示例

57 | 58 | 59 |
60 |
61 | 62 |

阿里云DataV案例 - 智慧文旅驾驶舱

63 | 64 | 65 | 66 |

阿里云DataV案例 - 企业实时销售大盘

67 | 68 | 69 |
70 |
71 | 72 |

百度Sugar案例 - 上交所上市公司全景概览

73 | 74 | 75 | 76 |

百度Sugar案例 - 深交所上市公司全景概览

77 | 78 | 79 |
80 |
81 | 82 |

腾讯云图案例 - 云计算服务监控

83 | 84 | 85 | 86 |

腾讯云图案例 - 智慧零售门店数据（竖屏版）

87 | 88 | 89 |
90 |
91 | 92 |

大屏模板

93 | 94 | 95 | 96 |

大屏模板

97 | 98 | 99 |
100 |
101 | 102 |

大屏模板

103 | 104 | 105 | 106 |

大屏模板

107 | 108 | 109 |
110 |
111 | 113 |

大屏模板（定制尺寸 3840 * 864）

114 | 115 | 116 |
117 | 118 | -------------------------------------------------------------------------------- /sugar/sugar1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/sugar/sugar1.jpg -------------------------------------------------------------------------------- /sugar/sugar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/sugar/sugar2.jpg -------------------------------------------------------------------------------- /tpl01/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* global */ 4 | * {margin:0;padding:0;box-sizing:border-box;} 5 | html, body { 6 | width:100%; 7 | height:100%; 8 | min-width:1200px; 9 | min-height:600px; 10 | overflow:hidden; 11 | } 12 | body { 13 | position:relative; 14 | font-family:"Microsoft Yahei", Arial, sans-serif; 15 | background:rgb(40, 30, 47) url("../img/bg.png") 0 0 / 100% 100% no-repeat; 16 | } 17 | 18 | /* layout */ 19 | #header { 20 | position:relative; 21 | height:72px; 22 | background:url("../img/header.png") 0 0 / 100% 100% no-repeat; 23 | overflow:hidden; 24 | } 25 | .header-title {line-height:64px;text-align:center;font-size:32px;font-weight:400;color:#fff;} 26 | .header-info {position:absolute;top:32px;font-size:18px;color:#73aae5;} 27 | .header-info-l {left:20px;} 28 | .header-info-r {right:20px;} 29 | 30 | #footer { 31 | position:absolute; 32 | bottom:0; 33 | left:0; 34 | right:0; 35 | height:24px; 36 | background:url("../img/footer.png") 0 0 / 100% 100% no-repeat; 37 | } 38 | #container {position:absolute;top:72px;bottom:24px;left:0;right:0;} 39 | 40 | #flexCon { 41 | height:100%; 42 | display:-webkit-flex; 43 | display:-ms-flexbox; 44 | display:flex; 45 | -webkit-flex-direction:column; 46 | -ms-flex-direction:column; 47 | flex-direction:column; 48 | } 49 | .flex-row { 50 | -webkit-flex:1; 51 | -ms-flex:1; 52 | flex:1; 53 | display:-webkit-flex; 54 | display:-ms-flexbox; 55 | display:flex; 56 | } 57 | .flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:15px;} 58 | .flex-cell-l, 59 | .flex-cell-r {-webkit-flex:2;-ms-flex:2;flex:2;} 60 | .flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;} 61 | .flex-cell-lc {-webkit-flex:5;-ms-flex:5;flex:5;} 62 | 63 | .chart-wrapper {position:relative;height:100%;} 64 | .chart-title {height:32px;font-size:22px;font-weight:normal;color:#9aa8d4;} 65 | .chart-div {position:absolute;top:32px;bottom:0;left:0;right:0;} 66 | 67 | /* media query */ 68 | @media (max-width:1900px) { 69 | #header {height:48px;} 70 | #footer {height:16px;} 71 | #container {top:48px;bottom:16px;} 72 | .header-title {line-height:42px;font-size:22px;} 73 | .header-info {top:17px;font-size:14px;} 74 | .header-info-l {left:15px;} 75 | .header-info-r {right:15px;} 76 | .flex-cell {padding:10px;} 77 | .chart-title {height:24px;font-size:18px;} 78 | .chart-div {top:24px;} 79 | .data-t p span {font-size:24px;} 80 | } 81 | 82 | /* chart-loader */ 83 | .chart-loader { 84 | position:absolute; 85 | top:0; 86 | left:0; 87 | z-index:99; 88 | width:100%; 89 | height:100%; 90 | background:rgba(255, 255, 255, 0); 91 | transition:all .8s; 92 | } 93 | .chart-loader .loader { 94 | position:absolute; 95 | left:50%; 96 | top:50%; 97 | width:60px; 98 | height:60px; 99 | margin:-30px 0 0 -30px; 100 | border:3px solid transparent; 101 | border-top-color:#3498db; 102 | border-radius:50% !important; 103 | -webkit-animation:spin 2s linear infinite; 104 | animation:spin 2s linear infinite; 105 | } 106 | .chart-loader .loader:before { 107 | content:""; 108 | position:absolute; 109 | top:3px; 110 | left:5px; 111 | right:5px; 112 | bottom:5px; 113 | border:3px solid transparent; 114 | border-top-color:#e74c3c; 115 | border-radius:50% !important; 116 | -webkit-animation:spin 3s linear infinite; 117 | animation:spin 3s linear infinite; 118 | } 119 | .chart-loader .loader:after { 120 | content:""; 121 | position:absolute; 122 | top:9px; 123 | left:10px; 124 | right:10px; 125 | bottom:10px; 126 | border:3px solid transparent; 127 | border-top-color:#f9c922; 128 | border-radius:50% !important; 129 | -webkit-animation:spin 1.5s linear infinite; 130 | animation:spin 1.5s linear infinite; 131 | } 132 | .chart-done .chart-loader {display:none;} 133 | @-webkit-keyframes spin { 134 | 0% { 135 | -webkit-transform: rotate(0deg); 136 | -ms-transform: rotate(0deg); 137 | transform: rotate(0deg) 138 | } 139 | 100% { 140 | -webkit-transform: rotate(360deg); 141 | -ms-transform: rotate(360deg); 142 | transform: rotate(360deg) 143 | } 144 | } 145 | @keyframes spin { 146 | 0% { 147 | -webkit-transform: rotate(0deg); 148 | -ms-transform: rotate(0deg); 149 | transform: rotate(0deg) 150 | } 151 | 100% { 152 | -webkit-transform: rotate(360deg); 153 | -ms-transform: rotate(360deg); 154 | transform: rotate(360deg) 155 | } 156 | } -------------------------------------------------------------------------------- /tpl01/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/bg.png -------------------------------------------------------------------------------- /tpl01/img/footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/footer.png -------------------------------------------------------------------------------- /tpl01/img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/header.png -------------------------------------------------------------------------------- /tpl01/img/icon-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/icon-01.png -------------------------------------------------------------------------------- /tpl01/img/icon-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/icon-02.png -------------------------------------------------------------------------------- /tpl01/img/icon-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/icon-03.png -------------------------------------------------------------------------------- /tpl01/img/icon-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/icon-04.png -------------------------------------------------------------------------------- /tpl01/img/icon-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/icon-05.png -------------------------------------------------------------------------------- /tpl01/img/icon-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/icon-06.png -------------------------------------------------------------------------------- /tpl01/img/icon-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/icon-07.png -------------------------------------------------------------------------------- /tpl01/img/icon-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/icon-bg.png -------------------------------------------------------------------------------- /tpl01/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl01/img/thumb.jpg -------------------------------------------------------------------------------- /tpl01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 大屏数据可视化 - 模板 8 | 9 | 10 | 11 | 12 | 17 | 18 |
19 | 20 |
21 |
22 |
23 |
24 |
25 |

图表

26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |

34 |
35 |
36 |
37 |
38 |
39 |

40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |

50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |

58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | 67 | -------------------------------------------------------------------------------- /tpl02/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* global */ 4 | * {margin:0;padding:0;box-sizing:border-box;} 5 | html, body { 6 | width:100%; 7 | height:100%; 8 | min-width:1200px; 9 | min-height:600px; 10 | overflow:hidden; 11 | } 12 | body { 13 | position:relative; 14 | font-family:"Microsoft Yahei", Arial, sans-serif; 15 | background:#0a1631 url("../img/bg.png") 0 0 / 100% 100% no-repeat; 16 | } 17 | 18 | /* layout */ 19 | #header { 20 | position:relative; 21 | height:72px; 22 | background:url("../img/header.png") 0 0 / 100% 100% no-repeat; 23 | overflow:hidden; 24 | } 25 | .header-title {line-height:64px;text-align:center;font-size:32px;font-weight:400;color:#fff;} 26 | .header-info {position:absolute;top:36px;font-size:18px;color:#73aae5;} 27 | .header-info-l {left:20px;} 28 | .header-info-r {right:20px;} 29 | #footer { 30 | position:absolute; 31 | bottom:0; 32 | left:0; 33 | right:0; 34 | height:24px; 35 | background:url("../img/footer.png") 0 0 / 100% 100% no-repeat; 36 | } 37 | #container {position:absolute;top:72px;bottom:24px;left:0;right:0;} 38 | 39 | #flexCon { 40 | height:100%; 41 | display:-webkit-flex; 42 | display:-ms-flexbox; 43 | display:flex; 44 | -webkit-flex-direction:column; 45 | -ms-flex-direction:column; 46 | flex-direction:column; 47 | } 48 | .flex-row { 49 | -webkit-flex:1; 50 | -ms-flex:1; 51 | flex:1; 52 | display:-webkit-flex; 53 | display:-ms-flexbox; 54 | display:flex; 55 | } 56 | .flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:15px;} 57 | .flex-cell-l, 58 | .flex-cell-r {-webkit-flex:2;-ms-flex:2;flex:2;} 59 | .flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;} 60 | .flex-cell-lc {-webkit-flex:5;-ms-flex:5;flex:5;} 61 | 62 | .chart-wrapper {position:relative;height:100%;} 63 | .chart-title {height:32px;font-size:22px;font-weight:normal;color:#9aa8d4;} 64 | .chart-div {position:absolute;top:32px;bottom:0;left:0;right:0;} 65 | 66 | /* media query */ 67 | @media (max-width:1900px) { 68 | #header {height:48px;} 69 | #footer {height:16px;} 70 | #container {top:48px;bottom:16px;} 71 | .header-title {line-height:42px;font-size:22px;} 72 | .header-info {top:22px;font-size:16px;} 73 | .header-info-l {left:14px;} 74 | .header-info-r {right:14px;} 75 | .flex-cell {padding:10px;} 76 | .chart-title {height:24px;font-size:18px;} 77 | .chart-div {top:24px;} 78 | .data-t p span {font-size:24px;} 79 | 80 | } 81 | 82 | /* chart-loader */ 83 | .chart-loader { 84 | position:absolute; 85 | top:0; 86 | left:0; 87 | z-index:99; 88 | width:100%; 89 | height:100%; 90 | background:rgba(255, 255, 255, 0); 91 | transition:all .8s; 92 | } 93 | .chart-loader .loader { 94 | position:absolute; 95 | left:50%; 96 | top:50%; 97 | width:60px; 98 | height:60px; 99 | margin:-30px 0 0 -30px; 100 | border:3px solid transparent; 101 | border-top-color:#3498db; 102 | border-radius:50% !important; 103 | -webkit-animation:spin 2s linear infinite; 104 | animation:spin 2s linear infinite; 105 | } 106 | .chart-loader .loader:before { 107 | content:""; 108 | position:absolute; 109 | top:3px; 110 | left:5px; 111 | right:5px; 112 | bottom:5px; 113 | border:3px solid transparent; 114 | border-top-color:#e74c3c; 115 | border-radius:50% !important; 116 | -webkit-animation:spin 3s linear infinite; 117 | animation:spin 3s linear infinite; 118 | } 119 | .chart-loader .loader:after { 120 | content:""; 121 | position:absolute; 122 | top:9px; 123 | left:10px; 124 | right:10px; 125 | bottom:10px; 126 | border:3px solid transparent; 127 | border-top-color:#f9c922; 128 | border-radius:50% !important; 129 | -webkit-animation:spin 1.5s linear infinite; 130 | animation:spin 1.5s linear infinite; 131 | } 132 | .chart-done .chart-loader {display:none;} 133 | @-webkit-keyframes spin { 134 | 0% { 135 | -webkit-transform: rotate(0deg); 136 | -ms-transform: rotate(0deg); 137 | transform: rotate(0deg) 138 | } 139 | 100% { 140 | -webkit-transform: rotate(360deg); 141 | -ms-transform: rotate(360deg); 142 | transform: rotate(360deg) 143 | } 144 | } 145 | @keyframes spin { 146 | 0% { 147 | -webkit-transform: rotate(0deg); 148 | -ms-transform: rotate(0deg); 149 | transform: rotate(0deg) 150 | } 151 | 100% { 152 | -webkit-transform: rotate(360deg); 153 | -ms-transform: rotate(360deg); 154 | transform: rotate(360deg) 155 | } 156 | } -------------------------------------------------------------------------------- /tpl02/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl02/img/bg.png -------------------------------------------------------------------------------- /tpl02/img/footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl02/img/footer.png -------------------------------------------------------------------------------- /tpl02/img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl02/img/header.png -------------------------------------------------------------------------------- /tpl02/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl02/img/thumb.jpg -------------------------------------------------------------------------------- /tpl02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 大屏数据可视化 - 模板 8 | 9 | 10 | 11 | 12 | 17 | 18 |
19 | 20 |
21 |
22 |
23 |
24 |
25 |

图表

26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |

34 |
35 |
36 |
37 |
38 |
39 |

40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |

50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |

58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | 67 | -------------------------------------------------------------------------------- /tpl03/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* global */ 4 | * {margin:0;padding:0;box-sizing:border-box;} 5 | html, body { 6 | width:100%; 7 | height:100%; 8 | min-width:1200px; 9 | min-height:600px; 10 | overflow:hidden; 11 | } 12 | body { 13 | position:relative; 14 | font-family:"Microsoft Yahei", Arial, sans-serif; 15 | background:#050d3c url("../img/bg.png") 0 0 / 100% 100% no-repeat; 16 | } 17 | 18 | /* layout */ 19 | #header { 20 | position:relative; 21 | height:72px; 22 | background:url("../img/header.png") 0 0 / 100% 100% no-repeat; 23 | overflow:hidden; 24 | } 25 | .header-title {line-height:64px;text-align:center;font-size:32px;font-weight:400;color:#bef2ff;} 26 | #container {position:absolute;top:64px;bottom:15px;left:0;right:0;} 27 | 28 | #flexCon { 29 | height:100%; 30 | display:-webkit-flex; 31 | display:-ms-flexbox; 32 | display:flex; 33 | -webkit-flex-direction:column; 34 | -ms-flex-direction:column; 35 | flex-direction:column; 36 | } 37 | .flex-row { 38 | -webkit-flex:1; 39 | -ms-flex:1; 40 | flex:1; 41 | display:-webkit-flex; 42 | display:-ms-flexbox; 43 | display:flex; 44 | } 45 | .flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:15px;} 46 | .flex-cell-l, 47 | .flex-cell-r {-webkit-flex:2;-ms-flex:2;flex:2;} 48 | .flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;} 49 | .flex-cell-lc {-webkit-flex:5;-ms-flex:5;flex:5;} 50 | 51 | .chart-wrapper {position:relative;height:100%;} 52 | .chart-title {height:30px;font-size:20px;font-weight:normal;color:#5ac8fa;} 53 | .chart-div { 54 | position:absolute; 55 | top:30px; 56 | bottom:0; 57 | left:0; 58 | right:0; 59 | border-style:solid; 60 | border-width:26px 27px 27px; 61 | border-image:url("../img/chart-wrapper.png") 26 27 27 fill / 1 / 0 repeat; 62 | } 63 | 64 | /* media query */ 65 | @media (max-width:1900px) { 66 | #header {height:48px;} 67 | #container {top:36px;bottom:10px;} 68 | .header-title {line-height:42px;font-size:22px;} 69 | .flex-cell {padding:10px;} 70 | .chart-title {height:24px;font-size:16px;} 71 | .chart-div {top:24px;} 72 | } 73 | 74 | /* chart-loader */ 75 | .chart-loader { 76 | position:absolute; 77 | top:0; 78 | left:0; 79 | z-index:99; 80 | width:100%; 81 | height:100%; 82 | background:rgba(255, 255, 255, 0); 83 | transition:all .8s; 84 | } 85 | .chart-loader .loader { 86 | position:absolute; 87 | left:50%; 88 | top:50%; 89 | width:60px; 90 | height:60px; 91 | margin:-30px 0 0 -30px; 92 | border:3px solid transparent; 93 | border-top-color:#3498db; 94 | border-radius:50% !important; 95 | -webkit-animation:spin 2s linear infinite; 96 | animation:spin 2s linear infinite; 97 | } 98 | .chart-loader .loader:before { 99 | content:""; 100 | position:absolute; 101 | top:3px; 102 | left:5px; 103 | right:5px; 104 | bottom:5px; 105 | border:3px solid transparent; 106 | border-top-color:#e74c3c; 107 | border-radius:50% !important; 108 | -webkit-animation:spin 3s linear infinite; 109 | animation:spin 3s linear infinite; 110 | } 111 | .chart-loader .loader:after { 112 | content:""; 113 | position:absolute; 114 | top:9px; 115 | left:10px; 116 | right:10px; 117 | bottom:10px; 118 | border:3px solid transparent; 119 | border-top-color:#f9c922; 120 | border-radius:50% !important; 121 | -webkit-animation:spin 1.5s linear infinite; 122 | animation:spin 1.5s linear infinite; 123 | } 124 | .chart-done .chart-loader {display:none;} 125 | @-webkit-keyframes spin { 126 | 0% { 127 | -webkit-transform: rotate(0deg); 128 | -ms-transform: rotate(0deg); 129 | transform: rotate(0deg) 130 | } 131 | 100% { 132 | -webkit-transform: rotate(360deg); 133 | -ms-transform: rotate(360deg); 134 | transform: rotate(360deg) 135 | } 136 | } 137 | @keyframes spin { 138 | 0% { 139 | -webkit-transform: rotate(0deg); 140 | -ms-transform: rotate(0deg); 141 | transform: rotate(0deg) 142 | } 143 | 100% { 144 | -webkit-transform: rotate(360deg); 145 | -ms-transform: rotate(360deg); 146 | transform: rotate(360deg) 147 | } 148 | } -------------------------------------------------------------------------------- /tpl03/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl03/img/bg.png -------------------------------------------------------------------------------- /tpl03/img/chart-wrapper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl03/img/chart-wrapper.png -------------------------------------------------------------------------------- /tpl03/img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl03/img/header.png -------------------------------------------------------------------------------- /tpl03/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl03/img/thumb.jpg -------------------------------------------------------------------------------- /tpl03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 大屏数据可视化 - 模板 8 | 9 | 10 | 11 | 12 | 15 | 16 |
17 |
18 |
19 |
20 |
21 |

图表

22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |

30 |
31 |
32 |
33 |
34 |
35 |

36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |

46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |

54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | -------------------------------------------------------------------------------- /tpl04/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /********** Global **********/ 4 | html, body { 5 | width:100%; 6 | height:100%; 7 | font-family:"microsoft yahei", arial, sans-serif; 8 | background-color:#0b0f34; 9 | overflow-x:hidden; 10 | overflow-y:auto; 11 | } 12 | body {margin:0 auto;min-width:375px;max-width:1920px;} 13 | 14 | /********** Layout **********/ 15 | .header {position:relative;height:42px;box-sizing:border-box;} 16 | .header-title { 17 | margin:0; 18 | padding:0; 19 | line-height:64px; 20 | text-align:center; 21 | font-size:32px; 22 | font-weight:400; 23 | color:#e9c29d; 24 | } 25 | .wrapper { 26 | position:absolute; 27 | top:36px; 28 | bottom:10px; 29 | left:10px; 30 | right:10px; 31 | padding:10px 10px 0 10px; 32 | min-height:500px; 33 | background:url("../img/wrapper-bg.png") no-repeat; 34 | background-size:100% 100%; 35 | box-sizing:border-box; 36 | } 37 | /* PC */ 38 | @media (max-width:1919px) { 39 | .header {height:36px;} 40 | .header-title {line-height:42px;font-size:22px;} 41 | .wrapper {top:22px;} 42 | } 43 | /* Mobile */ 44 | @media (max-width:1279px) { 45 | .header-title {max-width:96%;} 46 | .wrapper {background:none;} 47 | } 48 | 49 | /********** Content **********/ 50 | .content { 51 | display:-webkit-flex; 52 | display:-ms-flexbox; 53 | display:flex; 54 | padding:25px 15px; 55 | height:100%; 56 | min-height:100%; 57 | box-sizing:border-box; 58 | } 59 | .col {margin:0 10px;height:100%;} 60 | .col-l {-webkit-flex:2;-ms-flex:2;flex:2} 61 | .col-c {-webkit-flex:3;-ms-flex:3;flex:3;} 62 | .col-r {-webkit-flex:2;-ms-flex:2;flex:2;} 63 | /* PC */ 64 | @media (max-width:1919px) { 65 | .content {padding:5px 0;} 66 | } 67 | /* Mobile */ 68 | @media (max-width:1279px) { 69 | .content { 70 | -webkit-flex-direction:column; 71 | -ms-flex-direction:column; 72 | flex-direction:column; 73 | } 74 | .col {margin:5px 0;} 75 | .col-l, 76 | .col-c, 77 | .col-r {-webkit-flex:none;-ms-flex:none;flex:none;} 78 | } 79 | .xpanel-wrapper {padding-bottom:10px;box-sizing:border-box;} 80 | .xpanel-wrapper {height:100%;} 81 | .xpanel-wrapper-25 {height:25%;} 82 | .xpanel-wrapper-30 {height:30%;} 83 | .xpanel-wrapper-40 {height:40%;} 84 | .xpanel-wrapper-45 {height:45%;} 85 | .xpanel-wrapper-60 {height:60%;} 86 | .xpanel-wrapper-75 {height:75%;} 87 | .xpanel { 88 | height:100%; 89 | min-height:100px; 90 | background-repeat:no-repeat; 91 | background-size:100% 100%; 92 | box-sizing:border-box; 93 | } 94 | .xpanel-l-t {background-image:url("../img/panel-l-t.png");} 95 | .xpanel-l-b {background-image:url("../img/panel-l-b.png");} 96 | .xpanel-c-b {background-image:url("../img/panel-c-b.png");} 97 | .xpanel-r-t {background-image:url("../img/panel-r-t.png");} 98 | .xpanel-r-m {background-image:url("../img/panel-r-m.png");} 99 | .xpanel-r-b {background-image:url("../img/panel-r-b.png");} 100 | .xpanel .title { 101 | padding-left:24px; 102 | height:44px; 103 | line-height:44px; 104 | font-size:24px; 105 | font-weight:normal; 106 | color:#fff; 107 | background-image:url("../img/title-bg.png"); 108 | background-repeat:no-repeat; 109 | background-size:100% 100%; 110 | } 111 | .xpanel .title-long {background-image:url("../img/title-bg-long.png");} 112 | /* PC */ 113 | @media (max-width:1919px) { 114 | .xpanel .title {padding-left:20px;height:36px;line-height:36px;font-size:20px;} 115 | } 116 | 117 | /* tool */ 118 | .fill-h {height:100% !important;min-height:100% !important;} 119 | .no-margin {margin:0 !important;} 120 | .no-padding {padding:0 !important;} 121 | .no-bg {background:none !important;} 122 | .no-border {border:0 !important;} 123 | 124 | /* scrollbar */ 125 | ::-webkit-scrollbar {width:0;height:0;} 126 | ::-webkit-scrollbar-track {background-color:transparent;} 127 | ::-webkit-scrollbar-thumb {border-radius:5px;background-color:rgba(0, 0, 0, 0.3);} -------------------------------------------------------------------------------- /tpl04/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/loading.gif -------------------------------------------------------------------------------- /tpl04/img/panel-c-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/panel-c-b.png -------------------------------------------------------------------------------- /tpl04/img/panel-l-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/panel-l-b.png -------------------------------------------------------------------------------- /tpl04/img/panel-l-t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/panel-l-t.png -------------------------------------------------------------------------------- /tpl04/img/panel-r-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/panel-r-b.png -------------------------------------------------------------------------------- /tpl04/img/panel-r-m.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/panel-r-m.png -------------------------------------------------------------------------------- /tpl04/img/panel-r-t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/panel-r-t.png -------------------------------------------------------------------------------- /tpl04/img/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/thumb.jpg -------------------------------------------------------------------------------- /tpl04/img/title-bg-long.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/title-bg-long.png -------------------------------------------------------------------------------- /tpl04/img/title-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/title-bg.png -------------------------------------------------------------------------------- /tpl04/img/wrapper-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl04/img/wrapper-bg.png -------------------------------------------------------------------------------- /tpl04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 大屏数据可视化 - 模板 9 | 10 | 11 | 12 | 13 |
14 |

大屏数据可视化模板

15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | 61 | -------------------------------------------------------------------------------- /tpl05/css/app.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* global */ 4 | * {margin:0;padding:0;box-sizing:border-box;} 5 | html, body { 6 | font-family:"Microsoft Yahei", Arial, sans-serif; 7 | background:#041742; 8 | } 9 | 10 | /* layout */ 11 | #dashboard { 12 | position:relative; 13 | margin:0 auto; 14 | width:3840px; 15 | height:864px; 16 | background:url("../img/dashboard-bg.png") center center / 100% 100% no-repeat; 17 | } 18 | #colLeft, 19 | #colRight {position:absolute;top:0;bottom:0;width:748px;} 20 | #colLeft {left:0;} 21 | #colRight {right:0;} 22 | #colCenter {position:relative;margin:0 auto;width:2348px;height:100%;} 23 | 24 | /* colCenter */ 25 | #header { 26 | position:absolute; 27 | top:0; 28 | left:0; 29 | width:100%; 30 | height:78px; 31 | background:url("../img/header-bg.png") center no-repeat; 32 | } 33 | .header-title { 34 | display:block; 35 | margin: 14px auto 0 auto; 36 | height:50px; 37 | } 38 | 39 | #container { 40 | position:relative; 41 | top:54px; 42 | height:810px; 43 | background:url("../img/container-bg.png") top center / 100% 100% no-repeat; 44 | } 45 | #conLeft, 46 | #conRight {position:absolute;top:0;bottom:0;width:705px;} 47 | #conLeft {left:0;} 48 | #conRight {right:0;} 49 | #conCenter {margin:0 705px;height:100%;border-top:1px solid transparent;} 50 | 51 | /* chart */ 52 | .chart-panel { 53 | margin:20px; 54 | width:664px; 55 | height:375px; 56 | background:url("../img/chart-bg.png") center center / 100% 100% no-repeat; 57 | overflow:hidden; 58 | } 59 | .chart-title {height:46px;} 60 | .chart-title .title { 61 | margin:0 0 0 20px; 62 | line-height:46px; 63 | font-size:16px; 64 | font-weight:600; 65 | color:#07CCFC; 66 | } 67 | .chart-tab li { 68 | list-style:none; 69 | float:left; 70 | margin-left:36px; 71 | margin-right:54px; 72 | height:46px; 73 | line-height:46px; 74 | border-bottom:3px solid transparent; 75 | } 76 | .chart-tab li.active {border-color:#07CCFC;} 77 | .chart-tab li a {font-size:16px;font-weight:600;color:#07CCFC;text-decoration:none;} 78 | .chart-div {position:relative;margin:20px;height:290px;} 79 | .chart-panel-multi {background-image:url("../img/chart-multi-bg.png");} 80 | .chart-panel-c {width:auto;height:270px;background-image:url("../img/chart-c-bg.png");} 81 | .chart-panel-multi .chart-tab li {height:48px;} 82 | .chart-panel-c .chart-title {height:36px;} 83 | .chart-panel-c .chart-title img {margin-top:8px;} 84 | .chart-panel-c .chart-div {margin:5px 15px;height:220px;} 85 | .chart-panel-c-multi {width:auto;height:270px;background-image:url("../img/chart-c-multi-bg.png");} 86 | .chart-panel-c-multi .chart-title {height:36px;} 87 | .chart-panel-c-multi .chart-tab li {margin-left:24px;margin-right:36px;height:35px;line-height:32px;} 88 | .chart-panel-c-multi .chart-div {margin:0 15px;height:235px;} 89 | 90 | /* indicator-div */ 91 | .indicator-panel {margin:55px -5px 0 -5px;height:70px;overflow:hidden;} 92 | .indicator-div { 93 | float:left; 94 | margin:0 5px; 95 | width:179px; 96 | height:70px; 97 | background:url("../img/indicator-bg.png") 0 0 / 100% 100% no-repeat; 98 | } 99 | .indicator { 100 | margin:10px 0 0 10px; 101 | background:url("../img/icon-indicator.png") 0 3px / 42px 42px no-repeat; 102 | } 103 | .indicator p {margin-left:55px;line-height:1.4em;font-size:16px;color:#fff;} 104 | .indicator p span {font-size:28px;color:#01C4F9;} 105 | 106 | /* map */ 107 | .map-panel {position:relative;top:10px;height:656px;border:1px solid transparent;overflow:hidden;} 108 | .map-circle { 109 | position:absolute; 110 | top:0; 111 | left:140px; 112 | width:656px; 113 | height:656px; 114 | background:url("../img/map-circle.png") 0 0 / 100% 100% no-repeat; 115 | -webkit-animation:spin 180s linear infinite; 116 | animation:spin 180s linear infinite; 117 | } 118 | .map-circle-inner { 119 | position:absolute; 120 | top:34px; 121 | left:174px; 122 | width:588px; 123 | height:588px; 124 | background:url("../img/map-circle-inner.png") 0 0 / 100% 100% no-repeat; 125 | -webkit-animation:spin2 30s linear infinite; 126 | animation:spin2 30s linear infinite; 127 | } 128 | .map-legend { 129 | position:absolute; 130 | left:0; 131 | bottom:0px; 132 | z-index:9; 133 | padding-top:5px; 134 | padding-left:8px; 135 | width:140px; 136 | height:220px; 137 | background:rgba(0,255,246,0.1); 138 | border:1px solid rgba(0, 252, 255, 1); 139 | border-radius:5px; 140 | } 141 | .map-legend a.point { 142 | display:inline-block; 143 | margin:8px 5px; 144 | padding-left:24px; 145 | width:110px; 146 | height:26px; 147 | line-height:26px; 148 | font-size:14px; 149 | color:#b0c2f9; 150 | text-decoration:none; 151 | background-repeat:no-repeat; 152 | background-position:0 center; 153 | background-size:16px 22px; 154 | cursor:pointer; 155 | } 156 | .map-legend a.point-1 {background-image:url("../img/point-1.png");} 157 | .map-legend a.point-1.active {color:#fd6343;} 158 | .map-legend a.point-2 {background-image:url("../img/point-2.png");} 159 | .map-legend a.point-2.active {color:#f9a300;} 160 | .map-legend a.point-3 {background-image:url("../img/point-3.png");} 161 | .map-legend a.point-3.active {color:#05aaff;} 162 | .map-legend a.point-4 {background-image:url("../img/point-4.png");} 163 | .map-legend a.point-4.active {color:#03cd66;} 164 | .map-legend a.point-5 {background-image:url("../img/point-5.png");} 165 | .map-legend a.point-5.active {color:#853cff;} 166 | .map-div { 167 | position:relative; 168 | z-index:5; 169 | margin:0 auto; 170 | width:936px; 171 | height:656px; 172 | background:url("../img/map-bg.png") no-repeat; 173 | } 174 | .map-div a.point { 175 | position:absolute; 176 | display:block; 177 | width:25px; 178 | height:35px; 179 | font-size:0; 180 | text-decoration:none; 181 | background-repeat:no-repeat; 182 | background-position:0 0; 183 | background-size:25px 35px; 184 | cursor:pointer; 185 | -webkit-animation:jump 1.8s ease-in-out infinite; 186 | animation:jump 1.8s ease-in-out infinite; 187 | } 188 | .map-div a.point1 {background-image:url("../img/point-1.png");} 189 | .map-div a.point2 {background-image:url("../img/point-2.png");} 190 | .map-div a.point3 {background-image:url("../img/point-3.png");} 191 | .map-div a.point4 {background-image:url("../img/point-4.png");} 192 | .map-div a.point5 {background-image:url("../img/point-5.png");} 193 | 194 | .map-div .effect_point {position:absolute;width:25px;height:35px;font-size:0;} 195 | .map-div .effect_point>div { 196 | position:absolute; 197 | left:0; 198 | bottom:-12px; 199 | width:24px; 200 | height:24px; 201 | border-radius:50%; 202 | animation:effect_point 1.8s ease-in-out 0s infinite; 203 | animation-fill-mode:both; 204 | } 205 | .map-div .effect_point>div:nth-child(2) {animation-delay:0.3s;} 206 | .map-div .effect_point>div:nth-child(3) {animation-delay:0.5s;} 207 | .map-div .effect_point1>div {background:#fd6343;} 208 | .map-div .effect_point2>div {background:#f9a300;} 209 | .map-div .effect_point3>div {background:#05aaff;} 210 | .map-div .effect_point4>div {background:#03cd66;} 211 | .map-div .effect_point5>div {background:#853cff;} 212 | 213 | /* panel */ 214 | .panel-div { 215 | margin:20px; 216 | width:708px; 217 | height:260px; 218 | background:url("../img/panel-bg.png") center center / 100% 100% no-repeat; 219 | overflow:hidden; 220 | } 221 | .panel-div.bg-1 {height:256px;background:url("../img/panel-bg-1.png") center center / 100% 100% no-repeat;} 222 | .panel-div.bg-2 {height:256px;background:url("../img/panel-bg-2.png") center center / 100% 100% no-repeat;} 223 | .panel-title { 224 | padding:0 20px 0 40px; 225 | height:46px; 226 | background:url("../img/panel-title-bg.png") 0 0 / 100% 100% no-repeat; 227 | } 228 | .panel-tab li { 229 | list-style:none; 230 | float:left; 231 | padding: 0 25px; 232 | width:33.333%; 233 | height:46px; 234 | } 235 | .panel-tab li a { 236 | display:block; 237 | margin-top:8px; 238 | height:38px; 239 | line-height:36px; 240 | text-align:center; 241 | letter-spacing:2px; 242 | font-size:16px; 243 | font-weight:600; 244 | color:#07CCFC; 245 | text-decoration:none; 246 | border-bottom:2px solid #07CCFC 247 | } 248 | .panel-tab li.active a { 249 | color:#fff; 250 | background:url("../img/tab-active.png") center center / 100% 100% no-repeat; 251 | border:0; 252 | } 253 | .panel-con {margin:10px 10px 0 10px;height:200px;} 254 | 255 | /* chart-loader */ 256 | .chart-loader { 257 | position:absolute; 258 | top:0; 259 | left:0; 260 | z-index:99; 261 | width:100%; 262 | height:100%; 263 | background:rgba(255, 255, 255, 0); 264 | transition:all .8s; 265 | } 266 | .chart-loader .loader { 267 | position:absolute; 268 | left:50%; 269 | top:50%; 270 | width:60px; 271 | height:60px; 272 | margin:-30px 0 0 -30px; 273 | border:3px solid transparent; 274 | border-top-color:#3498db; 275 | border-radius:50% !important; 276 | -webkit-animation:spin 2s linear infinite; 277 | animation:spin 2s linear infinite; 278 | } 279 | .chart-loader .loader:before { 280 | content:""; 281 | position:absolute; 282 | top:3px; 283 | left:5px; 284 | right:5px; 285 | bottom:5px; 286 | border:3px solid transparent; 287 | border-top-color:#e74c3c; 288 | border-radius:50% !important; 289 | -webkit-animation:spin 3s linear infinite; 290 | animation:spin 3s linear infinite; 291 | } 292 | .chart-loader .loader:after { 293 | content:""; 294 | position:absolute; 295 | top:9px; 296 | left:10px; 297 | right:10px; 298 | bottom:10px; 299 | border:3px solid transparent; 300 | border-top-color:#f9c922; 301 | border-radius:50% !important; 302 | -webkit-animation:spin 1.5s linear infinite; 303 | animation:spin 1.5s linear infinite; 304 | } 305 | .chart-done .chart-loader {display:none;} 306 | 307 | @-webkit-keyframes spin { 308 | 0% { 309 | -webkit-transform: rotate(0deg); 310 | -ms-transform: rotate(0deg); 311 | transform: rotate(0deg) 312 | } 313 | 100% { 314 | -webkit-transform: rotate(360deg); 315 | -ms-transform: rotate(360deg); 316 | transform: rotate(360deg) 317 | } 318 | } 319 | @keyframes spin { 320 | 0% { 321 | -webkit-transform: rotate(0deg); 322 | -ms-transform: rotate(0deg); 323 | transform: rotate(0deg) 324 | } 325 | 100% { 326 | -webkit-transform: rotate(360deg); 327 | -ms-transform: rotate(360deg); 328 | transform: rotate(360deg) 329 | } 330 | } 331 | 332 | @-webkit-keyframes spin2 { 333 | 0% { 334 | -webkit-transform: rotate(0deg); 335 | -ms-transform: rotate(0deg); 336 | transform: rotate(0deg) 337 | } 338 | 100% { 339 | -webkit-transform: rotate(-360deg); 340 | -ms-transform: rotate(-360deg); 341 | transform: rotate(-360deg) 342 | } 343 | } 344 | @keyframes spin2 { 345 | 0% { 346 | -webkit-transform: rotate(0deg); 347 | -ms-transform: rotate(0deg); 348 | transform: rotate(0deg) 349 | } 350 | 100% { 351 | -webkit-transform: rotate(-360deg); 352 | -ms-transform: rotate(-360deg); 353 | transform: rotate(-360deg) 354 | } 355 | } 356 | -------------------------------------------------------------------------------- /tpl05/img/chart-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/chart-bg.png -------------------------------------------------------------------------------- /tpl05/img/chart-c-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/chart-c-bg.png -------------------------------------------------------------------------------- /tpl05/img/chart-c-multi-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/chart-c-multi-bg.png -------------------------------------------------------------------------------- /tpl05/img/chart-multi-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/chart-multi-bg.png -------------------------------------------------------------------------------- /tpl05/img/container-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/container-bg.png -------------------------------------------------------------------------------- /tpl05/img/dashboard-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/dashboard-bg.png -------------------------------------------------------------------------------- /tpl05/img/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/header-bg.png -------------------------------------------------------------------------------- /tpl05/img/header-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/header-title.png -------------------------------------------------------------------------------- /tpl05/img/icon-indicator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/icon-indicator.png -------------------------------------------------------------------------------- /tpl05/img/indicator-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/indicator-bg.png -------------------------------------------------------------------------------- /tpl05/img/map-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/map-bg.png -------------------------------------------------------------------------------- /tpl05/img/map-circle-inner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/map-circle-inner.png -------------------------------------------------------------------------------- /tpl05/img/map-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/map-circle.png -------------------------------------------------------------------------------- /tpl05/img/panel-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/panel-bg.png -------------------------------------------------------------------------------- /tpl05/img/panel-title-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/panel-title-bg.png -------------------------------------------------------------------------------- /tpl05/img/point-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/point-1.png -------------------------------------------------------------------------------- /tpl05/img/point-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/point-2.png -------------------------------------------------------------------------------- /tpl05/img/point-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/point-3.png -------------------------------------------------------------------------------- /tpl05/img/point-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/point-4.png -------------------------------------------------------------------------------- /tpl05/img/point-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/point-5.png -------------------------------------------------------------------------------- /tpl05/img/tab-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/tab-active.png -------------------------------------------------------------------------------- /tpl05/img/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/tpl05/img/thumb.png -------------------------------------------------------------------------------- /tpl05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 大屏数据可视化模板 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |
16 |
17 | 22 |
23 |
24 |
25 |
26 |
27 | 32 |
33 |
34 |
35 |
36 |
37 | 42 |
43 |
44 |
45 |
46 | 47 | 48 |
49 | 50 | 53 | 54 |
55 | 56 |
57 |
58 |
59 | 图表标题 60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | 71 |
72 |
73 |
74 |
75 |
76 |
77 | 78 | 79 |
80 | 81 |
82 |
83 |
84 |

1024

85 |

指标

86 |
87 |
88 |
89 |
90 |

1024

91 |

指标

92 |
93 |
94 |
95 |
96 |

1024

97 |

指标

98 |
99 |
100 |
101 |
102 |

1024

103 |

指标

104 |
105 |
106 |
107 |
108 |

1024

109 |

指标

110 |
111 |
112 |
113 | 114 | 115 |
116 |
117 |
118 |
119 |
120 | 点位 121 | 点位 122 | 点位 123 | 点位 124 | 点位 125 |
126 |
127 |
128 | 129 | 130 |
131 |
132 |
133 | 图表标题 134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 | 145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 | 154 | 155 |
156 |
157 |
158 | 163 |
164 |
165 |
166 |
167 |
168 | 173 |
174 |
175 |
176 |
177 |
178 | 183 |
184 |
185 |
186 |
187 |
188 | 189 | -------------------------------------------------------------------------------- /yuntu/yuntu1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/yuntu/yuntu1.jpg -------------------------------------------------------------------------------- /yuntu/yuntu2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyhsong/iDataV/ded0854b05e178c98f5282f968522e220dc6390d/yuntu/yuntu2.jpg --------------------------------------------------------------------------------