shouming.jsp 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <link rel="stylesheet" type="text/css" href="${ctx}/css/analysisCss/base.css" />
  9. <link rel="stylesheet" type="text/css" href="${ctx}/css/analysisCss/all.css" />
  10. <link rel="stylesheet" type="text/css" href="${ctx}/css/analysisCss/perfect-scrollbar.css" />
  11. <title>知识图谱平台</title>
  12. </head>
  13. <body class="bg1">
  14. <jsp:include page="../top.jsp">
  15. <jsp:param name="index" value="2" />
  16. </jsp:include>
  17. <jsp:include page="../left.jsp">
  18. <jsp:param name="index" value="5" />
  19. </jsp:include>
  20. <div class="main">
  21. <div class="chartTable" id="chartTable">
  22. <div class="rowForLive">
  23. <div >
  24. <div style="margin-left:400px;">行业寿命指数分析(行业类型的寿命指数)</div>
  25. <div id="chart1" class="bottomRowForLive" style="height:400px;"></div>
  26. </div>
  27. </div>
  28. <div class="clear"></div>
  29. <!-- <img class="imgChart" src="../images/indexNew/chart5.png"> -->
  30. <div >
  31. <div style="margin-left:400px;margin-top: 20px;">
  32. <span>经济主体寿命指数分析(经济主体的寿命指数)</span>
  33. </div>
  34. <div id="chart2" class="bottomRowForLive" style="height:400px;"></div>
  35. </div>
  36. </div>
  37. </div>
  38. <script src="${ctx}/js/lib/jquery-1.11.1.min.js"></script>
  39. <script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
  40. <script src="${ctx}/js/echarts-plain.js" ></script>
  41. <script>
  42. resize();
  43. $(window).resize(function(){
  44. resize();
  45. });
  46. function resize(){
  47. //获取窗口高度
  48. var windowheight=$(window).height();
  49. var searchCon = windowheight-40-146;
  50. $(".searchCon").css("height",windowheight-40);
  51. $(".main").css("height",windowheight-40);
  52. $(".chartTable").css("height",windowheight-80);
  53. }
  54. //perfect-scrollbar滚动条插件
  55. $('#chartTable').perfectScrollbar();
  56. </script>
  57. <script type="text/javascript">
  58. //业务处理
  59. $(function(){
  60. bar1();//柱状图
  61. bar2();//柱状图
  62. });
  63. //柱状图
  64. function bar1(){
  65. option = {
  66. tooltip : {
  67. trigger: 'axis'
  68. },
  69. color:["#00B7EF","#FF392A","#FFC200","#00B692","#2070DA"],
  70. calculable : true,
  71. xAxis : [
  72. {
  73. type : 'category',
  74. data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  75. axisLabel :{
  76. textStyle:{
  77. color: 'white'
  78. }
  79. },
  80. }
  81. ],
  82. yAxis : [
  83. {
  84. type : 'value',
  85. axisLabel :{
  86. textStyle:{
  87. color: 'white'
  88. }
  89. },
  90. }
  91. ],
  92. series : [
  93. {
  94. name:'寿命指数',
  95. type:'bar',
  96. itemStyle: {
  97. normal: {
  98. color: function(params,a,b) {
  99. // build a color map as your need.
  100. var colorList = [
  101. '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
  102. '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
  103. '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
  104. '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'
  105. ];
  106. return colorList[a]
  107. },
  108. label: {
  109. show: false,
  110. position: 'top',
  111. formatter: '{b}\n{c}'
  112. }
  113. }
  114. },
  115. data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
  116. }
  117. ]
  118. };
  119. var myChart = echarts.init(document.getElementById("chart1"));
  120. // myChart.setOption(option);
  121. echartData.hangye(myChart,option);
  122. }
  123. //柱状图
  124. function bar2(){
  125. option = {
  126. tooltip : {
  127. trigger: 'axis'
  128. },
  129. color:["#00B7EF","#FF392A","#FFC200","#00B692","#2070DA","#00B7EF","#FF392A","#FFC200","#00B692","#2070DA"],
  130. calculable : true,
  131. xAxis : [
  132. {
  133. type : 'category',
  134. data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  135. axisLabel :{
  136. textStyle:{
  137. color: 'white'
  138. }
  139. },
  140. }
  141. ],
  142. yAxis : [
  143. {
  144. type : 'value',
  145. axisLabel :{
  146. textStyle:{
  147. color: 'white'
  148. }
  149. },
  150. }
  151. ],
  152. series : [
  153. {
  154. name:'寿命指数',
  155. type:'bar',
  156. itemStyle: {
  157. normal: {
  158. color: function(params,a,b) {
  159. // build a color map as your need.
  160. var colorList = [
  161. '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
  162. '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
  163. '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
  164. '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'
  165. ];
  166. return colorList[a]
  167. },
  168. label: {
  169. show: false,
  170. position: 'top',
  171. formatter: '{b}\n{c}'
  172. }
  173. }
  174. },
  175. data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
  176. }
  177. ]
  178. };
  179. var myChart = echarts.init(document.getElementById("chart2"));
  180. // myChart.setOption(option);
  181. echartData.qiye(myChart,option);
  182. }
  183. </script>
  184. <script>
  185. var echartData = {
  186. hangye : function(ec,option){
  187. ec.showLoading();
  188. $.post("${ctx}/enterpriseAnalysis/shouming/hangye.do",
  189. {},
  190. function(data){
  191. var xAxisdata = [];
  192. var seriesData = [];
  193. for(var i =0;i<data.length;i++){
  194. xAxisdata.push(data[i].trades);
  195. seriesData.push(data[i].analysisNum);
  196. }
  197. option.xAxis[0].data = xAxisdata;
  198. option.series[0].data = seriesData;
  199. ec.setOption(option,true);
  200. ec.hideLoading();
  201. return option;
  202. });
  203. },
  204. qiye:function(ec,option){
  205. ec.showLoading();
  206. $.post("${ctx}/enterpriseAnalysis/shouming/qiye.do",
  207. {},
  208. function(data){
  209. var xAxisdata = [];
  210. var seriesData = [];
  211. for(var i =0;i<data.length;i++){
  212. xAxisdata.push(data[i].trades);
  213. seriesData.push(data[i].analysisNum);
  214. }
  215. option.xAxis[0].data = xAxisdata;
  216. option.series[0].data = seriesData;
  217. ec.setOption(option,true);
  218. ec.hideLoading();
  219. return option;
  220. });
  221. }
  222. };
  223. </script>
  224. </body>
  225. </html>