步驟五利用echarts進行數據可視化分析

2017227updated:2017310開發(fā)團隊：廈門大學數據庫實驗室聯(lián)系人：林子雨老師析，第三個步驟：將數據從HiveMySQL和第四個步驟：利用Spark預ECharts是一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備Web網頁瀏覽器可視化分析淘寶雙11數據。由于EChartsJSP操作系統(tǒng):Linux（比如Ubuntu16.04）可視化：ECharts（安裝在Linux系統(tǒng)下）數據庫：MySQL（安裝在Linux系統(tǒng)下）Web應用服務器：tomcatTomcatWeb調試JSP程序的首選。查看LinuxJavajava-Shell命令Shell命令openjdkopenjdkversionOpenJDKRuntimeEnvironment(build1.8.0_121-8u121-b13-0ubuntuOpenJDK64-BitServerVM(build25.121-b13,mixed可以看出Linux系統(tǒng)中的Java版本是1.8版本，那么下載的tomcat也要對應Java的版本。這里下載apache-tomcat-8.0.41.ziptomcat下載地址，解壓apache-tomcat-8.0.41.zip～cd~unzipapache-tomcat-8.0.41.zip-dShell命令Shell命令啟動啟動執(zhí)行如下命令，啟動servicemysqlShell命令Shell命令EclipseWeb填入ProjectnameNewRuntimev8.0nextNewServerRuntimeEnvironmentfinishDynamicWebProjectfinishDynamicWebProjectEclipsesrc文件夾用來存放Java服務端的代碼，例如:讀取數據庫MySQL中的數據js，前端JSP頁面下載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應用src目錄用來存放服務端Java代碼，WebContent用來存放前端頁面的文件資源與代碼。其中css目錄用來存放外部樣式表文件、font目錄用來存放字體文與mysql的連接庫。點擊MyWebApp源碼,查看每個文件的代碼。首次運行MyWebApp,請按照如下操作，才能啟動項目:雙擊打開index.jspRunRunAs-->Runon出現如下對話框，直接點擊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頁面使用ECharts來展現可視化。每個JSP頁面都需要導入相關例如/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}(xrvjxb5%)"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