Java＋Ajax＋echarts的可视化

Green
382 阅读2分钟

Java＋Ajax＋echarts的可视化

(仅给自己用来复习的 防止时间长遗忘)

demo结构如下:

src底下的db.properties和jdbcUtils用来连接数据库
dao包里用来增删改查
bean包里是pojo类
servlet是获取数据，与前台jsp做响应
所需jar包

jdbcUtils里代码如下

package cn.learnbyheart.utils;

import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.Properties;

public class JDBCUtils {
	public JDBCUtils(){}
	private static Connection conn;
	static{
		
		try {
			InputStream reader;
			reader = JDBCUtils.class.getClassLoader().getResourceAsStream("db.properties");
			Properties pro = new Properties();
			pro.load(reader);
			reader.close();
			Class.forName(pro.getProperty("driver"));
			conn = DriverManager.getConnection(pro.getProperty("url"),pro.getProperty("username"),pro.getProperty("password"));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	public static Connection getConnection(){
		return conn;
	}
	public static void close(){
		try {
			conn.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
}

db.properties代码如下

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
username=root
password=****

最重要的是前端的代码，后端的servlet从数据库用jdbc获取数据
index.jsp的代码如下:

<%--
  Created by IntelliJ IDEA.
  User: 20880
  Date: 2020/2/25
  Time: 18:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page isELIgnored="false" %>
<html>
  <head>
    <title>flower</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
  </head>
  <body>
  <div id="main" style="width: 800px;height:600px;"></div>


  </body>
  <script>

      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      //柱状
      // var option = {
      //     title: {
      //         text: 'flower'
      //     },
      //     tooltip: {show:true},
      //     legend: {
      //         data:['num']
      //     },
      //     xAxis: [{
      //         data:[]
      //        // type:'category'
      //     }],
      //     yAxis: {},
      //     series: [{
      //         name: '销量',
      //         type: 'bar',
      //         data: []
      //     }]
      // };

      //多个柱状
      option = {
          title: {
              text: 'flower',
              subtext: ''
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          legend: {
              data: ['数量', '价格']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
          },
          yAxis: {
              type: 'category',
              data: []
          },
          series: [
              {
                  name: '数量',
                  type: 'bar',
                  data: []
              },
              {
                  name: '价格',
                  type: 'bar',
                  data: []
              }
          ]
      };

      var names = [];
      var nums = [];
      var price = [];
      $.ajax({
          type:'post',
          async:true,
          url:'FlowerServlet',
          data:{},
          dataType:'json',
          success:function (res) {
              if(res){
                  for (var i = 0; i < res.length; i++) {
                      names.push(res[i].name);
                  }
                  for (var i = 0; i < res.length; i++) {
                      nums.push(res[i].num);
                  }
                  for (var i = 0; i <res.length ; i++) {
                      price.push(res[i].price);
                  }

                  myChart.setOption({
                      yAxis:{
                          data:names
                      },
                      series:[{
                          name:'数量',
                          data:nums
                      },
                          {
                              name:'价格',
                              data:price
                          }]
                  });
              }
          },
          error:function (errorMsg) {
              alert("加载数据失败")
          }
      })

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

最主要是js的Ajax里使用for循环获取数据 ,用js的语法来获取就可以不用在前端的js的代码里使用Java的jstl或el来训话获取数据

avatar
文章
阅读
粉丝