singleAxisScales.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="esl.js"></script>
  5. <script src="config.js"></script>
  6. <script src="lib/jquery.min.js"></script>
  7. <meta name="viewport" content="width=device-width, initial-scale=1" />
  8. <link rel="stylesheet" href="reset.css">
  9. </head>
  10. <body>
  11. <style>
  12. </style>
  13. <div id="main"></div>
  14. <script>
  15. var echarts;
  16. var colorTool;
  17. var chart;
  18. var myChart;
  19. var groupCategories = [];
  20. var groupColors = [];
  21. require([
  22. 'echarts',
  23. 'zrender/tool/color',
  24. 'echarts/chart/scatter',
  25. 'echarts/chart/graph',
  26. 'echarts/component/singleAxis',
  27. 'echarts/component/tooltip',
  28. 'echarts/component/toolbox',
  29. 'echarts/component/dataZoom',
  30. 'echarts/component/visualMap'
  31. ], function (ec, ct) {
  32. echarts = ec;
  33. colorTool = ct;
  34. var myChart = echarts.init(document.getElementById('main'));
  35. var xAxisData = [
  36. 'Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', 'Libra',
  37. 'Scorpio', 'Sagittarius', 'Capricornus', 'Aquarius', 'Pisces'
  38. ];
  39. var data0 = [];
  40. var data1 = [];
  41. var data2 = [];
  42. var data3 = [];
  43. for (var i = 0; i < xAxisData.length; i++) {
  44. data0.push([Math.random() * 100, Math.random() * 30]);
  45. data1.push(Math.random() * 30);
  46. data2.push([Math.random() * (i % 2 === 0 ? 100 : 1000000), Math.random() * 30]);
  47. data3.push([+new Date() + Math.round(Math.random() * 3600 * 24 * 30), Math.random() * 30]);
  48. }
  49. var height = '18%';
  50. myChart.setOption({
  51. backgroundColor: '#fff',
  52. tooltip: {
  53. trigger: 'axis'
  54. },
  55. dataZoom: [{
  56. type: 'inside',
  57. singleAxisIndex: [0]
  58. }, {
  59. type: 'inside',
  60. singleAxisIndex: [1]
  61. }, {
  62. type: 'inside',
  63. singleAxisIndex: [2]
  64. }, {
  65. type: 'inside',
  66. singleAxisIndex: [3]
  67. }],
  68. singleAxis: [{
  69. type: 'value',
  70. id: 'a',
  71. height: height
  72. }, {
  73. type: 'category',
  74. id: 'b',
  75. data: xAxisData,
  76. height: height,
  77. top: '27%'
  78. }, {
  79. type: 'log',
  80. id: 'c',
  81. height: height,
  82. top: '55%'
  83. }, {
  84. type: 'time',
  85. id: 'd',
  86. height: height,
  87. top: '77%'
  88. }],
  89. series: [{
  90. type: 'scatter',
  91. coordinateSystem: 'singleAxis',
  92. singleAxisId: 'a',
  93. symbolSize: function (val) {
  94. return val[1];
  95. },
  96. data: data0
  97. }, {
  98. type: 'scatter',
  99. coordinateSystem: 'singleAxis',
  100. singleAxisId: 'b',
  101. symbolSize: function (val) {
  102. return val;
  103. },
  104. data: data1
  105. }, {
  106. type: 'scatter',
  107. coordinateSystem: 'singleAxis',
  108. singleAxisId: 'c',
  109. symbolSize: function (val) {
  110. return val[1];
  111. },
  112. data: data2
  113. }, {
  114. type: 'scatter',
  115. coordinateSystem: 'singleAxis',
  116. singleAxisId: 'd',
  117. symbolSize: function (val) {
  118. return val[1];
  119. },
  120. data: data3
  121. }]
  122. });
  123. });
  124. </script>
  125. </body>
  126. </html>