Echarts连接数据库，实时绘制动态图

Echarts实现动态绘制折线图，连接数据库

一只蜗牛儿

11804人浏览 · 2022-05-15 19:09:28

一只蜗牛儿 · 2022-05-15 19:09:28 发布

网页和数据库连接可以实现实时出图，出图的方式有两种，第一种，数据单独写在网页里面，不用，不用连接数据库，这个方法比较简单，首先引入echarts.js，后面引入到到网页上，下面是实际代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/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: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

生成的折线图如下所示：

在这里插入图片描述
这是第一种方法，数据不用从数据库读取。
下面是第二种方法：从数据库读取数据，实时出图。
首先，在数据库中建立一张数据表，如下所示：
在这里插这是
这是我的数据表。
第二步，开始连接数据库。
写一个连接数据库的java类，把地址改为我的表所在的位置，如下所示

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/tunnel";
		try {
			conn = DriverManager.getConnection(url, "root", "1234");
		}catch (Exception e) {
			throw new RuntimeException(e);
		}
		return conn;
	}
}

进行数据转换

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;
}

建立服务端，代码如下；

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 {

	
	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 = 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();   
		
	}
}

最后是index.jsp代码编写，如下所示；

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%-- <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> --%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <%-- <base href="<%=basePath%>"> --%>
    <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/line' // 使用柱状图就加载bar模块，按需加载
        ],
        drewEcharts
    );
    function drewEcharts(ec) {
        // 基于准备好的dom，初始化echarts图表
        myChart = ec.init(document.getElementById('main'));
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',

                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"line",

                }
            ]
        };
        //加载数据
        loadDATA(option);
        // 为echarts对象加载数据
        myChart.setOption(option);

    }
    function loadDATA(option){
        $.ajax({
            type : "post",
            async : false, //同步执行
            url : "bar.do",
            data : {},
            dataType : "json", //返回数据形式为json
            success : function(result) {
                if (result) {
                    //初始化option.xAxis[0]中的data
                    option.xAxis[0].data=[];
                    for(var i=0;i<result.length;i++){
                        option.xAxis[0].data.push(result[i].name);
                    }
                    //初始化option.series[0]中的data
                    option.series[0].data=[];
                    for(var i=0;i<result.length;i++){
                        option.series[0].data.push(result[i].num);
                    }
                }
            }
        });
    }
</script>
</body>
</html>

最后看一下，实际效果；
在这里插入图片描述
从图中我们可以看到，数据库中的数据已经全部，显示在折线图中，而且是实时显示的，当数据库中的数值发生变化时，图片也跟着一起变化。