echartsExample.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. var myChart;
  2. var domGraphic = document.getElementById('graphic');
  3. var domMain = document.getElementById('main');
  4. var domMessage = document.getElementById('wrong-message');
  5. var iconResize = document.getElementById('icon-resize');
  6. var needRefresh = false;
  7. var enVersion = location.hash.indexOf('-en') != -1;
  8. var hash = location.hash.replace('-en','');
  9. hash = hash.replace('#','') || (needMap() ? 'default' : 'macarons');
  10. hash += enVersion ? '-en' : '';
  11. var curTheme;
  12. function requireCallback (ec, defaultTheme) {
  13. curTheme = themeSelector ? defaultTheme : {};
  14. echarts = ec;
  15. refresh();
  16. window.onresize = myChart.resize;
  17. }
  18. var themeSelector = $('#theme-select');
  19. if (themeSelector) {
  20. themeSelector.html(
  21. '<option selected="true" name="macarons">macarons</option>'
  22. + '<option name="infographic">infographic</option>'
  23. + '<option name="shine">shine</option>'
  24. + '<option name="dark">dark</option>'
  25. + '<option name="blue">blue</option>'
  26. + '<option name="green">green</option>'
  27. + '<option name="red">red</option>'
  28. + '<option name="gray">gray</option>'
  29. + '<option name="helianthus">helianthus</option>'
  30. + '<option name="roma">roma</option>'
  31. + '<option name="mint">mint</option>'
  32. + '<option name="macarons2">macarons2</option>'
  33. + '<option name="sakura">sakura</option>'
  34. + '<option name="default">default</option>'
  35. );
  36. $(themeSelector).on('change', function(){
  37. selectChange($(this).val());
  38. });
  39. function selectChange(value){
  40. var theme = value;
  41. myChart.showLoading();
  42. $(themeSelector).val(theme);
  43. if (theme != 'default') {
  44. window.location.hash = value + (enVersion ? '-en' : '');
  45. require(['theme/' + theme], function(tarTheme){
  46. curTheme = tarTheme;
  47. setTimeout(refreshTheme, 500);
  48. })
  49. }
  50. else {
  51. window.location.hash = enVersion ? '-en' : '';
  52. curTheme = {};
  53. setTimeout(refreshTheme, 500);
  54. }
  55. }
  56. function refreshTheme(){
  57. myChart.hideLoading();
  58. myChart.setTheme(curTheme);
  59. }
  60. if ($(themeSelector).val(hash.replace('-en', '')).val() != hash.replace('-en', '')) {
  61. $(themeSelector).val('macarons');
  62. hash = 'macarons' + enVersion ? '-en' : '';
  63. window.location.hash = hash;
  64. }
  65. }
  66. function autoResize() {
  67. if ($(iconResize).hasClass('glyphicon-resize-full')) {
  68. focusCode();
  69. iconResize.className = 'glyphicon glyphicon-resize-small';
  70. }
  71. else {
  72. focusGraphic();
  73. iconResize.className = 'glyphicon glyphicon-resize-full';
  74. }
  75. }
  76. function focusGraphic() {
  77. // domCode.className = 'col-md-4 ani';
  78. domGraphic.className = 'col-md-8 ani';
  79. if (needRefresh) {
  80. myChart.showLoading();
  81. setTimeout(refresh, 1000);
  82. }
  83. }
  84. function refresh(isBtnRefresh){
  85. if (isBtnRefresh) {
  86. needRefresh = true;
  87. focusGraphic();
  88. return;
  89. }
  90. needRefresh = false;
  91. if (myChart && myChart.dispose) {
  92. myChart.dispose();
  93. }
  94. myChart = echarts.init(domMain, curTheme);
  95. window.onresize = myChart.resize;
  96. // (new Function(editor.doc.getValue()))();
  97. myChart.setOption(option, true)
  98. domMessage.innerHTML = '';
  99. }
  100. function needMap() {
  101. var href = location.href;
  102. return href.indexOf('map') != -1
  103. || href.indexOf('mix3') != -1
  104. || href.indexOf('mix5') != -1
  105. || href.indexOf('dataRange') != -1;
  106. }