本周主要使用hive处理数据问题，按照老师要求进行可视化展示。算上这个测试再加上一些联系，本周总代码行数预计过千。因为没有完整记录过程，下面仅贴出部分截图及代码。
运行的hive（历史记录）
上述处理后的信息在提取出文件后会存在MySQL中，老师要求使用关系图展示，下面给出HTML代码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数据可视化</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/cookie.js"></script> <script type="text/javascript" src="js/echarts.js"></script> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> <style> p{ font-size:20px; } #mg{ margin-top:30px; } </style> </head> <body> <div class="layui-row"> <div class="layui-col-md9"> <div class="layui-row grid-demo"> <div class="layui-col-md3"> <form class="layui-form" onsubmit="return false;"> <p><b>选择属性：</b></p> <div id="mg"> <input type="radio" name="shape" checked="checked" value="0"title="折线图"><br> <input type="radio" name="shape" value="1"title="柱状图"><br> <input name="shape" type="radio" value="2"title="饼状图"> </div> <div style="80%;"id="mg"> <select name="kind" id="which" required="required" lay-filter="cha"> <option value='fir'>代理人/航空公司可视化</option> <option value='sec'>代理人市场地位变化</option> <option value='thr'>关系图</option> </select> <div id="fir_sea"> <select name="koc" id="coo" required="required" lay-filter="fcha"> <option value='C'>航空公司</option> <option value='O'>代理人</option> </select> <div style="display:none;"id="fir_s1"> 查询数量:<input type="text" id="fnum"> </div> <div style="display:none;"id="fir_s2"> <select name="foc" id="cooi" required="required" lay-filter="kcha"> <option value='f1'>交易占比</option> <option value='f2'>利润占比</option> <option value='f3'>盈利率</option> <option value='f4'>各公司-代理人销售量</option> <option value='f5'>代理人销售额</option> <option value='f6'>代理人市场活跃度</option> </select> <div style="display:none;"id="fir_ss1"> 查询代理人:<input type="text" id="foname"> </div> <div style="display:none;"id="fir_ss2"> 查询数量:<input type="text" id="finum"> </div> </div> </div> <div style="display:none;"id="sec_sea"> 查询代理人:<input type="text" id="Oname"> </div> <div style="display:none;"id="thr_sea"> 查询代理人:<input type="text" id="cname"><br> 限制显示数量:<input type="text" id="tnum"> </div> </div> </form> <div id="mg"> <button class="layui-btn layui-btn-lg layui-btn-normal" onclick="Chart()">显示</button> </div> </div> <div class="layui-col-md9" id="mg"> <div id="charts" style="display: none"> <div id="showmap" style=" 800px;height:600px;"></div> </div> </div> </div> </div> <div class="layui-col-md3" style="height: 600px;overflow: auto;"> <table class="layui-table"> <thead class="head"></thead> <tbody class="main"></tbody> </table> </div> </div> </body> <script src="layui/layui.all.js"></script> <script> var form=layui.form; charts=echarts.init(document.getElementById("showmap")) $(function(){ form.on('select(cha)',function(data){ var kind=data.value; console.log(kind); if(kind=='fir'){ $("#sec_sea").hide(); $("#fir_sea").show(); $("#thr_sea").hide(); }else if(kind=='sec'){ $("#sec_sea").show(); $("#fir_sea").hide(); $("#thr_sea").hide(); }else if(kind=='thr'){ $("#sec_sea").hide(); $("#fir_sea").hide(); $("#thr_sea").show(); } }) form.on('select(fcha)',function(data){ var kind1=data.value; console.log(kind1); if(kind1=='C'){ $("#fir_s1").show(); $("#fir_s2").hide(); }else if(kind1=='O'){ $("#fir_s2").show(); $("#fir_s1").hide(); } }) form.on('select(kcha)',function(data){ var kind2=data.value; console.log(kind2); if(kind2=='f3'||kind2=='f5'){ $("#fir_ss2").show(); $("#fir_ss1").hide(); }else{ $("#fir_ss1").show(); $("#fir_ss2").hide(); } }) }) function Chart(){ var kind=$("#which").val(); if(kind=='fir'){ var koc=$("#coo").val(); var fnum=$("#fnum").val(); var foc=$("#cooi").val(); var foname=$("#foname").val(); var finum=$("#finum").val(); console.log(kind); $.post( 'ChartServlet', {"method":"chart","kind":kind,"koc":koc,"fnum":fnum,"foc":foc,"foname":foname,"finum":finum}, function (msg) { console.log(msg); $('#charts').show(); if(koc=='C'){ showCharts(msg,kind,"航空公司"); }else if(koc=='O'){ showCharts(msg,kind,"代理人"); } showTable(msg,kind,koc,foc); } ) }else if(kind=='sec'){ var Oname=$("#Oname").val(); console.log(kind); $.post( 'ChartServlet', {"method":"chart","kind":kind,"Oname":Oname}, function (msg) { console.log(msg); $('#charts').show(); showCharts(msg,kind,Oname); showTable(msg,kind,'null','null'); } ) }else if(kind=='thr'){ var cname=$("#cname").val(); var tnum=$("#tnum").val(); console.log(kind); $.post( 'ChartServlet', {"method":"chart","kind":kind,"cname":cname,"tnum":tnum}, function (msg) { j=JSON.parse(msg) mapd=j.mapd console.log(mapd); $('#charts').show(); drawstar(cname,msg); } ) } } function showTable(o,kind,koc,foc){ $('.head').html(""); $('.main').html(""); var json=JSON.parse(o); arr=json.mapd; if(kind=='fir'){ if(koc=='C'){ tr="<tr id='B'><td>航空公司</td><td>交易数量</td></tr>"; }else if(koc=='O'){ if(foc=='f1'){ tr="<tr id='B'><td>日期</td><td>交易占比</td></tr>"; }else if(foc=='f2'){ tr="<tr id='B'><td>日期</td><td>利润占比</td></tr>"; }else if(foc=='f3'){ tr="<tr id='B'><td>代理人</td><td>盈利率</td></tr>"; }else if(foc=='f4'){ tr="<tr id='B'><td>航空公司</td><td>销售量</td></tr>"; }else if(foc=='f5'){ tr="<tr id='B'><td>代理人</td><td>销售额</td></tr>"; }else if(foc=='f6'){ tr="<tr id='B'><td>代理人</td><td>购入/卖出数量</td></tr>"; } } }else if(kind=='sec'){ tr="<tr id='B'><td>日期</td><td>交易所占比</td></tr>"; } $('.head').append(tr); for(var key in arr){ $('.main').append("<tr><td>"+key+"</td><td>"+arr[key]+"</td></tr>"); } $('tbody.main tr').mouseover(function(){ index=$(this).prevAll().length temp=0; var str=""; for(var k in arr){ if(temp==index){ str=k; break; } temp++; } charts.dispatchAction({ type: 'highlight', name: str, }) }) $('tbody.main tr').mouseout(function(){ index=$(this).prevAll().length temp=0; var str=""; for(var k in arr){ if(temp==index){ str=k; break; } temp++; } charts.dispatchAction({ type: 'downplay', name: str, }) }) } function showCharts(o,kind,title){ j=JSON.parse(o) mapd=j.mapd console.log(mapd); if(kind=='fir'){ drawCharts(title,mulJsonToArray(mapd,true),mulJsonToArray(mapd,false)) }else if(kind=='sec'){ drawCharts(title,mulJsonToArray(mapd,true),mulJsonToArray(mapd,false)) } } function mulJsonToArray(obj,isKey){ arr=[] for(key in obj){ if(isKey){ arr.push(key) }else { arr.push(obj[key]) } } return arr } function drawCharts(title,xdata,ydata){ option={ title: { text: title }, tooltip:{}, legend: { data:['value'] }, xAxis:{ data:xdata }, yAxis:{}, series: [{ name: 'value', type: 'line', data: ydata }] } typeIndex=$('input[name=shape]:checked').val() if(typeIndex=='0'){ option.xAxis.show=true option.yAxis.show=true option.series[0].type="line" } else if(typeIndex=='1'){ option.xAxis.show=true option.yAxis.show=true option.series[0].type="bar" } else if(typeIndex=='2'){ data=[] for(i=0;i<xdata.length;i++){ data.push( { name:xdata[i] ,value:ydata[i] } ) } option.series[0].type="pie" option.series[0].data=data option.xAxis.show=false option.yAxis.show=false } charts.setOption(option); charts.on('mouseover',function(data){ $('tbody.main tr').eq(data.dataIndex).css('background',"#00CCFF") }) charts.on('mouseout',function(data){ $('tbody.main tr').eq(data.dataIndex).css('background',"#FFFFFF") }) } function drawstar(cate,o){ var data=[]; var link=[]; var categories=[]; categories[0]={ name:'核心' }; categories[1]={ name:'航空公司' }; categories[2]={ name:'代理人' }; categories[3]={ name:'普通用户' }; j=JSON.parse(o) mapd=j.mapd for(key in mapd){ if(key==cate){ data.push({ name:key, category:0, symbolSize:40, des:key+'ddes' }) }else{ var size=mapd[key]%30+6; if(key.charAt(0)=='C'){ data.push({ name:key, category:1, symbolSize:size, des:key+'1des' }); }else if(key.charAt(0)=='O'){ data.push({ name:key, category:2, symbolSize:size, des:key+'2des' }); }else if(key.charAt(0)=='P'){ data.push({ name:key, category:3, symbolSize:size, des:key+'3des' }); } link.push({ source:cate, target:key, name:'', des:key+'Ldes' }); } } option={ title:{ text:cate }, tooltip:{}, legend:[{ data:categories.map(function(a){ return a.name }) }], animationDuration: 1500, animationEasingUpdate: 'quinticInOut', series:[{ type:'graph', layout: 'force', data:data, links:link, categories:categories, roam: true, focusNodeAdjacency: true, itemStyle:{ borderColor:'#fff', borderWidth:1, shadowBlur:10, shadowColor: 'rgba(0, 0, 0, 0.3)' }, label: { position: 'right', formatter: '{b}' }, lineStyle: { color: 'source', curveness: 0.3 }, emphasis: { lineStyle: { 10 } } }] } charts.setOption(option); } </script> </html>
这部分HTML代码可以显示折线图，柱状图，饼图和星云图，前三种图的样式在以前的博客里都展示过，下面只给出关系图的运行截图。
最后本周还学习了一点Spring，主要是java实现Spring的Bean部署
部署代码：
package com.pyd.config; import com.pyd.pojo.User; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.Import; //类似spring05的applicationContext.xml @Configuration //扫描包 @ComponentScan("com.pyd.pojo") //引入 @Import(MyConfig2.class) public class MyConfig { //bean id=getUser @Bean public User getUser(){ return new User(); } }
调用：
import com.pyd.config.MyConfig; import com.pyd.pojo.User; import org.springframework.context.ApplicationContext; import org.springframework.context.annotation.AnnotationConfigApplicationContext; import org.springframework.context.annotation.Scope; public class MyTest { public static void main(String[] args){ ApplicationContext context = new AnnotationConfigApplicationContext(MyConfig.class); User user=context.getBean("getUser",User.class); System.out.println(user.getName()); } }
以上是本周的所有学习内容。