tooltip-action.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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. <link rel="stylesheet" href="lib/reset.css" />
  8. <script src="lib/testHelper.js"></script>
  9. <script src="tooltipTestHelper.js"></script>
  10. </head>
  11. <body>
  12. <style>
  13. h1 {
  14. line-height: 60px;
  15. height: 60px;
  16. background: #ddd;
  17. text-align: center;
  18. font-weight: bold;
  19. font-size: 14px;
  20. }
  21. .chart {
  22. height: 350px;
  23. }
  24. </style>
  25. <h1>showTip: trigger: item, seriesIndex dataIndex, on displayed symbol</h1>
  26. <div class="chart" id="category"></div>
  27. <h1>showTip: trigger: item, seriesIndex dataIndex, on not displayed symbol (show no tooltip)</h1>
  28. <div class="chart" id="category2"></div>
  29. <h1>showTip: trigger: axis, seriesIndex dataIndex</h1>
  30. <div class="chart" id="category3"></div>
  31. <h1>showTip: trigger: x, y</h1>
  32. <div class="chart" id="category3"></div>
  33. <script>
  34. require([
  35. 'echarts'
  36. // 'echarts/chart/line',
  37. // 'echarts/component/legend',
  38. // 'echarts/component/grid',
  39. // 'echarts/component/tooltip',
  40. // 'zrender/vml/vml'
  41. ], function (echarts) {
  42. var option = {
  43. tooltip: {
  44. }
  45. };
  46. var baseTop = 90;
  47. var height = 150;
  48. var gap = 50;
  49. makeCategoryGrid(option, {
  50. grid: {top: baseTop, height: height},
  51. yAxis: {
  52. name: 'axisPointer: line\nno item trigger',
  53. tooltip: {show: true}
  54. },
  55. xAxis: {
  56. tooltip: {show: true}
  57. }
  58. });
  59. baseTop += height + gap;
  60. var dom = document.getElementById('category');
  61. if (dom) {
  62. dom.style.height = baseTop + 'px';
  63. var chart = echarts.init(dom);
  64. chart.setOption(option);
  65. setTimeout(function () {
  66. chart.dispatchAction({
  67. type: 'showTip',
  68. seriesIndex: 0,
  69. dataIndex: 2
  70. });
  71. }, 1000);
  72. }
  73. })
  74. </script>
  75. <script>
  76. require([
  77. 'echarts'
  78. // 'echarts/chart/line',
  79. // 'echarts/component/legend',
  80. // 'echarts/component/grid',
  81. // 'echarts/component/tooltip',
  82. // 'zrender/vml/vml'
  83. ], function (echarts) {
  84. var option = {
  85. tooltip: {
  86. }
  87. };
  88. var baseTop = 90;
  89. var height = 150;
  90. var gap = 50;
  91. makeCategoryGrid(option, {
  92. grid: {top: baseTop, height: height},
  93. yAxis: {
  94. name: 'axisPointer: line\nno item trigger',
  95. tooltip: {show: true}
  96. },
  97. xAxis: {
  98. tooltip: {show: true}
  99. }
  100. });
  101. baseTop += height + gap;
  102. var dom = document.getElementById('category2');
  103. if (dom) {
  104. dom.style.height = baseTop + 'px';
  105. var chart = echarts.init(dom);
  106. chart.setOption(option);
  107. setTimeout(function () {
  108. chart.dispatchAction({
  109. type: 'showTip',
  110. seriesIndex: 0,
  111. dataIndex: 1
  112. });
  113. }, 1000);
  114. }
  115. })
  116. </script>
  117. <script>
  118. require([
  119. 'echarts'
  120. // 'echarts/chart/line',
  121. // 'echarts/component/legend',
  122. // 'echarts/component/grid',
  123. // 'echarts/component/tooltip',
  124. // 'zrender/vml/vml'
  125. ], function (echarts) {
  126. var option = {
  127. tooltip: {
  128. trigger: 'axis'
  129. }
  130. };
  131. var baseTop = 90;
  132. var height = 150;
  133. var gap = 50;
  134. makeCategoryGrid(option, {
  135. grid: {top: baseTop, height: height},
  136. yAxis: {
  137. name: 'axisPointer: line\nno item trigger',
  138. tooltip: {show: true}
  139. },
  140. xAxis: {
  141. tooltip: {show: true}
  142. }
  143. });
  144. baseTop += height + gap;
  145. var dom = document.getElementById('category3');
  146. if (dom) {
  147. dom.style.height = baseTop + 'px';
  148. var chart = echarts.init(dom);
  149. chart.setOption(option);
  150. setTimeout(function () {
  151. chart.dispatchAction({
  152. type: 'showTip',
  153. seriesIndex: 0,
  154. dataIndex: 2
  155. });
  156. }, 1000);
  157. }
  158. })
  159. </script>
  160. </body>
  161. </html>