航空公司信息可视化

<%@ 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对数据进行了处理，

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/520520520zl/p/14199432.html