map8.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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 itemStyle = {
  41. normal:{label:{
  42. show:true,
  43. formatter:'{b}',
  44. textStyle: {fontSize: 20,fontWeight : 'bold'}
  45. }},
  46. emphasis:{label:{show:true}}
  47. };
  48. option = {
  49. title : {
  50. text : '2012 World GDP Top 8',
  51. subtext : 'from baike (Billion $)',
  52. sublink : 'http://baike.baidu.com/link?url=MyQikkoGI08hUfVmiB0g01ZJ6Wpyu18s8e6XdA3dwcI73-i0J7Ce32LuPNqfEWBj2rUcSfIHYIVI0aL8czbS_a',
  53. x : 'center'
  54. },
  55. tooltip : {
  56. trigger: 'item',
  57. showDelay: 0,
  58. transitionDuration: 0.2,
  59. formatter : function (params) {
  60. var value = params.value + '';
  61. value = value.replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
  62. return params.seriesName + '<br/>' + value + ' Billion';
  63. }
  64. },
  65. toolbox: {
  66. show : true,
  67. x: 'right',
  68. y: 'bottom',
  69. feature : {
  70. mark : {show: true},
  71. dataView : {show: true, readOnly: false},
  72. restore : {show: true},
  73. saveAsImage : {show: true}
  74. }
  75. },
  76. dataRange: {
  77. orient: 'horizontal',
  78. x : 'center',
  79. y: 'center',
  80. min: 2000,
  81. max: 16000,
  82. splitNumber: 0, // 分割段数,默认为5
  83. text:['16,000B','2,000B'],
  84. calculable : true,
  85. itemWidth:40,
  86. color: ['orangered','yellow','lightskyblue']
  87. },
  88. series : [
  89. {
  90. name: 'USA',
  91. type: 'map',
  92. mapType: 'world|United States of America',
  93. mapLocation: {x:'5%', y:'10%',width:'22%',height:'35%'},
  94. itemStyle: itemStyle,
  95. data:[
  96. {name : 'United States of America', value : 15684.7}
  97. ]
  98. },
  99. {
  100. name: 'China',
  101. type: 'map',
  102. mapType: 'world|China',
  103. mapLocation: {x:'30%', y:'10%',width:'22%',height:'35%'},
  104. itemStyle: itemStyle,
  105. itemStyle: itemStyle,
  106. data:[
  107. {name : 'China', value : 8227}
  108. ]
  109. },
  110. {
  111. name: 'Japan',
  112. type: 'map',
  113. mapType: 'world|Japan',
  114. mapLocation: {x:'55%', y:'10%',width:'22%',height:'35%'},
  115. itemStyle: itemStyle,
  116. data:[
  117. {name : 'Japan', value : 5963.9}
  118. ]
  119. },
  120. {
  121. name: 'Germany',
  122. type: 'map',
  123. mapType: 'world|Germany',
  124. mapLocation: {x:'76%', y:'10%',width:'22%',height:'35%'},
  125. itemStyle: itemStyle,
  126. data:[
  127. {name : 'Germany', value : 3400.5}
  128. ]
  129. },
  130. {
  131. name: 'France',
  132. type: 'map',
  133. mapType: 'world|France',
  134. mapLocation: {x:'5%', y:'60%',width:'22%',height:'35%'},
  135. itemStyle: itemStyle,
  136. data:[
  137. {name : 'France', value : 2608.6}
  138. ]
  139. },
  140. {
  141. name: 'United Kingdom',
  142. type: 'map',
  143. mapType: 'world|United Kingdom',
  144. mapLocation: {x:'33%', y:'60%',width:'22%',height:'35%'},
  145. itemStyle: itemStyle,
  146. data:[
  147. {name : 'United Kingdom', value : 2440.5}
  148. ]
  149. },
  150. {
  151. name: 'Brazil',
  152. type: 'map',
  153. mapType: 'world|Brazil',
  154. mapLocation: {x:'55%', y:'60%',width:'22%',height:'35%'},
  155. itemStyle: itemStyle,
  156. data:[
  157. {name : 'Brazil', value : 2395.9}
  158. ]
  159. },
  160. {
  161. name: 'Russia',
  162. type: 'map',
  163. mapType: 'world|Russia',
  164. mapLocation: {x:'76%', y:'70%',width:'22%',height:'35%'},
  165. itemStyle: itemStyle,
  166. data:[
  167. {name : 'Russia', value : 2021.9}
  168. ]
  169. }
  170. ]
  171. };
  172. </textarea>
  173. </div><!--/.well -->
  174. </div><!--/span-->
  175. <div id="graphic" class="col-md-8">
  176. <div id="main" class="main" style="height: 530px;"></div>
  177. <div>
  178. <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
  179. <span class="text-primary">切换主题</span>
  180. <select id="theme-select"></select>
  181. <span id='wrong-message' style="color:red"></span>
  182. </div>
  183. </div><!--/span-->
  184. </div><!--/row-->
  185. </div><!--/.fluid-container-->
  186. <footer id="footer"></footer>
  187. <!-- Le javascript
  188. ================================================== -->
  189. <!-- Placed at the end of the document so the pages load faster -->
  190. <script src="../asset/js/jquery.min.js"></script>
  191. <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
  192. <script src="../asset/js/bootstrap.min.js"></script>
  193. <script src="../asset/js/echartsExample.js"></script>
  194. </body>
  195. </html>