9acf565db2ff7a3fd302685c35c51a9152c345c1.svn-base 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>演练计划统计</title>
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <script type="text/javascript" src="/nwyj/scripts/qui/libs/js/jquery.js"></script>
  8. <script type="text/javascript" src="/nwyj/scripts/cockpit/cockpitIndex/context.js"></script>
  9. <script type="text/javascript" src="/nwyj/page/cockpit/echarts-2.2.7/build/dist/echarts-all.js"></script>
  10. <script type="text/javascript" src="/nwyj/page/cockpit/echarts-2.2.7/build/dist/chart/pie.js"></script>
  11. <script type="text/javascript" src=" /nwyj/page/cockpit/cockpit_echart.js"></script>
  12. <!-- <script type="text/javascript" src=" /nwyj/page/cockpit/webgis/util.js"></script> -->
  13. <script type="text/javascript" src="/nwyj/scripts/cockpit/cockpitIndex/util.js"></script>
  14. <link rel="stylesheet" type="text/css" href=" /nwyj/css/cockpit/commom/ehcartPage.css" />
  15. <link rel="stylesheet" type="text/css" href=" /nwyj/scripts/qui/libs/skins/flatBlue/style1.css" />
  16. <!-- <script type="text/javascript" src="/nwyj/scripts/amResource/YanLianHuiZongBt.js"></script> -->
  17. <body>
  18. <!-- Fixed navbar -->
  19. <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
  20. <div class="container-fluid">
  21. <div class="row-fluid example">
  22. <div id="sidebar-code" class="col-md-4">
  23. <div class="well sidebar-nav">
  24. <div class="nav-header"><a href="javascript:;" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
  25. <textarea id="code" name="code">
  26. <script type="text/javascript">
  27. option = {
  28. tooltip : {
  29. show: true,
  30. formatter: "{a} <br/>{b} : {c} ({d}%)"
  31. },
  32. legend: {
  33. orient : 'vertical',
  34. x : 'left',
  35. data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
  36. },
  37. toolbox: {
  38. show : true,
  39. feature : {
  40. mark : {show: true},
  41. dataView : {show: true, readOnly: false},
  42. restore : {show: true},
  43. saveAsImage : {show: true}
  44. }
  45. },
  46. calculable : true,
  47. series : [
  48. {
  49. name:'访问来源',
  50. type:'pie',
  51. center : ['35%', 200],
  52. radius : 80,
  53. itemStyle : {
  54. normal : {
  55. label : {
  56. position : 'inner',
  57. formatter : function (params) {
  58. return (params.percent - 0).toFixed(0) + '%'
  59. }
  60. },
  61. labelLine : {
  62. show : false
  63. }
  64. },
  65. emphasis : {
  66. label : {
  67. show : true,
  68. formatter : "{b}\n{d}%"
  69. }
  70. }
  71. },
  72. data:[
  73. {value:335, name:'直达'},
  74. {value:679, name:'营销广告'},
  75. {value:1548, name:'搜索引擎'}
  76. ]
  77. },
  78. {
  79. name:'访问来源',
  80. type:'pie',
  81. center : ['35%', 200],
  82. radius : [110, 140],
  83. data:[
  84. {value:335, name:'直达'},
  85. {value:310, name:'邮件营销'},
  86. {value:234, name:'联盟广告'},
  87. {value:135, name:'视频广告'},
  88. {
  89. value:1048,
  90. name:'百度',
  91. itemStyle : {
  92. normal : {
  93. color : (function (){
  94. var zrColor = require('zrender/tool/color');
  95. return zrColor.getRadialGradient(
  96. 300, 200, 110, 300, 200, 140,
  97. [[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']]
  98. )
  99. })(),
  100. label : {
  101. textStyle : {
  102. color : 'rgba(30,144,255,0.8)',
  103. align : 'center',
  104. baseline : 'middle',
  105. fontFamily : '微软雅黑',
  106. fontSize : 30,
  107. fontWeight : 'bolder'
  108. }
  109. },
  110. labelLine : {
  111. length : 40,
  112. lineStyle : {
  113. color : '#f0f',
  114. width : 3,
  115. type : 'dotted'
  116. }
  117. }
  118. }
  119. }
  120. },
  121. {value:251, name:'谷歌'},
  122. {
  123. value:102,
  124. name:'必应',
  125. itemStyle : {
  126. normal : {
  127. label : {
  128. show : false
  129. },
  130. labelLine : {
  131. show : false
  132. }
  133. },
  134. emphasis : {
  135. label : {
  136. show : true
  137. },
  138. labelLine : {
  139. show : true,
  140. length : 50
  141. }
  142. }
  143. }
  144. },
  145. {value:147, name:'其他'}
  146. ]
  147. },
  148. {
  149. name:'访问来源',
  150. type:'pie',
  151. clockWise:true,
  152. startAngle: 135,
  153. center : ['75%', 200],
  154. radius : [80, 120],
  155. itemStyle : {
  156. normal : {
  157. label : {
  158. show : false
  159. },
  160. labelLine : {
  161. show : false
  162. }
  163. },
  164. emphasis : {
  165. color: (function (){
  166. var zrColor = require('zrender/tool/color');
  167. return zrColor.getRadialGradient(
  168. 650, 200, 80, 650, 200, 120,
  169. [[0, 'rgba(255,255,0,1)'],[1, 'rgba(255,0,0,1)']]
  170. )
  171. })(),
  172. label : {
  173. show : true,
  174. position : 'center',
  175. formatter : "{d}%",
  176. textStyle : {
  177. color : 'red',
  178. fontSize : '30',
  179. fontFamily : '微软雅黑',
  180. fontWeight : 'bold'
  181. }
  182. }
  183. }
  184. },
  185. data:[
  186. {value:335, name:'直达'},
  187. {value:310, name:'邮件营销'},
  188. {value:234, name:'联盟广告'},
  189. {value:135, name:'视频广告'},
  190. {value:1548, name:'搜索引擎'}
  191. ],
  192. markPoint : {
  193. symbol: 'star',
  194. data : [
  195. {name : '最大', value : 1548, x:'80%', y:50, symbolSize:32}
  196. ]
  197. }
  198. }
  199. ]
  200. };
  201. </script>
  202. </textarea>
  203. </div><!--/.well -->
  204. </div><!--/span-->
  205. <div id="graphic" class="col-md-8">
  206. <div id="main" class="main"></div>
  207. <div>
  208. <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
  209. <span class="text-primary">切换主题</span>
  210. <select id="theme-select"></select>
  211. <span id='wrong-message' style="color:red"></span>
  212. </div>
  213. </div><!--/span-->
  214. </div><!--/row-->
  215. </div><!--/.fluid-container-->
  216. <footer id="footer"></footer>
  217. <!-- Le javascript
  218. ================================================== -->
  219. <!-- Placed at the end of the document so the pages load faster -->
  220. <script src="../asset/js/jquery.min.js"></script>
  221. <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
  222. <script src="../asset/js/bootstrap.min.js"></script>
  223. <script src="../asset/js/echartsExample.js"></script>
  224. </body>
  225. </html>