Java，Oracle，Echarts

最新推荐文章于 2023-06-13 16:56:18 发布

calangan

最新推荐文章于 2023-06-13 16:56:18 发布

阅读量1.9w

点赞数

分类专栏： Java oracle # ECharts

本文链接：https://blog.csdn.net/calangan/article/details/72732080

版权

Java 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

oracle

6 篇文章 0 订阅

订阅专栏

ECharts

1 篇文章 0 订阅

订阅专栏

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库

ECharts的帮助文档地址：http://echarts.baidu.com/echarts2/doc/doc.html

需要读者自行下载echarts.js，jquery-1.8.3.min.js，json-2.2.2.jar

本文主要讲述采用Java语言从Oracle数据库中获取姓名和年龄信息，利用Echarts将其统计信息在页面显示

由于学识浅薄，先创建了学生对象，由Servlet向jsp返回对象的集合，再利用JavaScript中eval（）函数将list集合转换为数组

下边将源代码贴出，Student类较简单，就不再此贴代码啦

package com.lq.data;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

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

import a.Student;

import com.google.gson.Gson;
import com.lq.util.DBUtil;
import com.lq.util.IRowMapper;

public class TestServlet extends HttpServlet {
	
	int age;
	String name;
	List<Student> list = new ArrayList<Student>();
	private static final long serialVersionUID = 1L;
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException{
	
		response.setContentType("text/json;charset=UTF-8");
		String sql = "select name,age from student ";
		new DBUtil().select(sql, new IRowMapper() {
			
			@Override
			public void rowMapper(ResultSet resultSet) {
				try {
					while(resultSet.next()){
						name = resultSet.getString("name");
						age = resultSet.getInt("age");
						list.add(new Student(age,name));
					}
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
		});
	
		PrintWriter out = response.getWriter();
		out.print(new Gson().toJson(list));
		out.flush();
		out.close();
	}
}

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>java Echarts实现</title>
		<script src="./echarts/echarts.js"></script>
		<script src="./jquery-1.8.3.min.js"></script>
	</head>
	<body>
	
		<h1>java Ajax ECharts 测试</h1>
	    <hr>
	    <div id="container" style="width: 600px; height: 400px;"></div>
	
	    <script>
	
		    // 初始化两个数组，盛装从数据库中获取到的数据
		    var names = [], ages = [];
			
		    //调用ajax来实现异步的加载数据
		    function getusers() {
		        $.ajax({
		            type: "post",
		            async: false,
		            url: "./TestServlet",
		            data: {},
		            dataType: "json",
		            success: function(result){
		                if(result){
		                	var studentArray = eval(result);
		                    for(var i = 0 ; i < studentArray.length; i++){
		                        names.push(studentArray[i].name);
		                        ages.push(studentArray[i].age);
		                    }
		                }
		            },
		            error: function(errMsg) {
		                alert("Ajax获取数据出错了！"+ errMsg);
		            }
		        });
		    return names, ages;
		    }
	
		    // 执行异步请求
		    getusers();
	

	    // 初始化 图表对象
	        var mychart = echarts.init(document.getElementById("container"));
	        var option = {
	            title : {
	                text : '姓名年龄分布图'
	            },
	            tooltip : {
	                show : true
	            },
	            legend : {
	                data : [ 'age' ]
	            },
	            xAxis : [ {
	                data : names
	            } ],
	            yAxis : [ {
	                type : 'value'
	            } ],
	            series : [ {
	                "name" : "age",
	                "type" : "bar",//图类，此处为柱形图
	                "data" : ages
	            } ]
	        };

	        // 将配置项赋给chart对象，来显示相关的数据
	        mychart.setOption(option);
	    </script>
	</body>
</html>

欢迎大家指正，共同进步

calangan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Java，Oracle，Echarts

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库ECharts的帮助文档地址：http://echarts.baidu.com/echarts2/doc/doc.html需要读者自行下载echarts.js，jquery-1.8.3.min.js，json-2.2.2.jar本文主要讲述采用Java语言从Orac
复制链接

扫一扫

专栏目录