| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
| <meta name="robots" content="noindex, nofollow"> |
| <title>ECharts2 · Example</title> |
| |
| <link rel="shortcut icon" href="../asset/ico/favicon.png"> |
| |
| <link href="../asset/css/font-awesome.min.css" rel="stylesheet"> |
| <link href="../asset/css/bootstrap.css" rel="stylesheet"> |
| <link href="../asset/css/carousel.css" rel="stylesheet"> |
| <link href="../asset/css/echartsHome.css" rel="stylesheet"> |
| <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> |
| <!--[if lt IE 9]> |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
| <![endif]--> |
| |
| <script src="./www/js/echarts.js"></script> |
| <script src="../asset/js/codemirror.js"></script> |
| <script src="../asset/js/javascript.js"></script> |
| |
| <link href="../asset/css/codemirror.css" rel="stylesheet"> |
| <link href="../asset/css/monokai.css" rel="stylesheet"> |
| |
| <style type="text/css"> |
| .CodeMirror { |
| height: 550px; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <!-- Fixed navbar --> |
| <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div> |
| |
| |
| <div class="container-fluid"> |
| <div class="row-fluid example"> |
| <div id="sidebar-code" class="col-md-4"> |
| <div class="well sidebar-nav"> |
| <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div> |
| <textarea id="code" name="code"> |
| var effect = { |
| show: true, |
| scaleSize: require('zrender/tool/env').canvasSupported ? 1 : 2, |
| period: 30, // 运动周期，无单位，值越大越慢 |
| color: '#fff', |
| shadowColor: 'rgba(220,220,220,0.4)', |
| shadowBlur : 5 |
| }; |
| function itemStyle(idx) { |
| return { |
| normal: { |
| color:'#fff', |
| borderWidth:1, |
| borderColor:['rgba(30,144,255,1)','lime'][idx], |
| lineStyle: { |
| //shadowColor : ['rgba(30,144,255,1)','lime'][idx], //默认透明 |
| //shadowBlur: 10, |
| //shadowOffsetX: 0, |
| //shadowOffsetY: 0, |
| type: 'solid' |
| } |
| } |
| } |
| }; |
| option = { |
| backgroundColor: '#1b1b1b', |
| color: ['rgba(30,144,255,1)','lime'], |
| title : { |
| text: '中国铁路运输主干线', |
| subtext:'数据来自维基百科', |
| sublink: 'http://zh.wikipedia.org/wiki/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E9%93%81%E8%B7%AF%E8%BF%90%E8%BE%93', |
| x:'center', |
| textStyle : { |
| color: '#fff' |
| } |
| }, |
| tooltip : { |
| trigger: 'item', |
| formatter: '{b}' |
| }, |
| legend: { |
| orient: 'vertical', |
| x:'left', |
| selectedMode:'single', |
| data:['八纵通道', '八横通道'], |
| textStyle : { |
| color: '#fff' |
| } |
| }, |
| toolbox: { |
| show : true, |
| orient : 'vertical', |
| x: 'right', |
| y: 'center', |
| feature : { |
| mark : {show: true}, |
| dataView : {show: true, readOnly: false}, |
| restore : {show: true}, |
| saveAsImage : {show: true} |
| } |
| }, |
| series : [ |
| { |
| name: '八纵通道', |
| type: 'map', |
| roam: true, |
| hoverable: false, |
| mapType: 'china', |
| itemStyle:{ |
| normal:{ |
| borderColor:'rgba(100,149,237,1)', |
| borderWidth:0.5, |
| areaStyle:{ |
| color: '#1b1b1b' |
| } |
| } |
| }, |
| data:[], |
| markLine : { |
| symbol: ['circle', 'circle'], |
| symbolSize : 1, |
| effect : effect, |
| itemStyle : itemStyle(0), |
| smooth:true, |
| data : [ |
| [{name:'北京'}, {name:'哈尔滨'}], |
| [{name:'哈尔滨'}, {name:'满洲里'}], |
| |
| [{name:'沈阳'}, {name:'大连'}], |
| [{name:'大连'}, {name:'烟台'}], |
| [{name:'烟台'}, {name:'青岛'}], |
| [{name:'青岛'}, {name:'淮安'}], |
| [{name:'淮安'}, {name:'上海'}], |
| [{name:'上海'}, {name:'杭州'}], |
| [{name:'杭州'}, {name:'宁波'}], |
| [{name:'宁波'}, {name:'温州'}], |
| [{name:'温州'}, {name:'福州'}], |
| [{name:'福州'}, {name:'厦门'}], |
| [{name:'厦门'}, {name:'广州'}], |
| [{name:'广州'}, {name:'湛江'}], |
| |
| [{name:'北京'}, {name:'天津'}], |
| [{name:'天津'}, {name:'济南'}], |
| [{name:'济南'}, {name:'南京'}], |
| [{name:'南京'}, {name:'上海'}], |
| |
| [{name:'北京'}, {name:'南昌'}], |
| [{name:'南昌'}, {name:'深圳'}], |
| [{name:'深圳'}, {name:'九龙红磡'}], |
| |
| [{name:'北京'}, {name:'郑州'}], |
| [{name:'郑州'}, {name:'武汉'}], |
| [{name:'武汉'}, {name:'广州'}], |
| |
| [{name:'大同'}, {name:'太原'}], |
| [{name:'太原'}, {name:'焦作'}], |
| [{name:'焦作'}, {name:'洛阳'}], |
| [{name:'洛阳'}, {name:'柳州'}], |
| [{name:'柳州'}, {name:'湛江'}], |
| |
| [{name:'包头'}, {name:'西安'}], |
| [{name:'西安'}, {name:'重庆'}], |
| [{name:'重庆'}, {name:'贵阳'}], |
| [{name:'贵阳'}, {name:'柳州'}], |
| [{name:'柳州'}, {name:'南宁'}], |
| |
| [{name:'兰州'}, {name:'成都'}], |
| [{name:'成都'}, {name:'昆明'}] |
| ] |
| } |
| }, |
| { |
| name: '八横通道', |
| type: 'map', |
| mapType: 'china', |
| itedmStyle:{ |
| normal:{ |
| borderColor:'rgba(100,149,237,1)', |
| borderWidth:0.5, |
| areaStyle:{ |
| color: '#1b1b1b' |
| } |
| } |
| }, |
| data:[], |
| markLine : { |
| symbol: ['circle', 'circle'], |
| symbolSize : 1, |
| effect : effect, |
| itemStyle : itemStyle(1), |
| smooth:true, |
| data : [ |
| [{name:'北京'}, {name:'兰州'}], |
| [{name:'兰州'}, {name:'拉萨'}], |
| |
| [{name:'大同'}, {name:'秦皇岛'}], |
| |
| [{name:'神木'}, {name:'黄骅'}], |
| |
| [{name:'太原'}, {name:'德州'}], |
| [{name:'德州'}, {name:'龙口'}], |
| [{name:'龙口'}, {name:'烟台'}], |
| |
| [{name:'太原'}, {name:'德州'}], |
| [{name:'德州'}, {name:'济南'}], |
| [{name:'济南'}, {name:'青岛'}], |
| |
| [{name:'长治'}, {name:'邯郸'}], |
| [{name:'邯郸'}, {name:'济南'}], |
| [{name:'济南'}, {name:'青岛'}], |
| |
| [{name:'瓦塘'}, {name:'临汾'}], |
| [{name:'临汾'}, {name:'长治'}], |
| [{name:'长治'}, {name:'汤阴'}], |
| [{name:'汤阴'}, {name:'台前'}], |
| [{name:'台前'}, {name:'兖州'}], |
| [{name:'兖州'}, {name:'日照'}], |
| |
| [{name:'侯马'}, {name:'月山'}], |
| [{name:'月山'}, {name:'新乡'}], |
| [{name:'新乡'}, {name:'兖州'}], |
| [{name:'兖州'}, {name:'日照'}], |
| |
| [{name:'连云港'}, {name:'郑州'}], |
| [{name:'郑州'}, {name:'兰州'}], |
| [{name:'兰州'}, {name:'乌鲁木齐'}], |
| [{name:'乌鲁木齐'}, {name:'阿拉山口'}], |
| |
| [{name:'西安'}, {name:'南阳'}], |
| [{name:'南阳'}, {name:'信阳'}], |
| [{name:'信阳'}, {name:'合肥'}], |
| [{name:'合肥'}, {name:'南京'}], |
| [{name:'南京'}, {name:'启东'}], |
| |
| [{name:'重庆'}, {name:'武汉'}], |
| [{name:'武汉'}, {name:'九江'}], |
| [{name:'九江'}, {name:'铜陵'}], |
| [{name:'铜陵'}, {name:'南京'}], |
| [{name:'南京'}, {name:'上海'}], |
| |
| [{name:'上海'}, {name:'怀化'}], |
| [{name:'怀化'}, {name:'重庆'}], |
| [{name:'重庆'}, {name:'成都'}], |
| [{name:'成都'}, {name:'贵阳'}], |
| [{name:'贵阳'}, {name:'昆明'}], |
| |
| [{name:'昆明'}, {name:'南宁'}], |
| [{name:'南宁'}, {name:'黎塘'}], |
| [{name:'黎塘'}, {name:'湛江'}] |
| ] |
| }, |
| geoCoord: { |
| '阿拉山口':[82.5757,45.1706], |
| '包头':[109.8403,40.6574], |
| '北京':[116.4075,39.9040], |
| '成都':[104.0665,30.5723], |
| '大连':[121.6147,38.9140], |
| '大同':[113.3001,40.0768], |
| '德州':[116.3575,37.4341], |
| '福州':[119.2965,26.0745], |
| '广州':[113.2644,23.1292], |
| '贵阳':[106.6302,26.6477], |
| '哈尔滨':[126.5363,45.8023], |
| '邯郸':[114.5391,36.6256], |
| '杭州':[120.1551,30.2741], |
| '合肥':[117.2272,31.8206], |
| '侯马':[111.3720,35.6191], |
| '怀化':[109.9985,27.5550], |
| '淮安':[119.0153,33.6104], |
| '黄骅':[117.3300,38.3714], |
| '济南':[117.1205,36.6510], |
| '焦作':[113.2418,35.2159], |
| '九江':[116.0019,29.7051], |
| '九龙红磡':[114.1870,22.3076], |
| '昆明':[102.8329,24.8801], |
| '拉萨':[91.1409,29.6456], |
| '兰州':[103.8343,36.0611], |
| '黎塘':[109.1363,23.2066], |
| '连云港':[119.2216,34.5967], |
| '临汾':[111.5190,36.0880], |
| '柳州':[109.4160,24.3255], |
| '龙口':[120.4778,37.6461], |
| '洛阳':[112.4540,34.6197], |
| '满洲里':[117.3787,49.5978], |
| '南昌':[115.8581,28.6832], |
| '南京':[118.7969,32.0603], |
| '南宁':[108.3661,22.8172], |
| '南阳':[112.5283,32.9908], |
| '宁波':[121.5440,29.8683], |
| '启东':[121.6574,31.8082], |
| '秦皇岛':[119.6005,39.9354], |
| '青岛':[120.3826,36.0671], |
| '日照':[119.5269,35.4164], |
| '厦门':[118.0894,24.4798], |
| '上海':[121.4737,31.2304], |
| '深圳':[114.0579,22.5431], |
| '神木':[110.4871,38.8610], |
| '沈阳':[123.4315,41.8057], |
| '台前':[115.8717,35.9701], |
| '太原':[112.5489,37.8706], |
| '汤阴':[114.3572,35.9218], |
| '天津':[117.2010,39.0842], |
| '铜陵':[117.8121,30.9454], |
| '瓦塘':[109.7600,23.3161], |
| '温州':[120.6994,27.9943], |
| '乌鲁木齐':[87.6168,43.8256], |
| '武汉':[114.3054,30.5931], |
| '西安':[108.9402,34.3416], |
| '新乡':[113.9268,35.3030], |
| '信阳':[114.0913,32.1470], |
| '烟台':[121.4479,37.4638], |
| '兖州':[116.7838,35.5531], |
| '月山':[113.0550,35.2104], |
| '湛江':[110.3594,21.2707], |
| '长治':[113.1163,36.1954], |
| '郑州':[113.6254,34.7466], |
| '重庆':[106.5516,29.5630] |
| } |
| } |
| ] |
| }; |
| </textarea> |
| </div><!--/.well --> |
| </div><!--/span--> |
| <div id="graphic" class="col-md-8"> |
| <div id="main" class="main" style="height: 530px;"></div> |
| <div> |
| <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button> |
| <span class="text-primary">切换主题</span> |
| <select id="theme-select"></select> |
| |
| <span id='wrong-message' style="color:red"></span> |
| </div> |
| </div><!--/span--> |
| </div><!--/row--> |
| |
| </div><!--/.fluid-container--> |
| |
| <footer id="footer"></footer> |
| <!-- Le javascript |
| ================================================== --> |
| <!-- Placed at the end of the document so the pages load faster --> |
| <script src="../asset/js/jquery.min.js"></script> |
| <script type="text/javascript" src="../asset/js/echartsHome.js"></script> |
| <script src="../asset/js/bootstrap.min.js"></script> |
| <script src="../asset/js/echartsExample.js"></script> |
| </body> |
| </html> |
