map5.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  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. option = {
  41. tooltip : {
  42. trigger: 'item',
  43. formatter: '{b}'
  44. },
  45. series : [
  46. {
  47. name: '世界地图',
  48. type: 'map',
  49. mapType: 'world',
  50. roam: true,
  51. selectedMode : 'single',
  52. itemStyle:{
  53. normal:{label:{show:false}},
  54. emphasis:{label:{show:true}}
  55. },
  56. data:[],
  57. // 自定义名称
  58. nameMap : {
  59. 'Afghanistan':'阿富汗',
  60. 'Angola':'安哥拉',
  61. 'Albania':'阿尔巴尼亚',
  62. 'United Arab Emirates':'阿联酋',
  63. 'Argentina':'阿根廷',
  64. 'Armenia':'亚美尼亚',
  65. 'French Southern and Antarctic Lands':'法属南半球和南极领地',
  66. 'Australia':'澳大利亚',
  67. 'Austria':'奥地利',
  68. 'Azerbaijan':'阿塞拜疆',
  69. 'Burundi':'布隆迪',
  70. 'Belgium':'比利时',
  71. 'Benin':'贝宁',
  72. 'Burkina Faso':'布基纳法索',
  73. 'Bangladesh':'孟加拉国',
  74. 'Bulgaria':'保加利亚',
  75. 'The Bahamas':'巴哈马',
  76. 'Bosnia and Herzegovina':'波斯尼亚和黑塞哥维那',
  77. 'Belarus':'白俄罗斯',
  78. 'Belize':'伯利兹',
  79. 'Bermuda':'百慕大',
  80. 'Bolivia':'玻利维亚',
  81. 'Brazil':'巴西',
  82. 'Brunei':'文莱',
  83. 'Bhutan':'不丹',
  84. 'Botswana':'博茨瓦纳',
  85. 'Central African Republic':'中非共和国',
  86. 'Canada':'加拿大',
  87. 'Switzerland':'瑞士',
  88. 'Chile':'智利',
  89. 'China':'中国',
  90. 'Ivory Coast':'象牙海岸',
  91. 'Cameroon':'喀麦隆',
  92. 'Democratic Republic of the Congo':'刚果民主共和国',
  93. 'Republic of the Congo':'刚果共和国',
  94. 'Colombia':'哥伦比亚',
  95. 'Costa Rica':'哥斯达黎加',
  96. 'Cuba':'古巴',
  97. 'Northern Cyprus':'北塞浦路斯',
  98. 'Cyprus':'塞浦路斯',
  99. 'Czech Republic':'捷克共和国',
  100. 'Germany':'德国',
  101. 'Djibouti':'吉布提',
  102. 'Denmark':'丹麦',
  103. 'Dominican Republic':'多明尼加共和国',
  104. 'Algeria':'阿尔及利亚',
  105. 'Ecuador':'厄瓜多尔',
  106. 'Egypt':'埃及',
  107. 'Eritrea':'厄立特里亚',
  108. 'Spain':'西班牙',
  109. 'Estonia':'爱沙尼亚',
  110. 'Ethiopia':'埃塞俄比亚',
  111. 'Finland':'芬兰',
  112. 'Fiji':'斐',
  113. 'Falkland Islands':'福克兰群岛',
  114. 'France':'法国',
  115. 'Gabon':'加蓬',
  116. 'United Kingdom':'英国',
  117. 'Georgia':'格鲁吉亚',
  118. 'Ghana':'加纳',
  119. 'Guinea':'几内亚',
  120. 'Gambia':'冈比亚',
  121. 'Guinea Bissau':'几内亚比绍',
  122. 'Equatorial Guinea':'赤道几内亚',
  123. 'Greece':'希腊',
  124. 'Greenland':'格陵兰',
  125. 'Guatemala':'危地马拉',
  126. 'French Guiana':'法属圭亚那',
  127. 'Guyana':'圭亚那',
  128. 'Honduras':'洪都拉斯',
  129. 'Croatia':'克罗地亚',
  130. 'Haiti':'海地',
  131. 'Hungary':'匈牙利',
  132. 'Indonesia':'印尼',
  133. 'India':'印度',
  134. 'Ireland':'爱尔兰',
  135. 'Iran':'伊朗',
  136. 'Iraq':'伊拉克',
  137. 'Iceland':'冰岛',
  138. 'Israel':'以色列',
  139. 'Italy':'意大利',
  140. 'Jamaica':'牙买加',
  141. 'Jordan':'约旦',
  142. 'Japan':'日本',
  143. 'Kazakhstan':'哈萨克斯坦',
  144. 'Kenya':'肯尼亚',
  145. 'Kyrgyzstan':'吉尔吉斯斯坦',
  146. 'Cambodia':'柬埔寨',
  147. 'South Korea':'韩国',
  148. 'Kosovo':'科索沃',
  149. 'Kuwait':'科威特',
  150. 'Laos':'老挝',
  151. 'Lebanon':'黎巴嫩',
  152. 'Liberia':'利比里亚',
  153. 'Libya':'利比亚',
  154. 'Sri Lanka':'斯里兰卡',
  155. 'Lesotho':'莱索托',
  156. 'Lithuania':'立陶宛',
  157. 'Luxembourg':'卢森堡',
  158. 'Latvia':'拉脱维亚',
  159. 'Morocco':'摩洛哥',
  160. 'Moldova':'摩尔多瓦',
  161. 'Madagascar':'马达加斯加',
  162. 'Mexico':'墨西哥',
  163. 'Macedonia':'马其顿',
  164. 'Mali':'马里',
  165. 'Myanmar':'缅甸',
  166. 'Montenegro':'黑山',
  167. 'Mongolia':'蒙古',
  168. 'Mozambique':'莫桑比克',
  169. 'Mauritania':'毛里塔尼亚',
  170. 'Malawi':'马拉维',
  171. 'Malaysia':'马来西亚',
  172. 'Namibia':'纳米比亚',
  173. 'New Caledonia':'新喀里多尼亚',
  174. 'Niger':'尼日尔',
  175. 'Nigeria':'尼日利亚',
  176. 'Nicaragua':'尼加拉瓜',
  177. 'Netherlands':'荷兰',
  178. 'Norway':'挪威',
  179. 'Nepal':'尼泊尔',
  180. 'New Zealand':'新西兰',
  181. 'Oman':'阿曼',
  182. 'Pakistan':'巴基斯坦',
  183. 'Panama':'巴拿马',
  184. 'Peru':'秘鲁',
  185. 'Philippines':'菲律宾',
  186. 'Papua New Guinea':'巴布亚新几内亚',
  187. 'Poland':'波兰',
  188. 'Puerto Rico':'波多黎各',
  189. 'North Korea':'北朝鲜',
  190. 'Portugal':'葡萄牙',
  191. 'Paraguay':'巴拉圭',
  192. 'Qatar':'卡塔尔',
  193. 'Romania':'罗马尼亚',
  194. 'Russia':'俄罗斯',
  195. 'Rwanda':'卢旺达',
  196. 'Western Sahara':'西撒哈拉',
  197. 'Saudi Arabia':'沙特阿拉伯',
  198. 'Sudan':'苏丹',
  199. 'South Sudan':'南苏丹',
  200. 'Senegal':'塞内加尔',
  201. 'Solomon Islands':'所罗门群岛',
  202. 'Sierra Leone':'塞拉利昂',
  203. 'El Salvador':'萨尔瓦多',
  204. 'Somaliland':'索马里兰',
  205. 'Somalia':'索马里',
  206. 'Republic of Serbia':'塞尔维亚共和国',
  207. 'Suriname':'苏里南',
  208. 'Slovakia':'斯洛伐克',
  209. 'Slovenia':'斯洛文尼亚',
  210. 'Sweden':'瑞典',
  211. 'Swaziland':'斯威士兰',
  212. 'Syria':'叙利亚',
  213. 'Chad':'乍得',
  214. 'Togo':'多哥',
  215. 'Thailand':'泰国',
  216. 'Tajikistan':'塔吉克斯坦',
  217. 'Turkmenistan':'土库曼斯坦',
  218. 'East Timor':'东帝汶',
  219. 'Trinidad and Tobago':'特里尼达和多巴哥',
  220. 'Tunisia':'突尼斯',
  221. 'Turkey':'土耳其',
  222. 'United Republic of Tanzania':'坦桑尼亚联合共和国',
  223. 'Uganda':'乌干达',
  224. 'Ukraine':'乌克兰',
  225. 'Uruguay':'乌拉圭',
  226. 'United States of America':'美国',
  227. 'Uzbekistan':'乌兹别克斯坦',
  228. 'Venezuela':'委内瑞拉',
  229. 'Vietnam':'越南',
  230. 'Vanuatu':'瓦努阿图',
  231. 'West Bank':'西岸',
  232. 'Yemen':'也门',
  233. 'South Africa':'南非',
  234. 'Zambia':'赞比亚',
  235. 'Zimbabwe':'津巴布韦'
  236. }
  237. }
  238. ]
  239. };
  240. var ecConfig = require('echarts/config');
  241. myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
  242. var selected = param.selected;
  243. var str = '当前选择: ';
  244. for (var p in selected) {
  245. if (selected[p]) {
  246. str += p + ' ';
  247. }
  248. }
  249. document.getElementById('wrong-message').innerHTML = str;
  250. })
  251. </textarea>
  252. </div><!--/.well -->
  253. </div><!--/span-->
  254. <div id="graphic" class="col-md-8">
  255. <div id="main" class="main" style="height: 530px;"></div>
  256. <div>
  257. <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
  258. <span class="text-primary">切换主题</span>
  259. <select id="theme-select"></select>
  260. <span id='wrong-message' style="color:red"></span>
  261. </div>
  262. </div><!--/span-->
  263. </div><!--/row-->
  264. </div><!--/.fluid-container-->
  265. <footer id="footer"></footer>
  266. <!-- Le javascript
  267. ================================================== -->
  268. <!-- Placed at the end of the document so the pages load faster -->
  269. <script src="../asset/js/jquery.min.js"></script>
  270. <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
  271. <script src="../asset/js/bootstrap.min.js"></script>
  272. <script src="../asset/js/echartsExample.js"></script>
  273. </body>
  274. </html>