index.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>ECharts Stress Test</title>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" href="./dep/bootstrap/bootstrap.min.css">
  9. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  10. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  11. <!--[if lt IE 9]>
  12. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  13. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  14. <![endif]-->
  15. <style type="text/css">
  16. .btn {
  17. margin: 10px 10px 10px 0;
  18. }
  19. #report {
  20. width: 100%;
  21. height: 400px;
  22. }
  23. textarea {
  24. height: 150px;
  25. }
  26. .progress-bar {
  27. transition-duration: 0s;
  28. }
  29. </style>
  30. </head>
  31. <body id="app">
  32. <div class="container">
  33. <h1>ECharts Stress Test</h1>
  34. <div>
  35. <button class="btn" v-bind:class="{'btn-primary': !hasRun, 'btn-default': hasRun}" v-on:click="run">
  36. Start
  37. </button>
  38. <button class="btn btn-primary" data-target="#export-modal" data-toggle="modal" v-if="hasRun">
  39. Export
  40. </button>
  41. <span v-if="hasRun || isRunning">Elapsed time: {{ elapsedTime / 1000 }} seconds</span>
  42. </div>
  43. <div class="progress" v-if="isRunning">
  44. <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ progress }}%;">{{ progress }}%</div>
  45. </div>
  46. <div id="report" v-if="hasRun"></div>
  47. <table id="test-table" class="table table-striped" v-if="hasRun">
  48. <tr>
  49. <th>Data Amount</th>
  50. <th v-for="name in caseNames">{{ name }}</th>
  51. </tr>
  52. <tr v-for="(aid, amount) in amounts">
  53. <td>{{ amount }}</td>
  54. <th v-for="(cid, name) in caseNames">{{ times[aid][cid] }}</th>
  55. </tr>
  56. </table>
  57. </div>
  58. <div class="modal fade" id="export-modal" tabindex="-1" role="dialog">
  59. <div class="modal-dialog">
  60. <div class="modal-content">
  61. <div class="modal-header">
  62. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  63. <h4 class="modal-title">Test Result</h4>
  64. </div>
  65. <div class="modal-body">
  66. <div>
  67. <button class="btn btn-primary" v-on:click="download">Download</button>
  68. </div>
  69. <textarea v-if="hasRun" class="form-control">{{ result }}</textarea>
  70. </div>
  71. <div class="modal-footer">
  72. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  73. </div>
  74. </div>
  75. </div>
  76. </div><!-- end of modal -->
  77. <script src="./dep/jquery/jquery-2.2.4.js"></script>
  78. <script src="./dep/bootstrap/bootstrap.min.js"></script>
  79. <script src="./dep/vue/vue.min.js"></script>
  80. <script src="./dep/lodash/lodash.js"></script>
  81. <script src="./dep/filesaver/FileSaver.min.js"></script>
  82. <script type="text/javascript" src="../dist/echarts.js"></script>
  83. <script src="../test/esl.js"></script>
  84. <script>
  85. require.config({
  86. baseUrl: './src'
  87. });
  88. require(['app']);
  89. </script>
  90. </body>
  91. </html>