echarts通过使用jsp和serlvet访问数据库中的信息并进行绘图

文章目录

echarts通过使用jsp和serlvet访问数据库中的信息并进行绘图
前言
1，创建数据库
二、使用步骤
- 1.写出Javaweb三层架构，引入依赖项
- 2.编写selvert
- 3.编写jsp页面并引入echarts
- 4.对selvert中传输的数据进行处理存储
- 5.对页面代码进行修改
- 6.一个会随着数据库内容变化的表格就出现了

前言

`
使用echarts作图，但是想要连接数据库，不会使用node.js的菜鸡程序员不得不使用javaweb进行传输数据。
这边写的使用就简略说一下不重要的过程，着重说一下如何传输数据吧
技术要求：
Javaweb
MySQL
echarts
JavaScript（html应该不用说吧）

1，创建数据库

先随便创建一个数据库表存放数据，我们将使用这些数据来进行echarts的数据可视化
在这里插入图片描述

二、使用步骤

1.写出Javaweb三层架构，引入依赖项

在这里插入图片描述
这边是实体类的描述

2.编写selvert

代码如下（示例）：

package com.example.spark_echarts.web;

import com.example.spark_echarts.domain.behavior_signup_num;
import com.example.spark_echarts.service.Ibehavior_signup;
import com.example.spark_echarts.service.implservice.impl_behaviorsignup;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "signupServlet", value = "/signupServlet")
public class signupServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Ibehavior_signup ibehavior_signup = new impl_behaviorsignup();
        List<behavior_signup_num> signup = ibehavior_signup.getall();
        request.setAttribute("signup",signup);
        request.getRequestDispatcher("WEB-INF/page/bahevior_signup.jsp").forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

3.编写jsp页面并引入echarts

这个是echarts官网上的示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

4.对selvert中传输的数据进行处理存储

其中用到了一点JSTL的知识

  var user_Bebavior = new Array()
    var index = 0
    <c:forEach items="${signup}" var = "bsignup">
    user_Bebavior[index++]="${bsignup.ehavior}"
    </c:forEach>

    var user_Bnumber = new Array()
    var index = 0
    <c:forEach items="${signup}" var = "bsignup">
    user_Bnumber[index++]=${bsignup.number}
    </c:forEach>

5.对页面代码进行修改

<%--
  Created by IntelliJ IDEA.
  User: hanlx
  Date: 2023/6/3
  Time: 18:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="./js/echarts.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>time</title>
</head>
<body>
<h1>hello world</h1>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">


    //    private Date Bdate;
    //    private int Bnumber;

    var user_Bebavior = new Array()
    var index = 0
    <c:forEach items="${signup}" var = "bsignup">
    user_Bebavior[index++]="${bsignup.ehavior}"
    </c:forEach>

    var user_Bnumber = new Array()
    var index = 0
    <c:forEach items="${signup}" var = "bsignup">
    user_Bnumber[index++]=${bsignup.number}
    </c:forEach>

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '行动使用人数'
        },
        tooltip: {},
        legend: {
            data: ['人数']
        },
        xAxis: {
            data: user_Bebavior
        },
        yAxis: {},
        series: [
            {
                name: '人数',
                type: 'bar',
                data: user_Bnumber
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

6.一个会随着数据库内容变化的表格就出现了

在这里插入图片描述