本周完善了征集系统的分页设置，补充了图表联动，下面给出代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script type="text/javascript" src="js/jquery.js"></script> 6 <script type="text/javascript" src="js/cookie.js"></script> 7 <script type="text/javascript" src="js/echarts.js"></script> 8 <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> 9 <title>可视化</title> 10 </head> 11 <body> 12 <div class="layui-row"> 13 <div class="layui-col-md9"> 14 <input type="radio" name="shape" checked="checked" value="0">折线图<br> 15 <input type="radio" name="shape" value="1">柱状图<br> 16 <input name="shape" type="radio" value="2">饼状图<br> 17 <form class="iform" onsubmit="return false;"> 18 查询数量：<input id="snum"> 19 <select name="kind" id="which" required="required"> 20 <option value='typeid'>视频/文章</option> 21 <option value='idcity'>地市</option> 22 <option value='traffic'>流量</option> 23 </select> 24 </form> 25 <button onclick="Chart()">显示</button> 26 <div id="charts" style="display: none"> 27 <div id="showmap" style=" 800px;height:600px;"></div> 28 </div> 29 </div> 30 <div class="layui-col-md3" style="height: 600px;overflow: auto;"> 31 <table class="layui-table"> 32 <thead class="head"></thead> 33 <tbody class="main"></tbody> 34 </table> 35 </div> 36 </div> 37 <script> 38 charts=echarts.init(document.getElementById("showmap")) 39 function Chart(){ 40 var kind=$("#which").val(); 41 var n=$("#snum").val(); 42 console.log(kind); 43 $.post( 44 'ChartServlet', 45 {"method":"chart","kind":kind,"snum":n}, 46 function (msg) { 47 console.log(msg); 48 $('#charts').show(); 49 showCharts(msg,kind); 50 showTable(msg); 51 } 52 ) 53 } 54 function showTable(o){ 55 $('.head').html(""); 56 $('.main').html(""); 57 var json=JSON.parse(o); 58 arr=json.mapd; 59 tr="<tr id='B'><td>属性名称</td><td>个数</td></tr>"; 60 $('.head').append(tr); 61 for(var key in arr){ 62 $('.main').append("<tr><td>"+key+"</td><td>"+arr[key]+"</td></tr>"); 63 } 64 $('tbody.main tr').mouseover(function(){ 65 index=$(this).prevAll().length 66 temp=0; 67 var str=""; 68 for(var k in arr){ 69 if(temp==index){ 70 str=k; 71 break; 72 } 73 temp++; 74 } 75 charts.dispatchAction({ 76 type: 'highlight', 77 name: str, 78 }) 79 }) 80 $('tbody.main tr').mouseout(function(){ 81 index=$(this).prevAll().length 82 temp=0; 83 var str=""; 84 for(var k in arr){ 85 if(temp==index){ 86 str=k; 87 break; 88 } 89 temp++; 90 } 91 charts.dispatchAction({ 92 type: 'downplay', 93 name: str, 94 }) 95 }) 96 } 97 function showCharts(o,kind){ 98 j=JSON.parse(o) 99 mapd=j.mapd 100 console.log(mapd); 101 if(kind=='typeid'){ 102 drawCharts("视频/文章",mulJsonToArray(mapd,true),mulJsonToArray(mapd,false)) 103 }else if(kind=='idcity'){ 104 drawCharts("地市",mulJsonToArray(mapd,true),mulJsonToArray(mapd,false)) 105 }else if(kind=='traffic'){ 106 drawCharts("流量",mulJsonToArray(mapd,true),mulJsonToArray(mapd,false)) 107 } 108 } 109 110 function mulJsonToArray(obj,isKey){ 111 arr=[] 112 for(key in obj){ 113 if(isKey){ 114 arr.push(key) 115 }else { 116 arr.push(obj[key]) 117 } 118 } 119 return arr 120 121 } 122 123 124 function drawCharts(title,xdata,ydata){ 125 option={ 126 title: { 127 text: title 128 }, 129 tooltip:{}, 130 legend: { 131 data:['个数'] 132 }, 133 xAxis:{ 134 data:xdata 135 }, 136 yAxis:{}, 137 series: [{ 138 name: '个数', 139 type: 'line', 140 data: ydata 141 }] 142 } 143 144 typeIndex=$('input[name=shape]:checked').val() 145 if(typeIndex=='0'){ 146 option.xAxis.show=true 147 option.yAxis.show=true 148 option.series[0].type="line" 149 } 150 else if(typeIndex=='1'){ 151 option.xAxis.show=true 152 option.yAxis.show=true 153 option.series[0].type="bar" 154 } 155 else if(typeIndex=='2'){ 156 data=[] 157 for(i=0;i<xdata.length;i++){ 158 data.push( 159 { 160 name:xdata[i] 161 ,value:ydata[i] 162 } 163 ) 164 } 165 option.series[0].type="pie" 166 option.series[0].data=data 167 option.xAxis.show=false 168 option.yAxis.show=false 169 170 } 171 charts.setOption(option); 172 charts.on('mouseover',function(data){ 173 $('tbody.main tr').eq(data.dataIndex).css('background',"#00CCFF") 174 }) 175 charts.on('mouseout',function(data){ 176 $('tbody.main tr').eq(data.dataIndex).css('background',"#FFFFFF") 177 }) 178 } 179 180 </script> 181 </body> 182 </html>
核心部分为64——95行，171行——177行，前一部分是鼠标瞄表格的时候图变动，后一部分是鼠标瞄图时表格变动。
