2017227updated:2017310開發(fā)團(tuán)隊(duì)：廈門大學(xué)數(shù)據(jù)庫(kù)實(shí)驗(yàn)室聯(lián)系人：林子雨老師析，第三個(gè)步驟：將數(shù)據(jù)從HiveMySQL和第四個(gè)步驟：利用Spark預(yù)ECharts是一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備Web網(wǎng)頁(yè)瀏覽器可視化分析淘寶雙11數(shù)據(jù)。由于EChartsJSP操作系統(tǒng):Linux（比如Ubuntu16.04）可視化：ECharts（安裝在Linux系統(tǒng)下）數(shù)據(jù)庫(kù)：MySQL（安裝在Linux系統(tǒng)下）Web應(yīng)用服務(wù)器：tomcatTomcatWeb調(diào)試JSP程序的首選。查看LinuxJavajava-Shell命令Shell命令openjdkopenjdkversionOpenJDKRuntimeEnvironment(build1.8.0_121-8u121-b13-0ubuntuOpenJDK64-BitServerVM(build25.121-b13,mixed可以看出Linux系統(tǒng)中的Java版本是1.8版本，那么下載的tomcat也要對(duì)應(yīng)Java的版本。這里下載apache-tomcat-8.0.41.ziptomcat下載地址，解壓apache-tomcat-8.0.41.zip～cd~unzipapache-tomcat-8.0.41.zip-dShell命令Shell命令啟動(dòng)啟動(dòng)執(zhí)行如下命令，啟動(dòng)servicemysqlShell命令Shell命令EclipseWeb填入ProjectnameNewRuntimev8.0nextNewServerRuntimeEnvironmentfinishDynamicWebProjectfinishDynamicWebProjectEclipsesrc文件夾用來(lái)存放Java服務(wù)端的代碼，例如:讀取數(shù)據(jù)庫(kù)MySQL中的數(shù)據(jù)js，前端JSP頁(yè)面下載mysql-connector-java-*.zip是Java連接MySQL~/cd~unzipunzipmysql-connector-java-5.1.40.zip-dcd~/mysql-connector-java-mv./mysql-connector-java-5.1.40-bin.jar~/workspace/MyWebAShell命令Shell命令Eclipse開發(fā)DynamicWebProject應(yīng)用src目錄用來(lái)存放服務(wù)端Java代碼，WebContent用來(lái)存放前端頁(yè)面的文件資源與代碼。其中css目錄用來(lái)存放外部樣式表文件、font目錄用來(lái)存放字體文與mysql的連接庫(kù)。點(diǎn)擊MyWebApp源碼,查看每個(gè)文件的代碼。首次運(yùn)行MyWebApp,請(qǐng)按照如下操作，才能啟動(dòng)項(xiàng)目:雙擊打開index.jspRunRunAs-->Runon出現(xiàn)如下對(duì)話框，直接點(diǎn)擊finish即可。packageimportimportpublicclassconnDbprivatestaticConnectioncon=privatestaticStatementstmt=privatestaticResultSetrs=null;publicstaticvoid con=DriverManager.getConnection("jdbc:MyS}catch(SQLException 19. 20. }catch(ClassNotFoundException21. 22. 23. publicstaticvoidendConn()throwsif(con!= con=null;30. if(rs!= rs=null;34. if(stmt!= stmt=null;38. publicstaticArrayListindex()throwsArrayList<String[]>list=newstmt= rs=stmt.executeQuery("selectaction,count(*)numfromuser_loggroupbyactiondesc"); String[]temp={rs.getString("action"),rs.getString("nu 49. returnlist;52. publicstaticArrayListindex_1()throwsArrayList<String[]>list=newstmt= rs=stmt.executeQuery("selectgender,count(*)numfromuser_loggroupbygenderdesc"); String[]temp={rs.getString("gender"),rs.getStrin 62. returnlist;65. publicstaticArrayListindex_2()throwsArrayList<String[]>list=newstmt= rs=stmt.executeQuery("selectgender,age_range,count(*)numfromuser_loggroupbygender,age_rangedesc"); String[]temp={rs.getString("gender"),rs.getStrin 75. returnlist;78. publicstaticArrayListindex_3()throwsArrayList<String[]>list=newstmt=rs=stmt.executeQuery("selectcat_id,count(*)fromuser_loggroupbycat_idorderbycount(*)desclimit5 String[]temp={rs.getString("cat_id"),rs.getString returnlist;91. publicstaticArrayListindex_4()throwsArrayList<String[]>list=newstmt= rs=stmt.executeQuery("selectprovince,count(*)numfromuser_loggroupbyprovinceorderbycount(*)desc"); String[]temp={rs.getString("province"),rs.getString(" return }<%@pagelanguage="java"*"contentType="text/html;charset=UTF-3.ArrayList<String[]>list=前端JSP頁(yè)面使用ECharts來(lái)展現(xiàn)可視化。每個(gè)JSP頁(yè)面都需要導(dǎo)入相關(guān)例如/WebContent/index-4.jsp的部分代碼<script<script輯代碼。這里展示index.jsp中可視化邏輯代碼:varmyChart=option=backgroundColor:title:textleft:top:textStyle: color:'#ccc'14. 15. tooltip:trigger: formatter:"{a}<br/>:{c}(fkgewoi%)"20. visualMap:show:min:max:inRange: colorLightness:[0,1]28. series[31. radius:center:['50%', {value:<%=list.get(0)[1]%>,name:'特別{value:<%=list.get(1)[1name {value:<%=list.get(2)[1]%>,name:'添加{value:<%=list.get(3)[1name ].sort(function(a,b){returna.value-b.valroseType:label:normal:textStyle:color:'rgba(255,255,255, labelLine: normal: lineStyle: color:'rgba(255,255,255, smooth:length: len