map20.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  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="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
  39. <textarea id="code" name="code">
  40. var cityMap = {
  41. "北京市": "110100",
  42. "天津市": "120100",
  43. "上海市": "310100",
  44. "重庆市": "500100",
  45. "崇明县": "310200", // ??
  46. "湖北省直辖县市": "429000", // ??
  47. "铜仁市": "522200", // ??
  48. "毕节市": "522400", // ??
  49. "石家庄市": "130100",
  50. "唐山市": "130200",
  51. "秦皇岛市": "130300",
  52. "邯郸市": "130400",
  53. "邢台市": "130500",
  54. "保定市": "130600",
  55. "张家口市": "130700",
  56. "承德市": "130800",
  57. "沧州市": "130900",
  58. "廊坊市": "131000",
  59. "衡水市": "131100",
  60. "太原市": "140100",
  61. "大同市": "140200",
  62. "阳泉市": "140300",
  63. "长治市": "140400",
  64. "晋城市": "140500",
  65. "朔州市": "140600",
  66. "晋中市": "140700",
  67. "运城市": "140800",
  68. "忻州市": "140900",
  69. "临汾市": "141000",
  70. "吕梁市": "141100",
  71. "呼和浩特市": "150100",
  72. "包头市": "150200",
  73. "乌海市": "150300",
  74. "赤峰市": "150400",
  75. "通辽市": "150500",
  76. "鄂尔多斯市": "150600",
  77. "呼伦贝尔市": "150700",
  78. "巴彦淖尔市": "150800",
  79. "乌兰察布市": "150900",
  80. "兴安盟": "152200",
  81. "锡林郭勒盟": "152500",
  82. "阿拉善盟": "152900",
  83. "沈阳市": "210100",
  84. "大连市": "210200",
  85. "鞍山市": "210300",
  86. "抚顺市": "210400",
  87. "本溪市": "210500",
  88. "丹东市": "210600",
  89. "锦州市": "210700",
  90. "营口市": "210800",
  91. "阜新市": "210900",
  92. "辽阳市": "211000",
  93. "盘锦市": "211100",
  94. "铁岭市": "211200",
  95. "朝阳市": "211300",
  96. "葫芦岛市": "211400",
  97. "长春市": "220100",
  98. "吉林市": "220200",
  99. "四平市": "220300",
  100. "辽源市": "220400",
  101. "通化市": "220500",
  102. "白山市": "220600",
  103. "松原市": "220700",
  104. "白城市": "220800",
  105. "延边朝鲜族自治州": "222400",
  106. "哈尔滨市": "230100",
  107. "齐齐哈尔市": "230200",
  108. "鸡西市": "230300",
  109. "鹤岗市": "230400",
  110. "双鸭山市": "230500",
  111. "大庆市": "230600",
  112. "伊春市": "230700",
  113. "佳木斯市": "230800",
  114. "七台河市": "230900",
  115. "牡丹江市": "231000",
  116. "黑河市": "231100",
  117. "绥化市": "231200",
  118. "大兴安岭地区": "232700",
  119. "南京市": "320100",
  120. "无锡市": "320200",
  121. "徐州市": "320300",
  122. "常州市": "320400",
  123. "苏州市": "320500",
  124. "南通市": "320600",
  125. "连云港市": "320700",
  126. "淮安市": "320800",
  127. "盐城市": "320900",
  128. "扬州市": "321000",
  129. "镇江市": "321100",
  130. "泰州市": "321200",
  131. "宿迁市": "321300",
  132. "杭州市": "330100",
  133. "宁波市": "330200",
  134. "温州市": "330300",
  135. "嘉兴市": "330400",
  136. "湖州市": "330500",
  137. "绍兴市": "330600",
  138. "金华市": "330700",
  139. "衢州市": "330800",
  140. "舟山市": "330900",
  141. "台州市": "331000",
  142. "丽水市": "331100",
  143. "合肥市": "340100",
  144. "芜湖市": "340200",
  145. "蚌埠市": "340300",
  146. "淮南市": "340400",
  147. "马鞍山市": "340500",
  148. "淮北市": "340600",
  149. "铜陵市": "340700",
  150. "安庆市": "340800",
  151. "黄山市": "341000",
  152. "滁州市": "341100",
  153. "阜阳市": "341200",
  154. "宿州市": "341300",
  155. "六安市": "341500",
  156. "亳州市": "341600",
  157. "池州市": "341700",
  158. "宣城市": "341800",
  159. "福州市": "350100",
  160. "厦门市": "350200",
  161. "莆田市": "350300",
  162. "三明市": "350400",
  163. "泉州市": "350500",
  164. "漳州市": "350600",
  165. "南平市": "350700",
  166. "龙岩市": "350800",
  167. "宁德市": "350900",
  168. "南昌市": "360100",
  169. "景德镇市": "360200",
  170. "萍乡市": "360300",
  171. "九江市": "360400",
  172. "新余市": "360500",
  173. "鹰潭市": "360600",
  174. "赣州市": "360700",
  175. "吉安市": "360800",
  176. "宜春市": "360900",
  177. "抚州市": "361000",
  178. "上饶市": "361100",
  179. "济南市": "370100",
  180. "青岛市": "370200",
  181. "淄博市": "370300",
  182. "枣庄市": "370400",
  183. "东营市": "370500",
  184. "烟台市": "370600",
  185. "潍坊市": "370700",
  186. "济宁市": "370800",
  187. "泰安市": "370900",
  188. "威海市": "371000",
  189. "日照市": "371100",
  190. "莱芜市": "371200",
  191. "临沂市": "371300",
  192. "德州市": "371400",
  193. "聊城市": "371500",
  194. "滨州市": "371600",
  195. "菏泽市": "371700",
  196. "郑州市": "410100",
  197. "开封市": "410200",
  198. "洛阳市": "410300",
  199. "平顶山市": "410400",
  200. "安阳市": "410500",
  201. "鹤壁市": "410600",
  202. "新乡市": "410700",
  203. "焦作市": "410800",
  204. "濮阳市": "410900",
  205. "许昌市": "411000",
  206. "漯河市": "411100",
  207. "三门峡市": "411200",
  208. "南阳市": "411300",
  209. "商丘市": "411400",
  210. "信阳市": "411500",
  211. "周口市": "411600",
  212. "驻马店市": "411700",
  213. "省直辖县级行政区划": "469000",
  214. "武汉市": "420100",
  215. "黄石市": "420200",
  216. "十堰市": "420300",
  217. "宜昌市": "420500",
  218. "襄阳市": "420600",
  219. "鄂州市": "420700",
  220. "荆门市": "420800",
  221. "孝感市": "420900",
  222. "荆州市": "421000",
  223. "黄冈市": "421100",
  224. "咸宁市": "421200",
  225. "随州市": "421300",
  226. "恩施土家族苗族自治州": "422800",
  227. "长沙市": "430100",
  228. "株洲市": "430200",
  229. "湘潭市": "430300",
  230. "衡阳市": "430400",
  231. "邵阳市": "430500",
  232. "岳阳市": "430600",
  233. "常德市": "430700",
  234. "张家界市": "430800",
  235. "益阳市": "430900",
  236. "郴州市": "431000",
  237. "永州市": "431100",
  238. "怀化市": "431200",
  239. "娄底市": "431300",
  240. "湘西土家族苗族自治州": "433100",
  241. "广州市": "440100",
  242. "韶关市": "440200",
  243. "深圳市": "440300",
  244. "珠海市": "440400",
  245. "汕头市": "440500",
  246. "佛山市": "440600",
  247. "江门市": "440700",
  248. "湛江市": "440800",
  249. "茂名市": "440900",
  250. "肇庆市": "441200",
  251. "惠州市": "441300",
  252. "梅州市": "441400",
  253. "汕尾市": "441500",
  254. "河源市": "441600",
  255. "阳江市": "441700",
  256. "清远市": "441800",
  257. "东莞市": "441900",
  258. "中山市": "442000",
  259. "潮州市": "445100",
  260. "揭阳市": "445200",
  261. "云浮市": "445300",
  262. "南宁市": "450100",
  263. "柳州市": "450200",
  264. "桂林市": "450300",
  265. "梧州市": "450400",
  266. "北海市": "450500",
  267. "防城港市": "450600",
  268. "钦州市": "450700",
  269. "贵港市": "450800",
  270. "玉林市": "450900",
  271. "百色市": "451000",
  272. "贺州市": "451100",
  273. "河池市": "451200",
  274. "来宾市": "451300",
  275. "崇左市": "451400",
  276. "海口市": "460100",
  277. "三亚市": "460200",
  278. "三沙市": "460300",
  279. "成都市": "510100",
  280. "自贡市": "510300",
  281. "攀枝花市": "510400",
  282. "泸州市": "510500",
  283. "德阳市": "510600",
  284. "绵阳市": "510700",
  285. "广元市": "510800",
  286. "遂宁市": "510900",
  287. "内江市": "511000",
  288. "乐山市": "511100",
  289. "南充市": "511300",
  290. "眉山市": "511400",
  291. "宜宾市": "511500",
  292. "广安市": "511600",
  293. "达州市": "511700",
  294. "雅安市": "511800",
  295. "巴中市": "511900",
  296. "资阳市": "512000",
  297. "阿坝藏族羌族自治州": "513200",
  298. "甘孜藏族自治州": "513300",
  299. "凉山彝族自治州": "513400",
  300. "贵阳市": "520100",
  301. "六盘水市": "520200",
  302. "遵义市": "520300",
  303. "安顺市": "520400",
  304. "黔西南布依族苗族自治州": "522300",
  305. "黔东南苗族侗族自治州": "522600",
  306. "黔南布依族苗族自治州": "522700",
  307. "昆明市": "530100",
  308. "曲靖市": "530300",
  309. "玉溪市": "530400",
  310. "保山市": "530500",
  311. "昭通市": "530600",
  312. "丽江市": "530700",
  313. "普洱市": "530800",
  314. "临沧市": "530900",
  315. "楚雄彝族自治州": "532300",
  316. "红河哈尼族彝族自治州": "532500",
  317. "文山壮族苗族自治州": "532600",
  318. "西双版纳傣族自治州": "532800",
  319. "大理白族自治州": "532900",
  320. "德宏傣族景颇族自治州": "533100",
  321. "怒江傈僳族自治州": "533300",
  322. "迪庆藏族自治州": "533400",
  323. "拉萨市": "540100",
  324. "昌都地区": "542100",
  325. "山南地区": "542200",
  326. "日喀则地区": "542300",
  327. "那曲地区": "542400",
  328. "阿里地区": "542500",
  329. "林芝地区": "542600",
  330. "西安市": "610100",
  331. "铜川市": "610200",
  332. "宝鸡市": "610300",
  333. "咸阳市": "610400",
  334. "渭南市": "610500",
  335. "延安市": "610600",
  336. "汉中市": "610700",
  337. "榆林市": "610800",
  338. "安康市": "610900",
  339. "商洛市": "611000",
  340. "兰州市": "620100",
  341. "嘉峪关市": "620200",
  342. "金昌市": "620300",
  343. "白银市": "620400",
  344. "天水市": "620500",
  345. "武威市": "620600",
  346. "张掖市": "620700",
  347. "平凉市": "620800",
  348. "酒泉市": "620900",
  349. "庆阳市": "621000",
  350. "定西市": "621100",
  351. "陇南市": "621200",
  352. "临夏回族自治州": "622900",
  353. "甘南藏族自治州": "623000",
  354. "西宁市": "630100",
  355. "海东地区": "632100",
  356. "海北藏族自治州": "632200",
  357. "黄南藏族自治州": "632300",
  358. "海南藏族自治州": "632500",
  359. "果洛藏族自治州": "632600",
  360. "玉树藏族自治州": "632700",
  361. "海西蒙古族藏族自治州": "632800",
  362. "银川市": "640100",
  363. "石嘴山市": "640200",
  364. "吴忠市": "640300",
  365. "固原市": "640400",
  366. "中卫市": "640500",
  367. "乌鲁木齐市": "650100",
  368. "克拉玛依市": "650200",
  369. "吐鲁番地区": "652100",
  370. "哈密地区": "652200",
  371. "昌吉回族自治州": "652300",
  372. "博尔塔拉蒙古自治州": "652700",
  373. "巴音郭楞蒙古自治州": "652800",
  374. "阿克苏地区": "652900",
  375. "克孜勒苏柯尔克孜自治州": "653000",
  376. "喀什地区": "653100",
  377. "和田地区": "653200",
  378. "伊犁哈萨克自治州": "654000",
  379. "塔城地区": "654200",
  380. "阿勒泰地区": "654300",
  381. "自治区直辖县级行政区划": "659000",
  382. "台湾省": "710000",
  383. "香港特别行政区": "810100",
  384. "澳门特别行政区": "820000"
  385. };
  386. var curIndx = 0;
  387. var mapType = [];
  388. var mapGeoData = require('echarts/util/mapData/params');
  389. console.log(mapGeoData)
  390. for (var city in cityMap) {
  391. mapType.push(city);
  392. // 自定义扩展图表类型
  393. mapGeoData.params[city] = {
  394. getGeoJson: (function (c) {
  395. var geoJsonName = cityMap[c];
  396. return function (callback) {
  397. $.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
  398. }
  399. })(city)
  400. }
  401. }
  402. var ecConfig = require('echarts/config');
  403. var zrEvent = require('zrender/tool/event');
  404. document.getElementById('main').onmousewheel = function (e){
  405. var event = e || window.event;
  406. curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
  407. if (curIndx < 0) {
  408. curIndx = mapType.length - 1;
  409. }
  410. var mt = mapType[curIndx % mapType.length];
  411. option.series[0].mapType = mt;
  412. option.title.subtext = mt + ' (滚轮或点击切换)';
  413. myChart.setOption(option, true);
  414. zrEvent.stop(event);
  415. };
  416. myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
  417. curIndx++;
  418. var mt = mapType[curIndx % mapType.length];
  419. option.series[0].mapType = mt;
  420. option.title.subtext = mt + ' (滚轮或点击切换)';
  421. myChart.setOption(option, true);
  422. });
  423. option = {
  424. title: {
  425. text : '全国344个主要城市(县)地图 by Pactera 陈然',
  426. link : 'http://www.pactera.com/',
  427. subtext : '北京市 (滚轮或点击切换)'
  428. },
  429. tooltip : {
  430. trigger: 'item',
  431. formatter: '滚轮或点击切换<br/>{b}'
  432. },
  433. series : [
  434. {
  435. name: '全国344个主要城市(县)地图',
  436. type: 'map',
  437. mapType: '北京市',
  438. selectedMode : 'single',
  439. itemStyle:{
  440. normal:{label:{show:true}},
  441. emphasis:{label:{show:true}}
  442. },
  443. data:[]
  444. }
  445. ]
  446. };
  447. </textarea>
  448. </div><!--/.well -->
  449. </div><!--/span-->
  450. <div id="graphic" class="col-md-8">
  451. <div id="main" class="main" style="height: 530px;"></div>
  452. <div>
  453. <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
  454. <span class="text-primary">切换主题</span>
  455. <select id="theme-select"></select>
  456. <span id='wrong-message' style="color:red"></span>
  457. </div>
  458. </div><!--/span-->
  459. </div><!--/row-->
  460. </div><!--/.fluid-container-->
  461. <footer id="footer"></footer>
  462. <!-- Le javascript
  463. ================================================== -->
  464. <!-- Placed at the end of the document so the pages load faster -->
  465. <script src="../asset/js/jquery.min.js"></script>
  466. <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
  467. <script src="../asset/js/bootstrap.min.js"></script>
  468. <script src="../asset/js/echartsExample.js"></script>
  469. </body>
  470. </html>