analysis.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit|ie-comp|ie-stand">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <meta http-equiv="Cache-Control" content="no-siteapp" />
  9. <!--[if lt IE 9]>
  10. <script type="text/javascript" src="${ctx}/assets/lib/html5.js"></script>
  11. <script type="text/javascript" src="${ctx}/assets/lib/respond.min.js"></script>
  12. <script type="text/javascript" src="${ctx}/assets/lib/PIE_IE678.js"></script>
  13. <![endif]-->
  14. <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui/css/H-ui.min.css" />
  15. <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/css/H-ui.admin.css" />
  16. <link rel="stylesheet" type="text/css" href="${ctx}/assets/lib/Hui-iconfont/1.0.7/iconfont.css" />
  17. <link rel="stylesheet" type="text/css" href="${ctx}/assets/lib/icheck/icheck.css" />
  18. <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/skin/default/skin.css" id="skin" />
  19. <link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/css/style.css" />
  20. <script type="text/ecmascript" src="${ctx}/assets/lib/jquery/1.9.1/jquery.js"></script>
  21. <script type="text/javascript" src="${ctx}/assets/static/h-ui/js/H-ui.js"></script>
  22. <script type="text/javascript" src="${ctx}/assets/lib/layer/3.0.3/layer.js"></script>
  23. <link type="text/css" href="${ctx}/assets/lib/codemirror/lib/codemirror.css" rel="stylesheet" />
  24. <script type="text/javascript" src="${ctx}/assets/lib/codemirror/lib/codemirror.js"></script>
  25. <script src="${ctx}/assets/lib/codemirror/mode/xml/xml.js"></script>
  26. <link rel="stylesheet" type="text/css" href="${ctx}/assets/lib/webuploader/0.1.5/webuploader.css">
  27. <script type="text/javascript" src="${ctx}/assets/lib/webuploader/0.1.5/webuploader.js"></script>
  28. <link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/jqueryui/jquery-ui.css" />
  29. <link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/jqgrid/css/ui.jqgrid.css" />
  30. <script type="text/ecmascript" src="${ctx}/assets/lib/jqueryui/jquery-ui.js"></script>
  31. <script type="text/ecmascript" src="${ctx}/assets/lib/jqgrid/js/i18n/grid.locale-cn.js"></script>
  32. <script type="text/ecmascript" src="${ctx}/assets/lib/jqgrid/js/jquery.jqGrid.min.js"></script>
  33. <script type="text/ecmascript" src="${ctx}/assets/lib/echarts/3.2.3/echarts.min.js"></script>
  34. <script type="text/javascript" src="${ctx}/assets/js/base.js"></script>
  35. <!--[if IE 6]>
  36. <script type="text/javascript" src="${ctx}/assets/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
  37. <script>DD_belatedPNG.fix('*');</script>
  38. <![endif]-->
  39. <title>我的桌面</title>
  40. </head>
  41. <body>
  42. </body>
  43. </html>
  44. <script type="text/javascript">
  45. var title='${title}';
  46. var num='${num}';
  47. var question='${question}';
  48. var json = JsonSort(question,'obj');//排序
  49. var name1="条数 ";
  50. /***添加标题 (调查问卷名称)
  51. **/
  52. var divs = "<div style=' font-size:64px;' align='center'>"+title+"</div>";//定义DIV的样式
  53. $("body").append(divs);//需要添加在哪个位置
  54. //var json=eval(jsondata);
  55. var obj = JSON.parse(question);
  56. // 基于准备好的dom,初始化echarts实例
  57. for(var i=0;i<num;i++){
  58. var type=obj[i].type;
  59. var title1=obj[i].title;
  60. var leg= title1.length;
  61. var data= new Array(leg);//['巴西','印尼'];
  62. var dataval= new Array(leg);
  63. var strdataval="[";
  64. for(var j=0; j<leg;j++){
  65. data[j]=title1[j].name;
  66. dataval[j]=title1[j].value;
  67. if(type=="填空"||type=="问答"){
  68. data[j]=title1[j].name+"("+title1[j].type+")";
  69. /* if(title1[j].obj=j){
  70. data[j]=title1[j].type;
  71. }
  72. strdataval=strdataval+"{name:'"+title1[j].name+"',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'insideRight'}},data: [320, 302]}'"
  73. // strdataval= [{name: '填空',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'insideRight'}},data: [2, 4]},{ name: '上班',type: 'bar',stack: '总量',label: { normal: {show: true,position: 'insideRight' }},data: [0,1]}];
  74. */
  75. }
  76. }
  77. //if(type=="单选"||type=="多选"){
  78. // var div = "<div style=' font-size:32px;margin:30px 0 -30px 60px' >"+obj[i].name+" </div>";//定义DIV的样式
  79. //$("body").append(div);//需要添加在哪个位置
  80. var div = "<div id='main"+i+"' style=' width:80% ;height:80% ;min-width:400px;min-height:300px;margin:0 0 0 30px' > </div>";//定义DIV的样式
  81. $("body").append(div);//需要添加在哪个位置
  82. $("body").append("<br>");//需要添加在哪个位置
  83. $("body").append("<br>");//需要添加在哪个位置
  84. $("body").append("<br>");//需要添加在哪个位置
  85. var myChart = echarts.init(document.getElementById('main'+i));
  86. // 指定图表的配置项和数据
  87. var option = {
  88. title: {
  89. text: obj[i].name,
  90. },
  91. barMaxWidth:30,//最大宽度
  92. itemStyle: {
  93. normal: {
  94. color: function(params) {
  95.  //首先定义一个数组
  96. var colorList = [
  97. '#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3',
  98. '#B74AE5','#0AAF9F','#E89589'
  99. ];
  100. return colorList[params.dataIndex]
  101. },
  102.      //以下为是否显示
  103. label: {
  104. show: false
  105. }
  106. }
  107. } ,//颜色
  108. tooltip: {
  109. trigger: 'axis',
  110. axisPointer: {
  111. type: 'shadow'
  112. }
  113. }, toolbox: {
  114. show : true,
  115. feature : {
  116. mark : {show: true},
  117. dataView : {show: true, readOnly: false},
  118. restore : {show: true},
  119. saveAsImage : {show: true}
  120. }
  121. },
  122. grid: {
  123. left: '3%',
  124. right: '4%',
  125. bottom: '3%',
  126. containLabel: true
  127. },
  128. xAxis: {
  129. type: 'value',
  130. boundaryGap: [0, 0.01]
  131. },
  132. yAxis: {
  133. type: 'category',
  134. data: data
  135. },
  136. series: [
  137. {
  138. name: name1,
  139. type: 'bar',
  140. data: dataval
  141. }
  142. ]
  143. };
  144. // 使用刚指定的配置项和数据显示图表。
  145. myChart.setOption(option);
  146. }
  147. /*
  148. @function JsonSort 对json排序
  149. @param json 用来排序的json
  150. @param key 排序的键值
  151. */
  152. function JsonSort(json,key){
  153. //console.log(json);
  154. for(var j=1,jl=json.length;j < jl;j++){
  155. var temp = json[j],
  156. val = temp[key],
  157. i = j-1;
  158. while(i >=0 && json[i][key]>val){
  159. json[i+1] = json[i];
  160. i = i-1;
  161. }
  162. json[i+1] = temp;
  163. }
  164. //console.log(json);
  165. return json;
  166. }
  167. </script>