Echarts連接Mysql使用心得

Echarts是什么，它一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器，底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

它可以輕易的作出類似這樣：

或這樣的美觀可視化圖：

當別人在使用各種圖來表示各項數據之間的聯系時，我還在使用Low到爆的表格那種用戶體驗感受屬實不太妙。可視化圖相較於表格那一行一行數據，在直觀方面不知優出幾個檔次。但是echarts開源庫的使用在小白的我看來一直是一個難點，看了很多別人的文檔還是不懂如何使用。但是這兩天，我仔細找了各種項目和向大佬尋求幫助，總算是能成功的顯示一個丑丑的圖來，這也算是一個進步吧。好，下面開始我自己的使用教程。

 

第一步：先找到自己想要的可視化圖模板，並下載簡單的案例。比如像我下圖這個就挺不錯的。

 

第二步：建立數據庫，並填入相對應的數據，比如想我這個這樣。

 

第三步：對自己的Web項目添加鏈接數據庫的jar包，並且在DB里面建立連接。

 

第四步：建立對應數據庫的數據Bean與邏輯Bean，像這里我就是User和UserService

1.User

package cn.edu.ccut.bean;

import java.util.Date;

public class User {
    private int id;
    private String name;
    private int sex;
    private Date birthday;
    private int department;
    private int position;
    private int power;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getSex() {
        return sex;
    }

    public void setSex(int sex) {
        this.sex = sex;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public int getDepartment() {
        return department;
    }

    public void setDepartment(int department) {
        this.department = department;
    }

    public int getPosition() {
        return position;
    }

    public void setPosition(int position) {
        this.position = position;
    }

    public int getPower() {
        return power;
    }

    public void setPower(int power) {
        this.power = power;
    }
}

 

2.UserService

package cn.edu.ccut.bean;

import cn.edu.ccut.DB.DB;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class UserService {
    public List<User> getAllUsers() throws SQLException {
        DB db= DB.getInstance();
        ResultSet rs=db.executeQueryNoParam("select * from t_user");
        List<User> allUsers=new ArrayList<User>();
        User user;
        while (rs.next()){
            user=new User();
            user.setId(rs.getInt(1));
            user.setName(rs.getString(2));
            user.setSex(rs.getInt(3));
            user.setBirthday(rs.getDate(4));
            user.setDepartment(rs.getInt(5));
            user.setPosition(rs.getInt(6));
            user.setPower(rs.getInt(7));
            allUsers.add(user);
        }
        db.close();
        return allUsers;

    }
}

 

第五步：創建對應的UserServlet，使之獲取到屬性allUsers，並且可以跳轉到相對應的JSP頁面。

UserServlet

package cn.edu.ccut.servlet;



import cn.edu.ccut.bean.User;
import cn.edu.ccut.bean.UserService;

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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        UserService userservice=new UserService();
        try {
            List<User> allUsers = userservice.getAllUsers();
            HttpSession session=request.getSession();
            if(session==null){
                session=request.getSession(true);
            }
            session.setAttribute("users",allUsers);
            response.sendRedirect("table.jsp");
        } catch (SQLException e) {
            e.printStackTrace();
            response.sendRedirect("exception.jsp");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

 

第六步：對自己的Web項目添加JSTL(即JSP標准標簽庫)jar包，這個可以不加，但是這樣的話后面的scripts寫法有所改變而且比較復雜，為了簡便，用JSTL注解來寫邏輯和觀感都會好許多。

 

 

第七步：將自己中意的案例源碼放到相對應的JSP頁面，並對里面的靜態數據進行修改，使它可以動態訪問數據庫。（重要）ps：你問Echarts圖表為什么和剛開始的格式不一樣，當然是我改的呀,這樣更好看。

lineecharts

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/3/27
  Time: 13:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>


<div id="container" style="height: 100%"></div>                                             <%--//echarts圖表框架--%>





<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<script type="text/javascript">
    var arr = new Array();
    var index = 0;
    <c:forEach items="${sessionScope.users}" var="user" varStatus="s">
    arr[index++] = ${user.department};                                                  //echarts數組形式存儲柱體大小
    </c:forEach>

    var dom = document.getElementById("container");                                   //框架使用名稱
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    option = {
        backgroundColor: '#0E2A43',
        tooltip: {
            show: true,
            formatter: "{b}:{c}"
        },
        grid: {
            left: '5%',
            top: '12%',
            right: '1%',
            bottom: '8%',
            containLabel: true
        },

        xAxis: {
            type: 'category',
            axisTick: {
                show: false,
                alignWithLabel: false,
                length: 5,

            },
            "splitLine": { //網格線
                "show": false
            },
            inverse: 'true', //排序
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#fff',
                }
            },
            data: [                                                                                     //echarts下面顯示名稱
                <c:forEach items="${sessionScope.users}" var="username" varStatus="s">
                ["${username.name}"],
                </c:forEach>
            ]
        },
        yAxis: [{
            type: 'value',
            show:false,
            position: 'top',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#fff',
                }
            },
            splitLine: {
                show: false
            },
        }],
        series: [{
            name: '能耗值',
            type: 'bar',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}',
                    textStyle: {
                        color: 'white' //color of value
                    }
                }
            },
            itemStyle: {
                //通常情況下：
                normal: {
                    barBorderRadius: 8,
                    //每個柱子的顏色即為colorList數組里的每一項，如果柱子數目多於colorList的長度，則柱子顏色循環使用該數組
                    color: function (params) {
                        var colorList = [
                            ['#b250ff', 'rgba(11,42,84,.3)'],
                            ['#ff9717', 'rgba(11,42,84,.3)'],
                            ['#61dbe8', 'rgba(11,42,84,.3)'],
                            ['#1ace4a', 'rgba(11,42,84, 0.3)'],
                        ];
                        var index = params.dataIndex;
                        if (params.dataIndex >= colorList.length) {
                            index = params.dataIndex - colorList.length;
                        }
                        return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: colorList[index][0]
                            },
                                {
                                    offset: 1,
                                    color: colorList[index][1]
                                }
                            ]);
                    },
                },
            },
            barGap: '0%',
            barCategoryGap: '50%',
            data: arr                                                                               //使用上面定義存儲的數組
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>





</body>
</html>

注意：這個在使用各種標記庫里面的標記時，要先在JSP文件的頭部用<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>來注明對它的引用。（很重要，有次錯誤排除好久都找不出來，后來后知后覺才發現問題）

 

結果：

 

這樣，就可以看到在頁面里我們看到相對應的Echarts圖表顯示出來啦，是不是比起簡簡單單的表格要更為簡潔和直觀呢。

 

參考文檔：https://www.jianshu.com/p/1a2764b54f8b，謝謝各位大佬的幫助。