步骤五利用echarts进行数据可视化分析

2017227updated:2017310开发团队：厦门大学数据库实验室联系人：林子雨老师析，第三个步骤：将数据从HiveMySQL和第四个步骤：利用Spark预ECharts是一个纯Javascript的图表库，可以流畅的运行在PC和移动设备Web网页浏览器可视化分析淘宝双11数据。由于EChartsJSP操作系统:Linux（比如Ubuntu16.04）可视化：ECharts（安装在Linux系统下）数据库：MySQL（安装在Linux系统下）Web应用服务器：tomcatTomcatWeb调试JSP程序的首选。查看LinuxJavajava-Shell命令Shell命令openjdkopenjdkversionOpenJDKRuntimeEnvironment(build1.8.0_121-8u121-b13-0ubuntuOpenJDK64-BitServerVM(build25.121-b13,mixed可以看出Linux系统中的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命令启动启动执行如下命令，启动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开发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/>{b}:{c}({d}%)"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