每周总结【2020/11/08】—————

每周总结【2020/11/08】——————图表联动

　　本周完善了征集系统的分页设置，补充了图表联动，下面给出代码：
  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行，前一部分是鼠标瞄表格的时候图变动，后一部分是鼠标瞄图时表格变动。