每日日报30——通过echarts对数据库的数据进行可视化的展示(Echarts+jsp+mysql+Servlet)

利用Echarts对数据库的数据进行可视化展示，效果如下：

建表：

CREATE TABLE `sales_port` (
  `day_id` varchar(255) DEFAULT NULL,
  `sale_nbr` varchar(255) DEFAULT NULL,
  `cnt` double DEFAULT NULL,
  `round` double DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE `sales_port2` (
  `day_id` varchar(255) DEFAULT NULL,
  `sale_nbr` varchar(255) DEFAULT NULL,
  `cnt` double DEFAULT NULL,
  `round` double DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE `sales_act` (
  `day_id` varchar(255) DEFAULT NULL,
  `sale_nbr` varchar(255) DEFAULT NULL,
  `sale_number` bigint(22) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE `sales_profit` (
  `day_id` varchar(255) DEFAULT NULL,
  `sale_nbr` varchar(255) DEFAULT NULL,
  `buy_quantity` double DEFAULT NULL,
  `buy_money` double DEFAULT NULL,
  `sale_quantity` double DEFAULT NULL,
  `sale_money` double DEFAULT NULL,
  `profit` double DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

表建好后，自行往里面加入数据即可，其中各表字段意思如下：

day_id,sale_nbr,,cnt,round

日期编号，卖出方代码，数量（一定为整数），金额（一定为整数）

day_id,sale_nbr,,cnt,round

日期编号，卖出方代码，数量（一定为整数），金额（一定为整数）

day_id,sale_nbr, sale_number

日期编号，卖出方代码，交易次数（一定为整数）

day_id,sale_nbr,buy_quantity,buy_money,sale_quantity,sale_money,profit

编号，卖出方代码，买入数量（一定为整数），买入金额（一定为整数），卖出数量（一定为整数），卖出金额（一定为整数），销售利润（卖出金额-买入金额）

工程目录如下：

代码如下：

Dao.java

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import database.Database;
import util.SalesAct;
import util.SalesPort;
import util.SalesProfit;

public class Dao {
    //各个机场的销售数量和销售金额
    public List<SalesPort> sales_port(String date) {
        List<SalesPort> list = new ArrayList<>();
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstm = null;
        SalesPort salesPort = null;
        try {
            conn = Database.getConnection();

            String sql = "select * from sales_port where day_id=? order by round desc";
            pstm = conn.prepareStatement(sql);
            pstm.setString(1, date);

            rs = pstm.executeQuery();
            while (rs.next()) {
                String day_id = rs.getString("day_id");
                String sale_nbr = rs.getString("sale_nbr");
                String cnt = rs.getString("cnt");
                String round = rs.getString("round");
                salesPort = new SalesPort(day_id, sale_nbr, cnt,round);
                list.add(salesPort);
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            Database.close(conn, pstm, rs);
        }
        return list;
    }
    public List<SalesPort> sales1_port(String date) {
        List<SalesPort> list = new ArrayList<>();
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstm = null;
        SalesPort salesPort = null;
        try {
            conn = Database.getConnection();

            String sql = "select * from sales_port WHERE day_id=? order by round desc limit 0,10;";
            pstm = conn.prepareStatement(sql);
            pstm.setString(1, date);

            rs = pstm.executeQuery();
            while (rs.next()) {
                String day_id = rs.getString("day_id");
                String sale_nbr = rs.getString("sale_nbr");
                String cnt = rs.getString("cnt");
                String round = rs.getString("round");
                salesPort = new SalesPort(day_id, sale_nbr, cnt,round);
                list.add(salesPort);
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            Database.close(conn, pstm, rs);
        }
        return list;
    }
    //各个代理商的销售数量和销售金额
    public List<SalesPort> sales_port2(String date) {
        List<SalesPort> list = new ArrayList<>();
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstm = null;
        SalesPort salesPort = null;
        try {
            conn = Database.getConnection();

            String sql = "select * from sales_port2 where day_id=? order by round desc";
            pstm = conn.prepareStatement(sql);
            pstm.setString(1, date);

            rs = pstm.executeQuery();
            while (rs.next()) {
                String day_id = rs.getString("day_id");
                String sale_nbr = rs.getString("sale_nbr");
                String cnt = rs.getString("cnt");
                String round = rs.getString("round");
                salesPort = new SalesPort(day_id, sale_nbr, cnt,round);
                list.add(salesPort);
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            Database.close(conn, pstm, rs);
        }
        return list;
    }
    public List<SalesPort> sales1_port2(String date) {
        List<SalesPort> list = new ArrayList<>();
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstm = null;
        SalesPort salesPort = null;
        try {
            conn = Database.getConnection();

            String sql = "select * from sales_port2 WHERE day_id=? order by round desc limit 0,10;";
            pstm = conn.prepareStatement(sql);
            pstm.setString(1, date);

            rs = pstm.executeQuery();
            while (rs.next()) {
                String day_id = rs.getString("day_id");
                String sale_nbr = rs.getString("sale_nbr");
                String cnt = rs.getString("cnt");
                String round = rs.getString("round");
                salesPort = new SalesPort(day_id, sale_nbr, cnt,round);
                list.add(salesPort);
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            Database.close(conn, pstm, rs);
        }
        return list;
    }
    //每天各个代理商的销售活跃度
    public List<SalesAct> sales_act(String date) {
        List<SalesAct> list = new ArrayList<>();
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstm = null;
        SalesAct salesAct = null;
        try {
            conn = Database.getConnection();

            String sql = "select * from sales_act where day_id=? order by sale_number desc";
            pstm = conn.prepareStatement(sql);
            pstm.setString(1, date);

            rs = pstm.executeQuery();
            while (rs.next()) {
                String day_id = rs.getString("day_id");
                String sale_nbr = rs.getString("sale_nbr");
                String sale_number = rs.getString("sale_number");
                salesAct = new SalesAct(day_id, sale_nbr, sale_number);
                list.add(salesAct);
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            Database.close(conn, pstm, rs);
        }
        return list;
    }
    public List<SalesAct> sales1_act(String date) {
        List<SalesAct> list = new ArrayList<>();
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstm = null;
        SalesAct salesAct = null;
        try {
            conn = Database.getConnection();

            String sql = "select * from sales_act WHERE day_id=? order by sale_number desc limit 0,10;";
            pstm = conn.prepareStatement(sql);
            pstm.setString(1, date);

            rs = pstm.executeQuery();
            while (rs.next()) {
                String day_id = rs.getString("day_id");
                String sale_nbr = rs.getString("sale_nbr");
                String sale_number = rs.getString("sale_number");
                salesAct = new SalesAct(day_id, sale_nbr, sale_number);
                list.add(salesAct);
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            Database.close(conn, pstm, rs);
        }
        return list;
    }
    
    // 9 月 1 日到 9 月 15 日之间各个代理商的销售利润
    public List<SalesProfit> sales_profit(String date) {
        List<SalesProfit> list = new ArrayList<>();
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstm = null;
        SalesProfit salesProfit = null;
        try {
            conn = Database.getConnection();

            String sql = "select * from sales_profit where day_id=? order by profit desc";
            pstm = conn.prepareStatement(sql);
            pstm.setString(1, date);

            rs = pstm.executeQuery();
            while (rs.next()) {
                String day_id = rs.getString("day_id");
                String sale_nbr = rs.getString("sale_nbr");
                String buy_quantity = rs.getString("buy_quantity");
                String buy_money = rs.getString("buy_money");
                String sale_quantity = rs.getString("sale_quantity");
                String sale_money = rs.getString("sale_money");
                String profit = rs.getString("profit");
                salesProfit = new SalesProfit(day_id, sale_nbr, buy_quantity,buy_money,sale_quantity,sale_money,profit);
                list.add(salesProfit);
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            Database.close(conn, pstm, rs);
        }
        return list;
    }
    public List<SalesProfit> sales1_profit(String date) {
        List<SalesProfit> list = new ArrayList<>();
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstm = null;
        SalesProfit salesProfit = null;
        try {
            conn = Database.getConnection();

            String sql = "select * from sales_profit WHERE day_id=? order by profit desc limit 0,10;";
            pstm = conn.prepareStatement(sql);
            pstm.setString(1, date);

            rs = pstm.executeQuery();
            while (rs.next()) {
                String day_id = rs.getString("day_id");
                String sale_nbr = rs.getString("sale_nbr");
                String buy_quantity = rs.getString("buy_quantity");
                String buy_money = rs.getString("buy_money");
                String sale_quantity = rs.getString("sale_quantity");
                String sale_money = rs.getString("sale_money");
                String profit = rs.getString("profit");
                salesProfit = new SalesProfit(day_id, sale_nbr, buy_quantity,buy_money,sale_quantity,sale_money,profit);
                list.add(salesProfit);
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            Database.close(conn, pstm, rs);
        }
        return list;
    }
}

Database.java

package database;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class Database {
    public static final String url="jdbc:mysql://localhost:3306/sales";//URL
    public static final String user="root";//用户名
    public static final String password="123";//密码
    
    public static void main(String[] args) {
        getConnection();
    }
    
    /**
     * 连接数据库
     * @return
     */
    public static Connection getConnection(){
        Connection conn=null;
        try {
            Class.forName("com.mysql.jdbc.Driver");//加载数据库驱动
            conn=DriverManager.getConnection(url, user, password);
            System.out.println("数据库连接成功！");
        }catch(Exception e) {
            e.printStackTrace();
        }
        return conn;
    }
    
    /**
     * 关闭数据库
     */
    public static void close(Connection conn,PreparedStatement pstm) {
        
        System.out.println("关闭SQL(conn,pstm)");
        if(pstm!=null) {
            try {
                pstm.close();
            }catch(SQLException e) {
                e.printStackTrace();
            }
        }
        
        if(conn!=null) {
            try {
                conn.close();
            }catch(SQLException e) {
                e.printStackTrace();
            }
        }
        
    }
    
    public static void close(Connection conn,PreparedStatement pstm,ResultSet rs) {
        
        System.out.println("关闭SQL(conn,pstm,rs)");
        if(pstm!=null) {
            try {
                pstm.close();
            }catch(SQLException e) {
                e.printStackTrace();
            }
        }
        
        if(conn!=null) {
            try {
                conn.close();
            }catch(SQLException e) {
                e.printStackTrace();
            }
        }
        
        if(rs!=null) {
            try {
                rs.close();
            }catch(SQLException e) {
                e.printStackTrace();
            }
        }
        
    }
    
}

Servlet.java

package servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.Dao;
import util.SalesAct;
import util.SalesPort;
import util.SalesProfit;

/**
 * Servlet implementation class Servlet
 */
@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Servlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //doGet(request, response);
        response.setCharacterEncoding("UTF-8");
        request.setCharacterEncoding("UTF-8");
        System.out.println("进入Servlet");
        String method = request.getParameter("method");
        System.out.println(method);
        if ("sales_act".equals(method)) {
            sales_act(request, response);
        } else if("sales_port".equals(method)) {
            sales_port(request, response);
        }else if("sales_port2".equals(method)) {
            sales_port2(request, response);
        }else if("sales_profit".equals(method)) {
            sales_profit(request, response);
        }
    }
    
    Dao dao=new Dao();
    
    public void sales_act(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        request.setCharacterEncoding("UTF-8");

        String date = request.getParameter("date");
        System.out.println(date);

        List<SalesAct> list = dao.sales_act(date);
        request.setAttribute("list", list);
        
        List<SalesAct> list1 = dao.sales1_act(date);
        request.setAttribute("list1", list1);
        
        request.getRequestDispatcher("sales_act.jsp").forward(request, response);

    }
    public void sales_port(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        request.setCharacterEncoding("UTF-8");

        String date = request.getParameter("date");
        System.out.println(date);

        List<SalesPort> list = dao.sales_port(date);
        request.setAttribute("list", list);
        
        List<SalesPort> list1 = dao.sales1_port(date);
        request.setAttribute("list1", list1);
        
        request.getRequestDispatcher("sales_port.jsp").forward(request, response);

    }
    
    public void sales_port2(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        request.setCharacterEncoding("UTF-8");

        String date = request.getParameter("date");
        System.out.println(date);

        List<SalesPort> list = dao.sales_port2(date);
        request.setAttribute("list", list);
        
        List<SalesPort> list1 = dao.sales1_port2(date);
        request.setAttribute("list1", list1);
        
        request.getRequestDispatcher("sales_port2.jsp").forward(request, response);

    }
    
    public void sales_profit(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        request.setCharacterEncoding("UTF-8");

        String date = request.getParameter("date");
        System.out.println(date);

        List<SalesProfit> list = dao.sales_profit(date);
        request.setAttribute("list", list);
        
        List<SalesProfit> list1 = dao.sales1_profit(date);
        request.setAttribute("list1", list1);
        
        request.getRequestDispatcher("sales_profit.jsp").forward(request, response);

    }

}

SalesAct.java

package util;

public class SalesAct {
    private String day_id;
    private String sale_nbr;
    private String sale_number;
    public SalesAct(String day_id, String sale_nbr, String sale_number) {
        // TODO Auto-generated constructor stub
        this.day_id=day_id;
        this.sale_nbr=sale_nbr;
        this.sale_number=sale_number;
    }
    public String getDay_id() {
        return day_id;
    }
    public void setDay_id(String day_id) {
        this.day_id = day_id;
    }
    public String getSale_nbr() {
        return sale_nbr;
    }
    public void setSale_nbr(String sale_nbr) {
        this.sale_nbr = sale_nbr;
    }
    public String getSale_number() {
        return sale_number;
    }
    public void setSale_number(String sale_number) {
        this.sale_number = sale_number;
    }
}

SalesPort.java

package util;

public class SalesPort {
    private String day_id;
    private String sale_nbr;
    private String cnt;
    private String round;
    public SalesPort(String day_id, String sale_nbr, String cnt, String round) {
        // TODO Auto-generated constructor stub
        this.day_id=day_id;
        this.sale_nbr=sale_nbr;
        this.cnt=cnt;
        this.round=round;
    }
    public String getDay_id() {
        return day_id;
    }
    public void setDay_id(String day_id) {
        this.day_id = day_id;
    }
    public String getSale_nbr() {
        return sale_nbr;
    }
    public void setSale_nbr(String sale_nbr) {
        this.sale_nbr = sale_nbr;
    }
    public String getRound() {
        return round;
    }
    public void setRound(String round) {
        this.round = round;
    }
    public String getCnt() {
        return cnt;
    }
    public void setCnt(String cnt) {
        this.cnt = cnt;
    }
}

SalesProfit.java

package util;

public class SalesProfit {
    private String day_id;
    private String sale_nbr;
    private String buy_quantity;
    private String buy_money;
    private String sale_quantity;
    private String sale_money;
    private String profit;
    public SalesProfit(String day_id, String sale_nbr, String buy_quantity, String buy_money, String sale_quantity,
            String sale_money, String profit) {
        // TODO Auto-generated constructor stub
        this.buy_money=buy_money;
        this.buy_quantity=buy_quantity;
        this.day_id=day_id;
        this.profit=profit;
        this.sale_money=sale_money;
        this.sale_nbr=sale_nbr;
        this.sale_quantity=sale_quantity;
    }
    public String getDay_id() {
        return day_id;
    }
    public void setDay_id(String day_id) {
        this.day_id = day_id;
    }
    public String getSale_nbr() {
        return sale_nbr;
    }
    public void setSale_nbr(String sale_nbr) {
        this.sale_nbr = sale_nbr;
    }
    public String getBuy_quantity() {
        return buy_quantity;
    }
    public void setBuy_quantity(String buy_quantity) {
        this.buy_quantity = buy_quantity;
    }
    public String getBuy_money() {
        return buy_money;
    }
    public void setBuy_money(String buy_money) {
        this.buy_money = buy_money;
    }
    public String getSale_quantity() {
        return sale_quantity;
    }
    public void setSale_quantity(String sale_quantity) {
        this.sale_quantity = sale_quantity;
    }
    public String getSale_money() {
        return sale_money;
    }
    public void setSale_money(String sale_money) {
        this.sale_money = sale_money;
    }
    public String getProfit() {
        return profit;
    }
    public void setProfit(String profit) {
        this.profit = profit;
    }
    
}

main.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
<script src=".//layui/layui.js"></script>
<link rel="stylesheet" href=".//layui/css/layui.css" media="all">
</head>
<body>
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this"><a href="sales_port.jsp" target="frame">各个机场的销售数量和销售金额</a></li>
            <li><a href="sales_port2.jsp" target="frame">各个代理商的销售数量和销售金额</a></li>
            <li><a href="sales_act.jsp" target="frame">各个代理商的销售活跃度</a></li>
            <li><a href="sales_profit.jsp" target="frame">各个代理商的销售利润</a></li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show"></div>
            <div class="layui-tab-item"></div>
            <div class="layui-tab-item"></div>
            <div class="layui-tab-item"></div>
            <div class="layui-tab-item"></div>
        </div>
    </div>
</body>
</html>

sales_act.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sales</title>
<link rel="stylesheet" href=".//layui/css/layui.css" media="all">
<script src=".//layui/layui.js"></script>
<!-- 使用单文件引入的方式使用echarts.min.jS -->
<script src="js/echarts.min.js"></script>
<!-- 官网jQuery文件  -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //自定义日期格式
        laydate.render({
            elem : '#test',
            format : 'yyyyMMdd' //可任意组合
        });
    });
</script>
</head>
<body>
    <form class="layui-form" action="Servlet?method=sales_act" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">日期选择</label>
            <div class="layui-inline">
                <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="test" name="date">
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit>查询</button>
            </div>
        </div>
    </form>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="layui-form-item">
        <div class="layui-inline">
            <div id="main" style=" 650px; height: 400px;"></div>
        </div>
        <div class="layui-inline">
            <div id="zhexian" style=" 600px; height: 400px;"></div>
        </div>
    </div>

    <table class="layui-table">
        <thead>
            <tr>
                <th>日期编号</th>
                <th>卖出方代码</th>
                <th>交易次数</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${list}" var="sale">
                <tr>
                    <td>${sale.day_id}</td>
                    <td>${sale.sale_nbr}</td>
                    <td>${sale.sale_number}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
    <!-- 柱状 -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option;
        option = {
            title : {
                text : '销售活跃度',
                subtext : '交易次数'
            },
            tooltip : {
                trigger : 'axis'
            },
            legend : {
                data : [ '交易次数' ]
            },
            toolbox : {
                show : true,
                feature : {
                    dataView : {
                        show : true,
                        readOnly : false
                    },
                    magicType : {
                        show : true,
                        type : [ 'line', 'bar' ]
                    },
                    restore : {
                        show : true
                    },
                    saveAsImage : {
                        show : true
                    }
                }
            },
            calculable : true,
            xAxis : [ {
                type : 'category',
                // prettier-ignore
                boundaryGap: false,
                data:[
                       <c:forEach items="${list1}" var="sale">
                       '${sale.sale_nbr}',
                      </c:forEach>
                   ],
            } ],
              yAxis: [
                    {
                      type: 'value'
                    }
                  ],
                  series: [
                    {
                        name : '交易次数',
                      type: 'bar',
                      barWidth : 10,//柱图宽度
                      data: [
                          <c:forEach items="${list1}" var="sale">
                           '${sale.sale_number}',
                          </c:forEach>
                      ]
                    }
                  ]
        };
        myChart.setOption(option);
    </script>

    <!-- 折线 -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zhexian'));
        var option;
        option = {
                  title: {
                    text: '销售活跃度',
                    subtext: '数值'
                  },
                  tooltip: {
                    trigger: 'axis'
                  },
                  legend: {},
                  toolbox: {
                    show: true,
                    feature: {
                      dataZoom: {
                        yAxisIndex: 'none'
                      },
                      dataView: { readOnly: false },
                      magicType: { type: ['line', 'bar'] },
                      restore: {},
                      saveAsImage: {}
                    }
                  },
                  xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [ <c:forEach items="${list1}" var="sale">
                       '${sale.sale_nbr}',
                          </c:forEach>]
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [
                    {
                      name: '活跃度',
                      type: 'line',
                      data: [<c:forEach items="${list1}" var="sale">
                       '${sale.sale_number}',
                          </c:forEach>],
                      markPoint: {
                        data: [
                          { type: 'max', name: 'Max' },
                          { type: 'min', name: 'Min' }
                        ]
                      },
                      markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                      },
                      symbol: 'triangle',
                      symbolSize: 20,
                      lineStyle: {
                        color: '#5470C6',
                         4,
                        type: 'dashed'
                      },
                      itemStyle: {
                        borderWidth: 3,
                        borderColor: '#EE6666',
                        color: 'yellow'
                      }
                    }
                  ]
                };
        myChart.setOption(option);
    </script>
</body>
</html>

sales_port.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sales</title>
<link rel="stylesheet" href=".//layui/css/layui.css" media="all">
<script src=".//layui/layui.js"></script>
<!-- 使用单文件引入的方式使用echarts.min.jS -->
<script src="js/echarts.min.js"></script>
<!-- 官网jQuery文件  -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //自定义日期格式
        laydate.render({
            elem : '#test',
            format : 'yyyyMMdd' //可任意组合
        });
    });
</script>
</head>
<body>
    <form class="layui-form" action="Servlet?method=sales_port"
        method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">日期选择</label>
            <div class="layui-inline">
                <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="test" name="date">
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit>查询</button>
            </div>
        </div>
    </form>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="layui-form-item">
        <div class="layui-inline">
            <div id="main" style=" 800px; height: 600px;"></div>
        </div>
    </div>

    <table class="layui-table">
        <thead>
            <tr>
                <th>日期编号</th>
                <th>卖出方代码</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${list}" var="sale">
                <tr>
                    <td>${sale.day_id}</td>
                    <td>${sale.sale_nbr}</td>
                    <td>${sale.cnt}</td>
                    <td>${sale.round}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
    <!-- 柱状 -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option;
        option = {
                  title: {
                    text: '各个机场的销售数量和销售金额',
                    subtext: '数值'
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                          color: '#999'
                        }
                      }
                  },
                  legend: {
                    data: ['数量','金额']
                  },
                  toolbox: {
                    show: true,
                    feature: {
                      dataView: { show: true, readOnly: false },
                      magicType: { show: true, type: ['line', 'bar'] },
                      restore: { show: true },
                      saveAsImage: { show: true }
                    }
                  },
                  calculable: true,
                  xAxis: [
                    {
                      type: 'category',
                      // prettier-ignore
                      data: [<c:forEach items="${list1}" var="sale">
                       '${sale.sale_nbr}',
                          </c:forEach>
                       ],
                       axisPointer: {
                           type: 'shadow'
                           }
                    }
                  ],
                  yAxis: [
                    {
                      type: 'value',
                      name: '数量',
                    },
                    {
                          type: 'value',
                          name: '金额',
                        }
                  ],
                  series: [
                    {
                      name: '数量',
                      type: 'bar',
                      barWidth : 10,//柱图宽度
                      data: [
                          <c:forEach items="${list1}" var="sale">
                           '${sale.cnt}',
                              </c:forEach>
                      ]
                    },
                    {
                      name: '金额',
                      type: 'bar',
                      yAxisIndex: 1,
                      barWidth : 10,//柱图宽度
                      data: [
                          <c:forEach items="${list1}" var="sale">
                           '${sale.round}',
                              </c:forEach>
                      ]
                    },
                    {
                          name: '数量',
                          type: 'line',
                          data: [<c:forEach items="${list1}" var="sale">
                           '${sale.cnt}',
                              </c:forEach>],
                          symbol: 'triangle',
                          symbolSize: 20,
                          lineStyle: {
                            color: '#5470C6',
                             4,
                            type: 'dashed'
                          },
                          itemStyle: {
                            borderWidth: 3,
                            borderColor: '#EE6666',
                            color: 'yellow'
                          }
                        },
                        {
                          name: '金额',
                          type: 'line',
                          yAxisIndex: 1,
                          data: [<c:forEach items="${list1}" var="sale">
                           '${sale.round}',
                              </c:forEach>],
                          symbol: 'triangle',
                          symbolSize: 20,
                          lineStyle: {
                            color: '#F5DA81',
                             4,
                            type: 'dashed'
                          },
                          itemStyle: {
                            borderWidth: 3,
                            borderColor: '#EE6666',
                            color: '#9FF781'
                          }
                        }
                  ]
                };
        myChart.setOption(option);
    </script>
</body>
</html>

sales_port2.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sales</title>
<link rel="stylesheet" href=".//layui/css/layui.css" media="all">
<script src=".//layui/layui.js"></script>
<!-- 使用单文件引入的方式使用echarts.min.jS -->
<script src="js/echarts.min.js"></script>
<!-- 官网jQuery文件  -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //自定义日期格式
        laydate.render({
            elem : '#test',
            format : 'yyyyMMdd' //可任意组合
        });
    });
</script>
</head>
<body>
    <form class="layui-form" action="Servlet?method=sales_port2"
        method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">日期选择</label>
            <div class="layui-inline">
                <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="test" name="date">
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit>查询</button>
            </div>
        </div>
    </form>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="layui-form-item">
        <div class="layui-inline">
            <div id="main" style=" 800px; height: 600px;"></div>
        </div>
    </div>

    <table class="layui-table">
        <thead>
            <tr>
                <th>日期编号</th>
                <th>卖出方代码</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${list}" var="sale">
                <tr>
                    <td>${sale.day_id}</td>
                    <td>${sale.sale_nbr}</td>
                    <td>${sale.cnt}</td>
                    <td>${sale.round}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
    <!-- 柱状 -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option;
        option = {
                  title: {
                    text: '各个代理商的销售数量和销售金额',
                    subtext: '数值'
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                          color: '#999'
                        }
                      }
                  },
                  legend: {
                    data: ['数量','金额']
                  },
                  toolbox: {
                    show: true,
                    feature: {
                      dataView: { show: true, readOnly: false },
                      magicType: { show: true, type: ['line', 'bar'] },
                      restore: { show: true },
                      saveAsImage: { show: true }
                    }
                  },
                  calculable: true,
                  xAxis: [
                    {
                      type: 'category',
                      // prettier-ignore
                      data: [<c:forEach items="${list1}" var="sale">
                       '${sale.sale_nbr}',
                          </c:forEach>
                       ],
                       axisPointer: {
                           type: 'shadow'
                           }
                    }
                  ],
                  yAxis: [
                    {
                      type: 'value',
                      name: '数量',
                    },
                    {
                          type: 'value',
                          name: '金额',
                        }
                  ],
                  series: [
                    {
                      name: '数量',
                      type: 'bar',
                      barWidth : 10,//柱图宽度
                      data: [
                          <c:forEach items="${list1}" var="sale">
                           '${sale.cnt}',
                              </c:forEach>
                      ]
                    },
                    {
                      name: '金额',
                      type: 'bar',
                      yAxisIndex: 1,
                      barWidth : 10,//柱图宽度
                      data: [
                          <c:forEach items="${list1}" var="sale">
                           '${sale.round}',
                              </c:forEach>
                      ]
                    },
                    {
                          name: '数量',
                          type: 'line',
                          data: [<c:forEach items="${list1}" var="sale">
                           '${sale.cnt}',
                              </c:forEach>],
                          symbol: 'triangle',
                          symbolSize: 20,
                          lineStyle: {
                            color: '#5470C6',
                             4,
                            type: 'dashed'
                          },
                          itemStyle: {
                            borderWidth: 3,
                            borderColor: '#EE6666',
                            color: 'yellow'
                          }
                        },
                        {
                          name: '金额',
                          type: 'line',
                          yAxisIndex: 1,
                          data: [<c:forEach items="${list1}" var="sale">
                           '${sale.round}',
                              </c:forEach>],
                          symbol: 'triangle',
                          symbolSize: 20,
                          lineStyle: {
                            color: '#F5DA81',
                             4,
                            type: 'dashed'
                          },
                          itemStyle: {
                            borderWidth: 3,
                            borderColor: '#EE6666',
                            color: '#9FF781'
                          }
                        }
                  ]
                };
        myChart.setOption(option);
    </script>
</body>
</html>

sales_profit.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sales</title>
<link rel="stylesheet" href=".//layui/css/layui.css" media="all">
<script src=".//layui/layui.js"></script>
<!-- 使用单文件引入的方式使用echarts.min.jS -->
<script src="js/echarts.min.js"></script>
<!-- 官网jQuery文件  -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //自定义日期格式
        laydate.render({
            elem : '#test',
            format : 'yyyyMMdd' //可任意组合
        });
    });
</script>
</head>
<body>
    <form class="layui-form" action="Servlet?method=sales_profit"
        method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">日期选择</label>
            <div class="layui-inline">
                <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="test" name="date">
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit>查询</button>
            </div>
        </div>
    </form>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="layui-form-item">
        <div class="layui-inline">
            <div id="main" style=" 800px; height: 600px;"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <div id="bing" style=" 800px; height: 600px;"></div>
        </div>
    </div>

    <table class="layui-table">
        <thead>
            <tr>
                <th>日期编号</th>
                <th>卖出方代码</th>
                <th>买入数量</th>
                <th>买入金额</th>
                <th>卖出数量</th>
                <th>卖出金额</th>
                <th>销售利润</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${list}" var="sale">
                <tr>
                    <td>${sale.day_id}</td>
                    <td>${sale.sale_nbr}</td>
                    <td>${sale.buy_quantity}</td>
                    <td>${sale.buy_money}</td>
                    <td>${sale.sale_quantity}</td>
                    <td>${sale.sale_money}</td>
                    <td>${sale.profit}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option;
        const colors = ['#5470C6', '#91CC75', '#EE6666'];
        option = {
          title: {
            text: '各个代理商的销售利润'
          },
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            right: '20%'
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['买入数量', '买入金额', '卖出数量', '卖出金额', '销售利润']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              // prettier-ignore
              data: [
                  <c:forEach items="${list1}" var="sale">
               '${sale.sale_nbr}',
                  </c:forEach>
               ]
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量',
              position: 'left',
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[0]
                }
              }
            },
            {
              type: 'value',
              name: '金额',
              position: 'right',
              offset: 80,
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[1]
                }
              }
            },
            {
              type: 'value',
              name: '利润',
              position: 'right',
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[2]
                }
              }
            }
          ],
          series: [
            {
              name: '买入数量',
              type: 'bar',
              data: [
                  <c:forEach items="${list1}" var="sale">
                   '${sale.buy_quantity}',
                      </c:forEach>
              ]
            },
            {
              name: '买入金额',
              type: 'bar',
              yAxisIndex: 1,
              data: [
                  <c:forEach items="${list1}" var="sale">
                   '${sale.buy_money}',
                      </c:forEach>
              ]
            },
            {
              name: '卖出数量',
              type: 'bar',
              data: [
                  <c:forEach items="${list1}" var="sale">
                   '${sale.sale_quantity}',
                      </c:forEach>
              ]
            },
            {
              name: '卖出金额',
              type: 'bar',
              yAxisIndex: 1,
              data: [
                  <c:forEach items="${list1}" var="sale">
                   '${sale.sale_money}',
                      </c:forEach>
              ]
            },
            {
              name: '销售利润',
              type: 'line',
              yAxisIndex: 2,
              data: [
                  <c:forEach items="${list1}" var="sale">
                   '${sale.profit}',
                      </c:forEach>
                  ],
              symbol: 'triangle',
              symbolSize: 20,
              lineStyle: {
                color: '#5470C6',
                 4,
                type: 'dashed'
              },
              itemStyle: {
                borderWidth: 3,
                borderColor: '#EE6666',
                color: 'yellow'
              }
            }
          ]
        };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('bing'));
        var option;
        option = {
                  title: {
                    text: '各个代理商的销售利润',
                    subtext: 'Fake Data',
                    left: 'center'
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                  },
                  legend: {
                    left: 'center',
                    top: 'bottom'
                  },
                  toolbox: {
                    show: true,
                    feature: {
                      mark: { show: true },
                      dataView: { show: true, readOnly: false },
                      restore: { show: true },
                      saveAsImage: { show: true }
                    }
                  },
                  series: [
                    {
                      name: '利润',
                      type: 'pie',
                      radius: [20, 140],
                      center: ['50%', '50%'],
                      roseType: 'area',
                      itemStyle: {
                        borderRadius: 5
                      },
                      data: [<c:forEach items="${list1}" var="sale">
                        { value:${sale.profit}, name: '${sale.sale_nbr}'},
                        </c:forEach> 
                      ]
                    }
                  ]
                };
        myChart.setOption(option);
    </script>
</body>
</html>

其中Echarts及layui的包可自行在网上下载。