<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>查询</title> </head> <frameset rows="20%,*"> <frame src="Query.jsp" > <frame name="show"> </frameset> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 这个用来选择日期 --> <div align="center"> <form action="servlet" target="show" method="post"> 按日期查询<input type="datetime" name="Date"> <input type="submit" value="查询"> </form> </div> </body> </html>
<%@page import="entity.info"%> <%@page import="java.util.List"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="Echart/echarts.min.js"></script> <script src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/china.js"></script> <script type="text/javascript" src="keshihua/bingtu/world.js"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="css/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <% request.setCharacterEncoding("utf-8"); List <info> infos =(List<info>) request.getAttribute("infos"); int i=0;%> <div id="main" align="center" style=" 500px;height:400px; " float="left" ></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option = { dataset: { source: [ [ '销售员id','销售金额'], <% //获取request域中的数据 if(infos!=null){ for(info info:infos){i++; %> ['<%=info.getBuy_nbr()%>','<%=info.getBuy_round()%>'], <% if(i>450)break; } } %> ] }, grid: {containLabel: true}, xAxis: {type: 'category'}, yAxis: {type: 'value'}, series: [ { type: 'line', encode: { // 将 "amount" 列映射到 X 轴。 x: '省份', // 将 "product" 列映射到 Y 轴。 y: '确诊人数' } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> <div id="main2" align="center" style=" 500px;height:400px;" float="right"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main2')); var option = { dataset: { source: [ [ '销售员id','销售金额'], <% //获取request域中的数据 if(infos!=null){ for(info info:infos){i++; %> ['<%=info.getBuy_nbr()%>','<%=info.getBuy_round()%>'], <% if(i>1500)break; } } %> ] }, grid: {containLabel: true}, xAxis: {type: 'category'}, yAxis: {type: 'value'}, series: [ { type: 'bar', encode: { // 将 "amount" 列映射到 X 轴。 x: '省份', // 将 "product" 列映射到 Y 轴。 y: '确诊人数' } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> <div id="container" style=" 500px;height:400px;"></div> <script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/china.js"></script> <script type="text/javascript" src="keshihua/bingtu/world.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [ { name: '航空数据', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ <% //获取request域中的数据 if(infos!=null){ for(info info:infos){i++; %> {value: '<%=info.getBuy_cnt()%>',name:'<%=info.getBuy_nbr()%>'}, <% if(i>1000)break; } } %> ] } ] }; ; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> <table border="1px" align="center"> <tr> <th>日期</th> <th>销售员id</th> <th>销售金额</th> <th>销售数量</th> </tr> <% if(infos!=null){ for(info info:infos){ %> <td><%=info.getDay_id() %></td> <td><%=info.getBuy_nbr() %></td> <td><%=info.getBuy_round() %></td> <td><%=info.getBuy_cnt() %></td> </tr> <% } } %> </table> </body> </html>
数据我已经使用了hive对数据进行了处理，