a3248b1fb6e01b207230f34585de34f2f92bcf3b.svn-base 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="ECharts">
  8. <meta name="author" content="kener.linfeng@gmail.com">
  9. <title>ECharts · Example</title>
  10. <link rel="shortcut icon" href="../asset/ico/favicon.png">
  11. <link href="../asset/css/font-awesome.min.css" rel="stylesheet">
  12. <link href="../asset/css/bootstrap.css" rel="stylesheet">
  13. <link href="../asset/css/carousel.css" rel="stylesheet">
  14. <link href="../asset/css/echartsHome.css" rel="stylesheet">
  15. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  16. <!--[if lt IE 9]>
  17. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  18. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  19. <![endif]-->
  20. <script src="./www/js/echarts.js"></script>
  21. <script src="../asset/js/codemirror.js"></script>
  22. <script src="../asset/js/javascript.js"></script>
  23. <link href="../asset/css/codemirror.css" rel="stylesheet">
  24. <link href="../asset/css/monokai.css" rel="stylesheet">
  25. <style type="text/css">
  26. .chart {
  27. height: 300px;
  28. margin-bottom:10px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <!-- Fixed navbar -->
  34. <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
  35. <div class="container">
  36. <div class="row" style="margin:20px 0;">
  37. <div class='col-md-8'>
  38. <select style="width:100%;height:34px;" name="theme-select">
  39. <option selected="true" name='infographic'>infographic</option>
  40. <option name='macarons'>macarons</option>
  41. <option name='shine'>shine</option>
  42. <option name='dark'>dark</option>
  43. <option name='blue'>blue</option>
  44. <option name='green'>green</option>
  45. <option name='red'>red</option>
  46. <option name='gray'>gray</option>
  47. <option name="helianthus">helianthus</option>
  48. <option name="roma">roma</option>
  49. <option name="mint">mint</option>
  50. <option name="macarons2">macarons2</option>
  51. <option name="sakura">sakura</option>
  52. <option name='default'>default</option>
  53. </select>
  54. </div>
  55. <button class="btn btn-info col-md-2" style="margin-right: 5px;" type="button" onclick="saveAsImage()">Save As Image</button>
  56. <button class="btn btn-info col-md-1" type="button" onclick="download()">Download</button>
  57. </div>
  58. <div class="row-fluid">
  59. <div id="graphic" class="col-md-12">
  60. <div class="row-fluid">
  61. <div class="col-md-6">
  62. <div md="main" class="chart"></div>
  63. </div><!--/col-md--->
  64. <div class="col-md-6">
  65. <div md="main" class="chart"></div>
  66. </div><!--/col-md--->
  67. </div>
  68. <div class="row-fluid">
  69. <div class="col-md-6">
  70. <div md="main" class="chart"></div>
  71. </div><!--/col-md--->
  72. <div class="col-md-6">
  73. <div md="main" class="chart"></div>
  74. </div><!--/col-md--->
  75. </div>
  76. <div class="row-fluid">
  77. <div class="col-md-12">
  78. <div md="main" class="chart" style="height:500px"></div>
  79. </div><!--/col-md--->
  80. </div>
  81. <div class="row-fluid">
  82. <div class="col-md-4">
  83. <div md="main" class="chart" style="height:270px"></div>
  84. </div><!--/col-md--->
  85. <div class="col-md-4">
  86. <div md="main" class="chart" style="height:270px"></div>
  87. </div><!--/col-md--->
  88. <div class="col-md-4">
  89. <div md="main" class="chart" style="height:270px"></div>
  90. </div><!--/col-md--->
  91. </div>
  92. <div class="row-fluid">
  93. <div class="col-md-4">
  94. <div md="main" class="chart" style="height:270px"></div>
  95. </div><!--/col-md--->
  96. <div class="col-md-4">
  97. <div md="main" class="chart" style="height:270px"></div>
  98. </div><!--/col-md--->
  99. <div class="col-md-4">
  100. <div md="main" class="chart" style="height:270px"></div>
  101. </div><!--/col-md--->
  102. </div>
  103. </div><!--/col-md--->
  104. </div><!--/row-->
  105. <div class="row">
  106. <button class="btn btn-info col-md-1" type="button" onclick="download()">Download</button>
  107. <button class="btn btn-info col-md-2" style="margin-left: 5px;" type="button" onclick="saveAsImage()">Save As Image</button>
  108. <div class='col-md-6'>
  109. <select style="width:100%;height:34px;" name="theme-select">
  110. <option selected="true" name='infographic'>infographic</option>
  111. <option name='macarons'>macarons</option>
  112. <option name='shine'>shine</option>
  113. <option name='dark'>dark</option>
  114. <option name='blue'>blue</option>
  115. <option name='green'>green</option>
  116. <option name='red'>red</option>
  117. <option name='gray'>gray</option>
  118. <option name="helianthus">helianthus</option>
  119. <option name="roma">roma</option>
  120. <option name="mint">mint</option>
  121. <option name="macarons2">macarons2</option>
  122. <option name="sakura">sakura</option>
  123. <option name='default'>default</option>
  124. </select>
  125. </div>
  126. </div>
  127. </div><!--/.fluid-container-->
  128. <footer id="footer"></footer>
  129. <!-- Le javascript
  130. ================================================== -->
  131. <!-- Placed at the end of the document so the pages load faster -->
  132. <script src="../asset/js/jquery.min.js"></script>
  133. <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
  134. <script src="../asset/js/bootstrap.min.js"></script>
  135. <script src="../asset/js/echartsTheme.js"></script>
  136. </body>
  137. </html>