碼上快樂

相關內容    簡體    繁體

繪制echarts折線圖

本文轉載自   查看原文   2020-03-05 18:49   717 

利用eclipse和MySQL數據庫完成了折線圖表的繪制，通過向MySQL數據庫中引入老師提供的sql文件來獲取了全國的疫情信息，然后再通過訪問echart官網學習了它的基本結構以及各項結構的功能，並運行了官網的實例來更清楚的了解echarts。首先依然是在后台先連接數據庫，然后寫bean，不同的是需要寫兩個bean，一個是存放數據庫中的對象，另一個則是存放圖標的橫軸與縱軸的信息。首先需要把數據庫中的數據全都輸出出來，需要在servlet里面寫一個遍歷輸出表的函數findAll（），然后通過另一個service調用這個函數，並且獲得一個List數組，並且進行循環，在循環中把每條信息的省份和確診人數分別賦給坐標軸的橫軸和縱軸，然后把獲取到的橫軸和縱軸裝到json中去。然后通過jsp中的result來取出信息並且給坐標軸，這樣坐標軸便可以顯示數據了，然后就通過折現圖表來顯示數據庫中的所有信息。

代碼如下：

<%@page import="servlet.yqServlet"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="java.util.ArrayList"%>
    <%@page import="bean.yq"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="js/bootstrap.min.css">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<jsp:useBean id="b" class="servlet.yqServlet"></jsp:useBean>
<script type="text/javascript">
function onload() {
    <% 
    
    List<yq> yq = null;
    yq = b.findAll();
    %>
}
</script>
</head>


<body>
<!-- <div style="text-align: center;">
時間：<input type="text" name="Date" >
<a href="1.jsp">查詢</a>
</div> -->
<div id="main" style="width:1000px; height: 600px;"></div>

<div align="center">
        <h1 >全國各省疫情信息</h1>
        <table >
            <tr>
                <td>日期</td>
                <td>省份</td>
                <td>城市</td>
                <td>確診人數</td>
                <td>疑似病例</td>
                <td>治愈人數</td>
                <td>死亡人數</td>
            </tr>
            <c:forEach items="<%=yq %>" var="item">
                <tr>
                    <td>${item.getDate()}</td>
                    <td>${item.getProvince()}</td>
                    <td>${item.getCity()}</td>
                    <td>${item.getConfirmed_num()}</td>
                    <td>${item.getYisi_num()}</td>
                    <td>${item.getCured_num()}</td>
                    <td>${item.getDead_num()}</td>
                </tr>
            </c:forEach>
        </table>
    </div>
</body>
<script type="text/javascript">

        // 基於准備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        myChart.setOption({
            title: { 
                text: '全國各省確診人數'
            },
            tooltip: {},
            legend: {
                data:['確診人數'],
                width:'auto',
                height:'auto'
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '確診人數',
                type: 'line',
                data: []
            }]
        });
        myChart.showLoading();
        var names=[];    //類別數組（實際用來盛放X軸坐標值）
        var nums=[];    //銷量數組（實際用來盛放Y坐標值）
        // 使用剛指定的配置項和數據顯示圖表。
        $.ajax({
        type : "post",
        async : true,            //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）
        url : "s",    //請求發送到TestServlet處
        success : function(resultJson) {
            var result= jQuery.parseJSON(resultJson);
            //請求成功時執行該函數內容，result即為服務器返回的json對象
            if (result) {
                for(var i=0;i<result.length;i++){
                      names.push(result[i].name);    //挨個取出類別並填入類別數組
                      nums.push(result[i].value);
                    }
                   myChart.hideLoading();    //隱藏加載動畫
                   myChart.setOption({        //加載數據圖表
                       xAxis: {
                           data: names
                       },
                       series: [{
                           // 根據名字對應到相應的系列
                           name: '確診人數',
                           data: nums
                       }]
                   });
                   
            }
       },
        error : function(errorMsg) {
            //請求失敗時執行該函數
        alert("圖表請求數據失敗!");
        myChart.hideLoading();
        }
   });
    </script>
</html>
package bean;

