theme.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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='default'>default</option>
  49. </select>
  50. </div>
  51. <button class="btn btn-info col-md-4" type="button" onclick="saveAsImage()">Save As Image</button>
  52. </div>
  53. <div class="row-fluid">
  54. <div id="graphic" class="col-md-12">
  55. <div class="row-fluid">
  56. <div class="col-md-6">
  57. <div md="main" class="chart"></div>
  58. </div><!--/col-md--->
  59. <div class="col-md-6">
  60. <div md="main" class="chart"></div>
  61. </div><!--/col-md--->
  62. </div>
  63. <div class="row-fluid">
  64. <div class="col-md-6">
  65. <div md="main" class="chart"></div>
  66. </div><!--/col-md--->
  67. <div class="col-md-6">
  68. <div md="main" class="chart"></div>
  69. </div><!--/col-md--->
  70. </div>
  71. <div class="row-fluid">
  72. <div class="col-md-12">
  73. <div md="main" class="chart" style="height:500px"></div>
  74. </div><!--/col-md--->
  75. </div>
  76. <div class="row-fluid">
  77. <div class="col-md-4">
  78. <div md="main" class="chart" style="height:270px"></div>
  79. </div><!--/col-md--->
  80. <div class="col-md-4">
  81. <div md="main" class="chart" style="height:270px"></div>
  82. </div><!--/col-md--->
  83. <div class="col-md-4">
  84. <div md="main" class="chart" style="height:270px"></div>
  85. </div><!--/col-md--->
  86. </div>
  87. <div class="row-fluid">
  88. <div class="col-md-4">
  89. <div md="main" class="chart" style="height:270px"></div>
  90. </div><!--/col-md--->
  91. <div class="col-md-4">
  92. <div md="main" class="chart" style="height:270px"></div>
  93. </div><!--/col-md--->
  94. <div class="col-md-4">
  95. <div md="main" class="chart" style="height:270px"></div>
  96. </div><!--/col-md--->
  97. </div>
  98. </div><!--/col-md--->
  99. </div><!--/row-->
  100. <div class="row">
  101. <button class="btn btn-info col-md-3" type="button" onclick="saveAsImage()">Save As Image</button>
  102. <div class='col-md-6'>
  103. <select style="width:100%;height:34px;" name="theme-select">
  104. <option selected="true" name='infographic'>infographic</option>
  105. <option name='macarons'>macarons</option>
  106. <option name='shine'>shine</option>
  107. <option name='dark'>dark</option>
  108. <option name='blue'>blue</option>
  109. <option name='green'>green</option>
  110. <option name='red'>red</option>
  111. <option name='gray'>gray</option>
  112. <option name="helianthus">helianthus</option>
  113. <option name='default'>default</option>
  114. </select>
  115. </div>
  116. </div>
  117. </div><!--/.fluid-container-->
  118. <footer id="footer"></footer>
  119. <!-- Le javascript
  120. ================================================== -->
  121. <!-- Placed at the end of the document so the pages load faster -->
  122. <script src="../asset/js/jquery.min.js"></script>
  123. <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
  124. <script src="../asset/js/bootstrap.min.js"></script>
  125. <script src="../asset/js/echartsTheme.js"></script>
  126. </body>
  127. </html>