echart连接mysql例子_echartsmysql,echarts连接数据库实例资源-CSDN文库

共26个文件

jar：8个

class：3个

js：3个

5星 · 超过95%的资源需积分: 50 141 浏览量 2015-01-30 15:34:33 上传评论 10 收藏 2.01MB ZIP 举报

**正文** 在本文中，我们将深入探讨如何使用ECharts数据可视化库与MySQL数据库进行交互，以便将数据库中的数据动态地展示在图表上。ECharts是一款由百度开发的开源JavaScript图表库，提供了丰富的图表类型和强大的交互功能。而MySQL是世界上最受欢迎的关系型数据库管理系统之一，广泛应用于各种Web应用中。下面，我们将会讲解如何将这两者结合，实现数据的实时呈现。我们需要了解ECharts的基本使用。ECharts可以通过JSON数据配置项来创建各种图表，例如柱状图、折线图、饼图等。在ECharts的配置项中，`data`字段通常用于指定图表的数据源，这正是我们将要从MySQL数据库获取的部分。为了连接MySQL数据库，我们需要使用Java的JDBC（Java Database Connectivity）API。确保你的项目已经添加了MySQL的JDBC驱动jar包，如`mysql-connector-java-x.x.x.jar`。这个驱动允许Java程序与MySQL数据库进行通信。以下是一个简单的步骤，展示了如何使用Java连接MySQL并获取数据： 1. **加载JDBC驱动**：在Java代码中，我们需要通过`Class.forName()`方法加载MySQL的JDBC驱动。 ```java Class.forName("com.mysql.cj.jdbc.Driver"); ``` 2. **建立连接**：使用`DriverManager.getConnection()`方法建立到MySQL服务器的连接。 ```java Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/your_database", "username", "password"); ``` 3. **创建Statement对象**：通过连接对象创建一个`Statement`，用于执行SQL查询。 ```java Statement stmt = conn.createStatement(); ``` 4. **执行SQL查询**：编写SQL语句，获取需要的数据。 ```java String sql = "SELECT * FROM your_table"; ResultSet rs = stmt.executeQuery(sql); ``` 5. **处理结果集**：遍历`ResultSet`，将数据转换为JSON格式，准备供ECharts使用。 ```java List<Map<String, Object>> data = new ArrayList<>(); while (rs.next()) { Map<String, Object> item = new HashMap<>(); item.put("name", rs.getString("column_name1")); item.put("value", rs.getInt("column_name2")); // 添加更多字段... data.add(item); } ``` 6. **关闭资源**：记得关闭`ResultSet`、`Statement`和`Connection`以释放资源。 ```java rs.close(); stmt.close(); conn.close(); ``` 7. **将数据发送给前端**：你可以通过Servlet或Spring MVC等技术将转换后的JSON数据发送给前端页面。在前端，ECharts的配置项中，设置`option.series.data`为从后端获取的JSON数据。例如，如果你正在创建一个柱状图： ```javascript var option = { xAxis: { data: [/* 前端从后端接收到的JSON数据 */] }, series: [{ type: 'bar', data: [/* 同上 */] }] }; ``` 将`option`传递给ECharts实例，完成图表的绘制。 ECharts连接MySQL的例子涉及到Java的JDBC操作、数据库查询以及前后端数据传输。通过这样的方式，我们可以将动态的数据库数据实时地呈现在ECharts图表上，实现数据可视化的交互体验。在实际项目中，可能还需要考虑数据安全、错误处理和性能优化等问题，以确保系统的稳定性和效率。

资源推荐

资源详情

资源评论

收起资源包目录

package

echartdemo.zip （26个子文件）

folder

echartdemo

folder

.settings

org.eclipse.jdt.core.prefs 330B

folder

src

folder

com

folder

helloBar

barDAO.java 1KB

barBean.java 367B

helloBar.java 3KB

.project 1KB

folder

WebRoot

jquery.min.js 91KB

jquery-1.8.2.min.js 91KB

folder

META-INF

MANIFEST.MF 39B

folder

WEB-INF

web.xml 638B

folder

classes

folder

com

folder

helloBar

barBean.class 718B

helloBar.class 2KB

barDAO.class 2KB

folder

lib

ezmorph-1.0.6.jar 84KB

commons-collections-3.2.1.jar 562KB

json-lib-0.9.jar 61KB

commons-logging-1.1.1.jar 59KB

commons-beanutils-1.8.0.jar 226KB

javax.servlet.jar 96KB

mysql-connector-java-5.1.15-bin.jar 768KB

commons-lang-2.4.jar 256KB

Copy of echart.jsp 4KB

index.jsp 985B

jquery-1.8.3.min.js 91KB

echart.jsp 4KB

.mymetadata 303B

.classpath 1020B

folder

.myeclipse

package com.helloBar; 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 helloBar extends HttpServlet { /** * Constructor of the object. */ public helloBar() { super(); } /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out .println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">"); out.println("<HTML>"); out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>"); out.println(" <BODY>"); out.print(" This is "); out.print(this.getClass()); out.println(", using the GET method"); out.println(" </BODY>"); out.println("</HTML>"); out.flush(); out.close(); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //创建了一个bardao的对象，barDAO主要是对数据库的连接和对数据库的操作 barDAO bardao=new barDAO(); //调用bardao的select_all()方法把从数据库中读取所有的数据返回的是一个ArrayList，ArrayList里面放的是一个barBean ArrayList<barBean> array = (ArrayList<barBean>) bardao.listAll(); System.out.println("s"+array); //设置返回时的编码格式 response.setContentType("text/html; charset=utf-8"); //调用JSONArray.fromObject方法把array中的对象转化为JSON格式的数组 JSONArray json=JSONArray.fromObject(array); System.out.println(json.toString()); //返回给前段页面 PrintWriter out = response.getWriter(); out.println(json); out.flush(); out.close(); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } }

内容反馈

DEX132

2015-03-18

谢谢分享对我很有帮助
托马斯滑板鞋

2015-05-04

不知道是否能通过socket通信来实现动态数据刷新功能？
db_shidb

2015-10-22

挺好的资源有些用途
ericliu2017

2016-04-13

谢谢分享对我很有帮助
数研妙手

2017-05-20

不错啊很好的啊

前往

页

木槿花_开

粉丝: 0
资源: 12

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip