dataZoom-scatter-category.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="lib/esl.js"></script>
  5. <script src="lib/config.js"></script>
  6. <meta name="viewport" content="width=device-width, initial-scale=1" />
  7. </head>
  8. <body>
  9. <style>
  10. html, body, #main {
  11. margin: 0;
  12. padding: 0;
  13. width: 100%;
  14. height: 100%;
  15. }
  16. </style>
  17. <div id="main"></div>
  18. <script>
  19. require([
  20. 'echarts'
  21. // 'echarts/chart/scatter',
  22. // 'echarts/component/legend',
  23. // 'echarts/component/grid',
  24. // 'echarts/component/tooltip',
  25. // 'echarts/component/toolbox',
  26. // 'echarts/component/dataZoom'
  27. ], function (echarts) {
  28. chart = echarts.init(document.getElementById('main'), null, {
  29. });
  30. var data1 = [];
  31. var data2 = [];
  32. var data3 = [];
  33. var xAxisData = [];
  34. var yAxisData = [];
  35. var random = function (max) {
  36. return (Math.random() * max).toFixed(3);
  37. };
  38. for (var i = 0; i <= 10; i++) {
  39. xAxisData.push(i + '');
  40. }
  41. for (var i = 0; i <= 30; i++) {
  42. yAxisData.push(i + '');
  43. }
  44. for (var i = 0; i < 30; i++) {
  45. data1.push([
  46. Math.round(random(10)),
  47. Math.round(random(30))//,
  48. // Math.round(random(100))
  49. ]);
  50. data2.push([
  51. Math.round(random(10)),
  52. Math.round(random(30))//,
  53. // Math.round(random(100))
  54. ]);
  55. data3.push([
  56. Math.round(random(10)),
  57. Math.round(random(30))//,
  58. // Math.round(random(100))
  59. ]);
  60. }
  61. chart.setOption({
  62. legend: {
  63. data: ['scatter', 'scatter2', 'scatter3']
  64. },
  65. toolbox: {
  66. // y: 'bottom',
  67. feature: {
  68. dataView: {},
  69. dataZoom: {
  70. show: true
  71. // yAxisIndex: false
  72. },
  73. restore: {show: true},
  74. saveAsImage: {}
  75. }
  76. },
  77. tooltip: {
  78. },
  79. dataZoom: [
  80. {
  81. show: true,
  82. xAxisIndex: [0],
  83. // If set to 'filter', y axis will be effected by x dataZoom
  84. filterMode: 'empty',
  85. start: 0,
  86. end: 100
  87. },
  88. {
  89. show: true,
  90. yAxisIndex: [0],
  91. filterMode: 'empty',
  92. start: 0,
  93. end: 20
  94. },
  95. {
  96. type: 'inside',
  97. xAxisIndex: [0],
  98. filterMode: 'empty',
  99. start: 0,
  100. end: 100
  101. },
  102. {
  103. type: 'inside',
  104. yAxisIndex: [0],
  105. filterMode: 'empty',
  106. start: 0,
  107. end: 20
  108. }
  109. ],
  110. xAxis: {
  111. type: 'category',
  112. splitLine: {
  113. show: true
  114. },
  115. data: xAxisData
  116. },
  117. yAxis: {
  118. type: 'category',
  119. splitLine: {
  120. show: true
  121. },
  122. data: yAxisData
  123. },
  124. series: [
  125. {
  126. name: 'scatter',
  127. type: 'scatter',
  128. itemStyle: {
  129. normal: {
  130. opacity: 0.8,
  131. // shadowBlur: 10,
  132. // shadowOffsetX: 0,
  133. // shadowOffsetY: 0,
  134. // shadowColor: 'rgba(0, 0, 0, 0.5)'
  135. }
  136. },
  137. symbolSize: function (val) {
  138. return val[0] * 4;
  139. },
  140. data: data1
  141. },
  142. {
  143. name: 'scatter2',
  144. type: 'scatter',
  145. itemStyle: {
  146. normal: {
  147. opacity: 0.8
  148. }
  149. },
  150. symbolSize: function (val) {
  151. return val[0] * 4;
  152. },
  153. data: data2
  154. },
  155. {
  156. name: 'scatter3',
  157. type: 'scatter',
  158. itemStyle: {
  159. normal: {
  160. opacity: 0.8,
  161. }
  162. },
  163. symbolSize: function (val) {
  164. return val[0] * 4;
  165. },
  166. data: data3
  167. }
  168. ]
  169. });
  170. // console.profileEnd('setOption');
  171. })
  172. window.onresize = function () {
  173. chart.resize();
  174. };
  175. </script>
  176. <!-- // <script src="js/memory-stats.js"></script> -->
  177. <!-- // <script src="js/memory.js"></script> -->
  178. </body>
  179. </html>