echartsExample.js 6.0 KB

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