BMap.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. var myChart;
  2. var domCode = document.getElementById('sidebar-code');
  3. var domGraphic = document.getElementById('graphic');
  4. var domMain = document.getElementById('main');
  5. var domMessage = document.getElementById('wrong-message');
  6. var iconResize = document.getElementById('icon-resize');
  7. var needRefresh = false;
  8. var enVersion = location.hash.indexOf('-en') != -1;
  9. var hash = location.hash.replace('-en','');
  10. hash = hash.replace('#','') || (needMap() ? 'default' : 'macarons');
  11. hash += enVersion ? '-en' : '';
  12. var startPoint = {
  13. x: 104.114129,
  14. y: 37.550339
  15. };
  16. var BMapExtension;
  17. var curTheme;
  18. function requireCallback (ec, defaultTheme) {
  19. curTheme = themeSelector ? defaultTheme : {};
  20. echarts = ec;
  21. refresh();
  22. }
  23. var themeSelector = $('#theme-select');
  24. if (themeSelector) {
  25. themeSelector.html(
  26. '<option selected="true" name="macarons">macarons</option>'
  27. + '<option name="infographic">infographic</option>'
  28. + '<option name="shine">shine</option>'
  29. + '<option name="dark">dark</option>'
  30. + '<option name="blue">blue</option>'
  31. + '<option name="green">green</option>'
  32. + '<option name="red">red</option>'
  33. + '<option name="gray">gray</option>'
  34. + '<option name="helianthus">helianthus</option>'
  35. + '<option name="default">default</option>'
  36. );
  37. $(themeSelector).on('change', function(){
  38. selectChange($(this).val());
  39. });
  40. function selectChange(value){
  41. var theme = value;
  42. myChart.showLoading();
  43. $(themeSelector).val(theme);
  44. if (theme != 'default') {
  45. window.location.hash = value + (enVersion ? '-en' : '');
  46. require(['http://echarts.baidu.com/doc/example/theme/' + theme], function(tarTheme){
  47. curTheme = tarTheme;
  48. setTimeout(refreshTheme, 500);
  49. })
  50. }
  51. else {
  52. window.location.hash = enVersion ? '-en' : '';
  53. curTheme = {};
  54. setTimeout(refreshTheme, 500);
  55. }
  56. }
  57. function refreshTheme(){
  58. myChart.hideLoading();
  59. myChart.setTheme(curTheme);
  60. }
  61. if ($(themeSelector).val(hash.replace('-en', '')).val() != hash.replace('-en', '')) {
  62. $(themeSelector).val('macarons');
  63. hash = 'macarons' + enVersion ? '-en' : '';
  64. window.location.hash = hash;
  65. }
  66. }
  67. function autoResize() {
  68. if ($(iconResize).hasClass('glyphicon-resize-full')) {
  69. focusCode();
  70. iconResize.className = 'glyphicon glyphicon-resize-small';
  71. }
  72. else {
  73. focusGraphic();
  74. iconResize.className = 'glyphicon glyphicon-resize-full';
  75. }
  76. }
  77. function focusCode() {
  78. domCode.className = 'col-md-8 ani';
  79. domGraphic.className = 'col-md-4 ani';
  80. }
  81. function focusGraphic() {
  82. domCode.className = 'col-md-4 ani';
  83. domGraphic.className = 'col-md-8 ani';
  84. if (needRefresh) {
  85. myChart.showLoading();
  86. setTimeout(refresh, 1000);
  87. }
  88. }
  89. var editor = CodeMirror.fromTextArea(
  90. document.getElementById("code"),
  91. { lineNumbers: true }
  92. );
  93. editor.setOption("theme", 'monokai');
  94. editor.on('change', function(){needRefresh = true;});
  95. function refresh(isBtnRefresh){
  96. require(['BMap'], function(mapEx){
  97. BMapExtension = mapEx;
  98. if (isBtnRefresh) {
  99. needRefresh = true;
  100. focusGraphic();
  101. return;
  102. }
  103. needRefresh = false;
  104. domMessage.innerHTML = '';
  105. (new Function(editor.doc.getValue()))();
  106. });
  107. }
  108. function needMap() {
  109. var href = location.href;
  110. return href.indexOf('Map') != -1
  111. || href.indexOf('mix3') != -1
  112. || href.indexOf('mix5') != -1
  113. || href.indexOf('dataRange') != -1;
  114. }
  115. var echarts;
  116. var developMode = false;
  117. if (developMode) {
  118. window.esl = null;
  119. window.define = null;
  120. window.require = null;
  121. (function () {
  122. var script = document.createElement('script');
  123. script.async = true;
  124. script.src = '../../../doc/asset/js/esl/esl.js';
  125. if (script.readyState) {
  126. script.onreadystatechange = fireLoad;
  127. }
  128. else {
  129. script.onload = fireLoad;
  130. }
  131. (document.getElementsByTagName('head')[0] || document.body).appendChild(script);
  132. function fireLoad() {
  133. script.onload = script.onreadystatechange = null;
  134. setTimeout(loadedListener,100);
  135. }
  136. function loadedListener() {
  137. // for develop
  138. require.config({
  139. packages: [
  140. {
  141. name: 'echarts',
  142. location: '../../../src',
  143. main: 'echarts'
  144. },
  145. {
  146. name: 'zrender',
  147. //location: 'http://ecomfe.github.io/zrender/src',
  148. location: '../../../../zrender/src',
  149. main: 'zrender'
  150. },
  151. {
  152. name: 'BMap',
  153. location: '../src',
  154. main: 'main'
  155. }
  156. ]
  157. });
  158. launchExample();
  159. }
  160. })();
  161. }
  162. else {
  163. require.config({
  164. paths: {
  165. echarts: '../../../doc/example/www/js'
  166. },
  167. packages: [
  168. {
  169. name: 'BMap',
  170. location: '../src',
  171. main: 'main'
  172. }
  173. ]
  174. });
  175. launchExample();
  176. }
  177. var isExampleLaunched;
  178. function launchExample() {
  179. if (isExampleLaunched) {
  180. return;
  181. }
  182. // 按需加载
  183. isExampleLaunched = 1;
  184. require(
  185. [
  186. 'echarts',
  187. 'http://echarts.baidu.com/doc/example/theme/' + hash.replace('-en', ''),
  188. needMap() ? 'echarts/chart/map' : 'echarts'
  189. ],
  190. requireCallback
  191. );
  192. }