public class date {
private String name;
private String value;
public String getName() {
    return name;
}
public void setName(String name) {
    this.name = name;
}
public String getValue() {
    return value;
}
public void setValue(String value) {
    this.value = value;
}
}
package bean;


public class yq {
private String Date;
private String Province;
private String City;
private String Confirmed_num;
private String Yisi_num;
private String Cured_num;
private String Dead_num;
public String getDate() {
    return Date;
}
public void setDate(String date) {
    this.Date = date;
}
public String getProvince() {
    return Province;
}
public void setProvince(String province) {
    Province = province;
}
public String getCity() {
    return City;
}
public void setCity(String city) {
    City = city;
}
public String getConfirmed_num() {
    return Confirmed_num;
}
public void setConfirmed_num(String confirmed_num) {
    Confirmed_num = confirmed_num;
}
public String getYisi_num() {
    return Yisi_num;
}
public void setYisi_num(String yisi_num) {
    Yisi_num = yisi_num;
}
public String getCured_num() {
    return Cured_num;
}
public void setCured_num(String cured_num) {
    Cured_num = cured_num;
}
public String getDead_num() {
    return Dead_num;
}
public void setDead_num(String dead_num) {
    Dead_num = dead_num;
}

}
package servlet;

import java.sql.Connection;
import java.sql.Date;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.sun.org.apache.bcel.internal.generic.Select;

import bean.yq;
import jdk.nashorn.internal.objects.annotations.Where;
import bean.yq;

@SuppressWarnings("unused")
public class yqServlet {
    private Connection conn;
    private PreparedStatement pstmt;
    @SuppressWarnings("static-access")
    public yqServlet()
    {
        conn=new util.DBUtil().getConn();
    }
    public List<yq> findAll()
    {
        try {  
            String sql = "select * from info where id < 33";
            pstmt=conn.prepareStatement(sql);
            ResultSet rs = pstmt.executeQuery();
            List<yq> Y = new ArrayList<yq>();
            while(rs.next()) 
            {
                yq user=new yq();
                user.setDate(rs.getString(2));
                user.setProvince(rs.getString(3));
                user.setCity(rs.getString(4));
                user.setConfirmed_num(rs.getString(5));
                user.setYisi_num(rs.getString(5));;
                user.setCured_num(rs.getString(7));;
                user.setDead_num(rs.getString(8));;
                Y.add(user);
            }
            return Y;
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return null;
    }
}
package servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

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

import com.google.gson.Gson;

import bean.yq;
import bean.date;
import util.DBUtil;

/**
 * servlet implementation class search
 */
@WebServlet("/s")
public class s extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public s() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
         request.setCharacterEncoding("utf-8"); 
         response.setContentType("text/html;charset=utf-8");
         List<yq> Y = new ArrayList<yq>();
         yqServlet b = new yqServlet();
         Y = b.findAll();
         List<date> date = new ArrayList<date>();
         for(yq y:Y){
             date d = new date();
             d.setName(y.getProvince());
             d.setValue(y.getConfirmed_num());
             date.add(d);
         }
            Gson gson = new Gson();
            String json = gson.toJson(date);
            System.out.println(json);
            response.getWriter().write(json);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}
package util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;

import com.mysql.jdbc.PreparedStatement;
public class DBUtil {
    public static String db_url = "jdbc:mysql://localhost:3306/yiqing?useUnicode=true&characterEncoding=utf8";
    public static String db_user = "root";
    public static String db_pass = "20183602";
    
    public static Connection getConn () {
        Connection conn = null;
        
        try {
            Class.forName("com.mysql.jdbc.Driver");//加載JDBC驅動
            conn = DriverManager.getConnection(db_url, db_user, db_pass);
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        return conn;
    }
    
    
    public static void close (ResultSet rs, PreparedStatement state, Connection conn) {
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
        if (state != null) {
            try {
                state.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
    
    
}

結果展示：

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 echarts折線圖繪制 vue中繪制echarts折線圖 echarts折線圖 echarts 折線圖 echarts折線圖 echarts繪制折線圖平均線 echarts繪制折線圖、柱狀圖 Python繪制折線圖 js繪制折線圖 canvas繪制折線圖
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM