Echarts连接数据库显示数据

最近无聊研究了很久之前没有搞明白的可视化插件Echarts,从网上搜了一下官网包括大部分博客说的都是写死的数据,很少有能连接数据库的。因此,想把自己的学习经验分享出来。把完整代码发到CSDN下载里面去了,吐槽一下,CSDN自己设定了积分,为了没有积分的小伙伴们,我把代码详细在这里分解一下。

首先下载好相关插件和jar包,需要注意的一点儿是jar包不能少,刚开始时候只导入了js文件一直显示不出来图表,后来查了才知道是jar包少了。

项目采用java+servlet+mysql的路线,开发环境是myeclipse,项目文档结构和数据表bar如下:

(1)连接数据库

import java.sql.Connection;
import java.sql.DriverManager;

public class DBUtil {
	
	static{
		
		try {
			Class.forName("com.mysql.jdbc.Driver");
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	public static Connection getConnection(){
		Connection conn = null;
		String url = "jdbc:mysql://localhost:3306/echarts";
		try {
			conn = DriverManager.getConnection(url, "root", "root");
		}catch (Exception e) {
			throw new RuntimeException(e);
		}
		return conn;
	}
}

(2)实体类

public class barBean {
	public String name;

	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getNum() {
		return num;
	}
	public void setNum(Integer num) {
		this.num = num;
	}
	public Integer num;
}

(3)方法类

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;


public class barDAO {
	public ArrayList<barBean> select_all()
    {
         Connection conn = null;
         Statement stmt=null;
         ResultSet rst = null;
        try{
            conn = DBUtil.getConnection();
            stmt = conn.createStatement();
            String sql = "select * from bar";
			rst = stmt.executeQuery(sql);   
            ArrayList<barBean> array = new ArrayList<barBean>();
            while(rst.next())
            {
                barBean bar = new barBean();
                bar.setName(rst.getString("name"));
                bar.setNum(rst.getInt("num"));
                array.add(bar);
            }
            stmt.close();
            rst.close();
            return array; 
            
        }catch(SQLException e){
            System.out.println("Error");
            return new ArrayList<barBean>();
        }
    }
}

(4)Servlet

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class barServlet extends HttpServlet {

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

        barDAO bardao=new barDAO();
        ArrayList<barBean> array = bardao.select_all();
        response.setContentType("text/html; charset=utf-8");
        //调用JSONArray.fromObject方法把array中的对象转化为JSON格式的数组
        JSONArray json=JSONArray.fromObject(array);
        System.out.println(array.toString());
        PrintWriter out = response.getWriter();  
        out.println(json);  
        out.flush();  
        out.close();   
		
	}
}

(5)html页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ECharts</title>
<script src="js/esl.js"></script>
<script src="js/jquery-3.3.1.js"></script>
</head>

<body>
	<div id="main" style="height:400px"></div>
    <script type="text/javascript">
        require.config({
            paths:{ 
                'echarts' : 'js/echarts',
                'echarts/chart/bar' : 'js/echarts'
            }
        });
        
        require(
            [
                'echarts',
                'echarts/chart/bar' 
            ],
            drewEcharts
        );
         function drewEcharts(ec) {
                
                myChart = ec.init(document.getElementById('main')); 
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',     
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",   
                        }
                    ]
                };

                loadDATA(option);
                myChart.setOption(option); 
            
        }
        function loadDATA(option){
            $.ajax({
               type : "post",
               async : false,
               url : "bar.do",
               data : {},
               dataType : "json", 
               success : function(result) {
                          if (result) {
                                  option.xAxis[0].data=[];
                                  for(var i=0;i<result.length;i++){
                                    option.xAxis[0].data.push(result[i].name);
                                  }
                                  option.series[0].data=[];
                                  for(var i=0;i<result.length;i++){
                                    option.series[0].data.push(result[i].num);
                                  }
                           }
                        }
            });       
       }
    </script>
</body>
</html>

 (6)配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>barServlet</servlet-name>
    <servlet-class>barServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>barServlet</servlet-name>
    <url-pattern>/bar.do</url-pattern>
  </servlet-mapping>	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

至此所有代码结束,运行结果如下图

如果看到这里还是不能实现的话,那就去下载我上传的完整代码吧,下载链接:https://download.csdn.net/download/dengtodeng/10942945

评论 45 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

DengToDeng

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值