bbdd1ef78d1f4b644fc3cf8da385f8ce5e12d771.svn-base 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="ECharts">
  8. <meta name="author" content="kener.linfeng@gmail.com">
  9. <title>ECharts · Example</title>
  10. <link rel="shortcut icon" href="../asset/ico/favicon.png">
  11. <link href="../asset/css/font-awesome.min.css" rel="stylesheet">
  12. <link href="../asset/css/bootstrap.css" rel="stylesheet">
  13. <link href="../asset/css/carousel.css" rel="stylesheet">
  14. <link href="../asset/css/echartsHome.css" rel="stylesheet">
  15. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  16. <!--[if lt IE 9]>
  17. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  18. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  19. <![endif]-->
  20. <script src="./www/js/echarts.js"></script>
  21. <script src="../asset/js/codemirror.js"></script>
  22. <script src="../asset/js/javascript.js"></script>
  23. <link href="../asset/css/codemirror.css" rel="stylesheet">
  24. <link href="../asset/css/monokai.css" rel="stylesheet">
  25. <style type="text/css">
  26. .CodeMirror {
  27. height: 550px;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <!-- Fixed navbar -->
  33. <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
  34. <div class="container-fluid">
  35. <div class="row-fluid example">
  36. <div id="sidebar-code" class="col-md-4">
  37. <div class="well sidebar-nav">
  38. <div class="nav-header"><a href="javascript:;" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
  39. <textarea id="code" name="code">
  40. var placeList = [
  41. {name:'海门', geoCoord:[121.15, 31.89]},
  42. {name:'鄂尔多斯', geoCoord:[109.781327, 39.608266]},
  43. {name:'招远', geoCoord:[120.38, 37.35]},
  44. {name:'舟山', geoCoord:[122.207216, 29.985295]},
  45. {name:'齐齐哈尔', geoCoord:[123.97, 47.33]},
  46. {name:'盐城', geoCoord:[120.13, 33.38]},
  47. {name:'赤峰', geoCoord:[118.87, 42.28]},
  48. {name:'青岛', geoCoord:[120.33, 36.07]},
  49. {name:'乳山', geoCoord:[121.52, 36.89]},
  50. {name:'金昌', geoCoord:[102.188043, 38.520089]},
  51. {name:'泉州', geoCoord:[118.58, 24.93]},
  52. {name:'莱西', geoCoord:[120.53, 36.86]},
  53. {name:'日照', geoCoord:[119.46, 35.42]},
  54. {name:'胶南', geoCoord:[119.97, 35.88]},
  55. {name:'南通', geoCoord:[121.05, 32.08]},
  56. {name:'拉萨', geoCoord:[91.11, 29.97]},
  57. {name:'云浮', geoCoord:[112.02, 22.93]},
  58. {name:'梅州', geoCoord:[116.1, 24.55]},
  59. {name:'文登', geoCoord:[122.05, 37.2]},
  60. {name:'上海', geoCoord:[121.48, 31.22]},
  61. {name:'攀枝花', geoCoord:[101.718637, 26.582347]},
  62. {name:'威海', geoCoord:[122.1, 37.5]},
  63. {name:'承德', geoCoord:[117.93, 40.97]},
  64. {name:'厦门', geoCoord:[118.1, 24.46]},
  65. {name:'汕尾', geoCoord:[115.375279, 22.786211]},
  66. {name:'潮州', geoCoord:[116.63, 23.68]},
  67. {name:'丹东', geoCoord:[124.37, 40.13]},
  68. {name:'太仓', geoCoord:[121.1, 31.45]},
  69. {name:'曲靖', geoCoord:[103.79, 25.51]},
  70. {name:'烟台', geoCoord:[121.39, 37.52]},
  71. {name:'福州', geoCoord:[119.3, 26.08]},
  72. {name:'瓦房店', geoCoord:[121.979603, 39.627114]},
  73. {name:'即墨', geoCoord:[120.45, 36.38]},
  74. {name:'抚顺', geoCoord:[123.97, 41.97]},
  75. {name:'玉溪', geoCoord:[102.52, 24.35]},
  76. {name:'张家口', geoCoord:[114.87, 40.82]},
  77. {name:'阳泉', geoCoord:[113.57, 37.85]},
  78. {name:'莱州', geoCoord:[119.942327, 37.177017]},
  79. {name:'湖州', geoCoord:[120.1, 30.86]},
  80. {name:'汕头', geoCoord:[116.69, 23.39]},
  81. {name:'昆山', geoCoord:[120.95, 31.39]},
  82. {name:'宁波', geoCoord:[121.56, 29.86]},
  83. {name:'湛江', geoCoord:[110.359377, 21.270708]},
  84. {name:'揭阳', geoCoord:[116.35, 23.55]},
  85. {name:'荣成', geoCoord:[122.41, 37.16]},
  86. {name:'连云港', geoCoord:[119.16, 34.59]},
  87. {name:'葫芦岛', geoCoord:[120.836932, 40.711052]},
  88. {name:'常熟', geoCoord:[120.74, 31.64]},
  89. {name:'东莞', geoCoord:[113.75, 23.04]},
  90. {name:'河源', geoCoord:[114.68, 23.73]},
  91. {name:'淮安', geoCoord:[119.15, 33.5]},
  92. {name:'泰州', geoCoord:[119.9, 32.49]},
  93. {name:'南宁', geoCoord:[108.33, 22.84]},
  94. {name:'营口', geoCoord:[122.18, 40.65]},
  95. {name:'惠州', geoCoord:[114.4, 23.09]},
  96. {name:'江阴', geoCoord:[120.26, 31.91]},
  97. {name:'蓬莱', geoCoord:[120.75, 37.8]},
  98. {name:'韶关', geoCoord:[113.62, 24.84]},
  99. {name:'嘉峪关', geoCoord:[98.289152, 39.77313]},
  100. {name:'广州', geoCoord:[113.23, 23.16]},
  101. {name:'延安', geoCoord:[109.47, 36.6]},
  102. {name:'太原', geoCoord:[112.53, 37.87]},
  103. {name:'清远', geoCoord:[113.01, 23.7]},
  104. {name:'中山', geoCoord:[113.38, 22.52]},
  105. {name:'昆明', geoCoord:[102.73, 25.04]},
  106. {name:'寿光', geoCoord:[118.73, 36.86]},
  107. {name:'盘锦', geoCoord:[122.070714, 41.119997]},
  108. {name:'长治', geoCoord:[113.08, 36.18]},
  109. {name:'深圳', geoCoord:[114.07, 22.62]},
  110. {name:'珠海', geoCoord:[113.52, 22.3]},
  111. {name:'宿迁', geoCoord:[118.3, 33.96]},
  112. {name:'咸阳', geoCoord:[108.72, 34.36]},
  113. {name:'铜川', geoCoord:[109.11, 35.09]},
  114. {name:'平度', geoCoord:[119.97, 36.77]},
  115. {name:'佛山', geoCoord:[113.11, 23.05]},
  116. {name:'海口', geoCoord:[110.35, 20.02]},
  117. {name:'江门', geoCoord:[113.06, 22.61]},
  118. {name:'章丘', geoCoord:[117.53, 36.72]},
  119. {name:'肇庆', geoCoord:[112.44, 23.05]},
  120. {name:'大连', geoCoord:[121.62, 38.92]},
  121. {name:'临汾', geoCoord:[111.5, 36.08]},
  122. {name:'吴江', geoCoord:[120.63, 31.16]},
  123. {name:'石嘴山', geoCoord:[106.39, 39.04]},
  124. {name:'沈阳', geoCoord:[123.38, 41.8]},
  125. {name:'苏州', geoCoord:[120.62, 31.32]},
  126. {name:'茂名', geoCoord:[110.88, 21.68]},
  127. {name:'嘉兴', geoCoord:[120.76, 30.77]},
  128. {name:'长春', geoCoord:[125.35, 43.88]},
  129. {name:'胶州', geoCoord:[120.03336, 36.264622]},
  130. {name:'银川', geoCoord:[106.27, 38.47]},
  131. {name:'张家港', geoCoord:[120.555821, 31.875428]},
  132. {name:'三门峡', geoCoord:[111.19, 34.76]},
  133. {name:'锦州', geoCoord:[121.15, 41.13]},
  134. {name:'南昌', geoCoord:[115.89, 28.68]},
  135. {name:'柳州', geoCoord:[109.4, 24.33]},
  136. {name:'三亚', geoCoord:[109.511909, 18.252847]},
  137. {name:'自贡', geoCoord:[104.778442, 29.33903]},
  138. {name:'吉林', geoCoord:[126.57, 43.87]},
  139. {name:'阳江', geoCoord:[111.95, 21.85]},
  140. {name:'泸州', geoCoord:[105.39, 28.91]},
  141. {name:'西宁', geoCoord:[101.74, 36.56]},
  142. {name:'宜宾', geoCoord:[104.56, 29.77]},
  143. {name:'呼和浩特', geoCoord:[111.65, 40.82]},
  144. {name:'成都', geoCoord:[104.06, 30.67]},
  145. {name:'大同', geoCoord:[113.3, 40.12]},
  146. {name:'镇江', geoCoord:[119.44, 32.2]},
  147. {name:'桂林', geoCoord:[110.28, 25.29]},
  148. {name:'张家界', geoCoord:[110.479191, 29.117096]},
  149. {name:'宜兴', geoCoord:[119.82, 31.36]},
  150. {name:'北海', geoCoord:[109.12, 21.49]},
  151. {name:'西安', geoCoord:[108.95, 34.27]},
  152. {name:'金坛', geoCoord:[119.56, 31.74]},
  153. {name:'东营', geoCoord:[118.49, 37.46]},
  154. {name:'牡丹江', geoCoord:[129.58, 44.6]},
  155. {name:'遵义', geoCoord:[106.9, 27.7]},
  156. {name:'绍兴', geoCoord:[120.58, 30.01]},
  157. {name:'扬州', geoCoord:[119.42, 32.39]},
  158. {name:'常州', geoCoord:[119.95, 31.79]},
  159. {name:'潍坊', geoCoord:[119.1, 36.62]},
  160. {name:'重庆', geoCoord:[106.54, 29.59]},
  161. {name:'台州', geoCoord:[121.420757, 28.656386]},
  162. {name:'南京', geoCoord:[118.78, 32.04]},
  163. {name:'滨州', geoCoord:[118.03, 37.36]},
  164. {name:'贵阳', geoCoord:[106.71, 26.57]},
  165. {name:'无锡', geoCoord:[120.29, 31.59]},
  166. {name:'本溪', geoCoord:[123.73, 41.3]},
  167. {name:'克拉玛依', geoCoord:[84.77, 45.59]},
  168. {name:'渭南', geoCoord:[109.5, 34.52]},
  169. {name:'马鞍山', geoCoord:[118.48, 31.56]},
  170. {name:'宝鸡', geoCoord:[107.15, 34.38]},
  171. {name:'焦作', geoCoord:[113.21, 35.24]},
  172. {name:'句容', geoCoord:[119.16, 31.95]},
  173. {name:'北京', geoCoord:[116.46, 39.92]},
  174. {name:'徐州', geoCoord:[117.2, 34.26]},
  175. {name:'衡水', geoCoord:[115.72, 37.72]},
  176. {name:'包头', geoCoord:[110, 40.58]},
  177. {name:'绵阳', geoCoord:[104.73, 31.48]},
  178. {name:'乌鲁木齐', geoCoord:[87.68, 43.77]},
  179. {name:'枣庄', geoCoord:[117.57, 34.86]},
  180. {name:'杭州', geoCoord:[120.19, 30.26]},
  181. {name:'淄博', geoCoord:[118.05, 36.78]},
  182. {name:'鞍山', geoCoord:[122.85, 41.12]},
  183. {name:'溧阳', geoCoord:[119.48, 31.43]},
  184. {name:'库尔勒', geoCoord:[86.06, 41.68]},
  185. {name:'安阳', geoCoord:[114.35, 36.1]},
  186. {name:'开封', geoCoord:[114.35, 34.79]},
  187. {name:'济南', geoCoord:[117, 36.65]},
  188. {name:'德阳', geoCoord:[104.37, 31.13]},
  189. {name:'温州', geoCoord:[120.65, 28.01]},
  190. {name:'九江', geoCoord:[115.97, 29.71]},
  191. {name:'邯郸', geoCoord:[114.47, 36.6]},
  192. {name:'临安', geoCoord:[119.72, 30.23]},
  193. {name:'兰州', geoCoord:[103.73, 36.03]},
  194. {name:'沧州', geoCoord:[116.83, 38.33]},
  195. {name:'临沂', geoCoord:[118.35, 35.05]},
  196. {name:'南充', geoCoord:[106.110698, 30.837793]},
  197. {name:'天津', geoCoord:[117.2, 39.13]},
  198. {name:'富阳', geoCoord:[119.95, 30.07]},
  199. {name:'泰安', geoCoord:[117.13, 36.18]},
  200. {name:'诸暨', geoCoord:[120.23, 29.71]},
  201. {name:'郑州', geoCoord:[113.65, 34.76]},
  202. {name:'哈尔滨', geoCoord:[126.63, 45.75]},
  203. {name:'聊城', geoCoord:[115.97, 36.45]},
  204. {name:'芜湖', geoCoord:[118.38, 31.33]},
  205. {name:'唐山', geoCoord:[118.02, 39.63]},
  206. {name:'平顶山', geoCoord:[113.29, 33.75]},
  207. {name:'邢台', geoCoord:[114.48, 37.05]},
  208. {name:'德州', geoCoord:[116.29, 37.45]},
  209. {name:'济宁', geoCoord:[116.59, 35.38]},
  210. {name:'荆州', geoCoord:[112.239741, 30.335165]},
  211. {name:'宜昌', geoCoord:[111.3, 30.7]},
  212. {name:'义乌', geoCoord:[120.06, 29.32]},
  213. {name:'丽水', geoCoord:[119.92, 28.45]},
  214. {name:'洛阳', geoCoord:[112.44, 34.7]},
  215. {name:'秦皇岛', geoCoord:[119.57, 39.95]},
  216. {name:'株洲', geoCoord:[113.16, 27.83]},
  217. {name:'石家庄', geoCoord:[114.48, 38.03]},
  218. {name:'莱芜', geoCoord:[117.67, 36.19]},
  219. {name:'常德', geoCoord:[111.69, 29.05]},
  220. {name:'保定', geoCoord:[115.48, 38.85]},
  221. {name:'湘潭', geoCoord:[112.91, 27.87]},
  222. {name:'金华', geoCoord:[119.64, 29.12]},
  223. {name:'岳阳', geoCoord:[113.09, 29.37]},
  224. {name:'长沙', geoCoord:[113, 28.21]},
  225. {name:'衢州', geoCoord:[118.88, 28.97]},
  226. {name:'廊坊', geoCoord:[116.7, 39.53]},
  227. {name:'菏泽', geoCoord:[115.480656, 35.23375]},
  228. {name:'合肥', geoCoord:[117.27, 31.86]},
  229. {name:'武汉', geoCoord:[114.31, 30.52]},
  230. {name:'大庆', geoCoord:[125.03, 46.58]}
  231. ]
  232. option = {
  233. backgroundColor: '#1b1b1b',
  234. color: [
  235. 'rgba(255, 255, 255, 0.8)',
  236. 'rgba(14, 241, 242, 0.8)',
  237. 'rgba(37, 140, 249, 0.8)'
  238. ],
  239. title : {
  240. text: '大规模MarkPoint特效',
  241. subtext: '纯属虚构',
  242. x:'center',
  243. textStyle : {
  244. color: '#fff'
  245. }
  246. },
  247. legend: {
  248. orient: 'vertical',
  249. x:'left',
  250. data:['强','中','弱'],
  251. textStyle : {
  252. color: '#fff'
  253. }
  254. },
  255. toolbox: {
  256. show : true,
  257. orient : 'vertical',
  258. x: 'right',
  259. y: 'center',
  260. feature : {
  261. mark : {show: true},
  262. dataView : {show: true, readOnly: false},
  263. restore : {show: true},
  264. saveAsImage : {show: true}
  265. }
  266. },
  267. series : [
  268. {
  269. name: '弱',
  270. type: 'map',
  271. mapType: 'china',
  272. itemStyle:{
  273. normal:{
  274. borderColor:'rgba(100,149,237,1)',
  275. borderWidth:1.5,
  276. areaStyle:{
  277. color: '#1b1b1b'
  278. }
  279. }
  280. },
  281. data : [],
  282. markPoint : {
  283. symbolSize: 2,
  284. large: true,
  285. effect : {
  286. show: true
  287. },
  288. data : (function(){
  289. var data = [];
  290. var len = 3000;
  291. var geoCoord
  292. while(len--) {
  293. geoCoord = placeList[len % placeList.length].geoCoord;
  294. data.push({
  295. name : placeList[len % placeList.length].name + len,
  296. value : 10,
  297. geoCoord : [
  298. geoCoord[0] + Math.random() * 5 - 2.5,
  299. geoCoord[1] + Math.random() * 3 - 1.5
  300. ]
  301. })
  302. }
  303. return data;
  304. })()
  305. }
  306. },
  307. {
  308. name: '中',
  309. type: 'map',
  310. mapType: 'china',
  311. data : [],
  312. markPoint : {
  313. symbolSize: 3,
  314. large: true,
  315. effect : {
  316. show: true
  317. },
  318. data : (function(){
  319. var data = [];
  320. var len = 1000;
  321. var geoCoord
  322. while(len--) {
  323. geoCoord = placeList[len % placeList.length].geoCoord;
  324. data.push({
  325. name : placeList[len % placeList.length].name + len,
  326. value : 50,
  327. geoCoord : [
  328. geoCoord[0] + Math.random() * 5 - 2.5,
  329. geoCoord[1] + Math.random() * 3 - 1.5
  330. ]
  331. })
  332. }
  333. return data;
  334. })()
  335. }
  336. },
  337. {
  338. name: '强',
  339. type: 'map',
  340. mapType: 'china',
  341. hoverable: false,
  342. roam:true,
  343. data : [],
  344. markPoint : {
  345. symbol : 'diamond',
  346. symbolSize: 6,
  347. large: true,
  348. effect : {
  349. show: true
  350. },
  351. data : (function(){
  352. var data = [];
  353. var len = placeList.length;
  354. while(len--) {
  355. data.push({
  356. name : placeList[len].name,
  357. value : 90,
  358. geoCoord : placeList[len].geoCoord
  359. })
  360. }
  361. return data;
  362. })()
  363. }
  364. }
  365. ]
  366. };
  367. </textarea>
  368. </div><!--/.well -->
  369. </div><!--/span-->
  370. <div id="graphic" class="col-md-8">
  371. <div id="main" class="main" style="height: 530px;"></div>
  372. <div>
  373. <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
  374. <span class="text-primary">切换主题</span>
  375. <select id="theme-select"></select>
  376. <span id='wrong-message' style="color:red"></span>
  377. </div>
  378. </div><!--/span-->
  379. </div><!--/row-->
  380. </div><!--/.fluid-container-->
  381. <footer id="footer"></footer>
  382. <!-- Le javascript
  383. ================================================== -->
  384. <!-- Placed at the end of the document so the pages load faster -->
  385. <script src="../asset/js/jquery.min.js"></script>
  386. <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
  387. <script src="../asset/js/bootstrap.min.js"></script>
  388. <script src="../asset/js/echartsExample.js"></script>
  389. </body>
  390. </html>