echarts搭配MySQL_Echarts连接Mysql使用心得
Echarts是什么，它一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器，底層依賴矢量圖形庫(kù)?ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。
它可以輕易的作出類似這樣：
或這樣的美觀可視化圖：
當(dāng)別人在使用各種圖來表示各項(xiàng)數(shù)據(jù)之間的聯(lián)系時(shí)，我還在使用Low到爆的表格那種用戶體驗(yàn)感受屬實(shí)不太妙。可視化圖相較于表格那一行一行數(shù)據(jù)，在直觀方面不知優(yōu)出幾個(gè)檔次。但是echarts開源庫(kù)的使用在小白的我看來一直是一個(gè)難點(diǎn)，看了很多別人的文檔還是不懂如何使用。但是這兩天，我仔細(xì)找了各種項(xiàng)目和向大佬尋求幫助，總算是能成功的顯示一個(gè)丑丑的圖來，這也算是一個(gè)進(jìn)步吧。好，下面開始我自己的使用教程。
第一步：先找到自己想要的可視化圖模板，并下載簡(jiǎn)單的案例。比如像我下圖這個(gè)就挺不錯(cuò)的。
第二步：建立數(shù)據(jù)庫(kù)，并填入相對(duì)應(yīng)的數(shù)據(jù)，比如想我這個(gè)這樣。
第三步：對(duì)自己的Web項(xiàng)目添加鏈接數(shù)據(jù)庫(kù)的jar包，并且在DB里面建立連接。
第四步：建立對(duì)應(yīng)數(shù)據(jù)庫(kù)的數(shù)據(jù)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 classUserService {public ListgetAllUsers() throws SQLException {
DB db=DB.getInstance();
ResultSet rs=db.executeQueryNoParam("select * from t_user");
List allUsers=new ArrayList();
User user;while(rs.next()){
user=newUser();
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();returnallUsers;
}
}
第五步：創(chuàng)建對(duì)應(yīng)的UserServlet，使之獲取到屬性allUsers，并且可以跳轉(zhuǎn)到相對(duì)應(yīng)的JSP頁(yè)面。
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 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);
}
}
第六步：對(duì)自己的Web項(xiàng)目添加JSTL(即JSP標(biāo)準(zhǔn)標(biāo)簽庫(kù))jar包，這個(gè)可以不加，但是這樣的話后面的scripts寫法有所改變而且比較復(fù)雜，為了簡(jiǎn)便，用JSTL注解來寫邏輯和觀感都會(huì)好許多。
第七步：將自己中意的案例源碼放到相對(duì)應(yīng)的JSP頁(yè)面，并對(duì)里面的靜態(tài)數(shù)據(jù)進(jìn)行修改，使它可以動(dòng)態(tài)訪問數(shù)據(jù)庫(kù)。(重要)ps：你問Echarts圖表為什么和剛開始的格式不一樣，當(dāng)然是我改的呀,這樣更好看。
lineecharts
User: Administrator
Date:2020/3/27Time:13:58To changethis template use File | Settings |File Templates.--%>
Titlevar arr = newArray();var index = 0;arr[index++] = ${user.department}; //echarts數(shù)組形式存儲(chǔ)柱體大小
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": { //網(wǎng)格線
"show": false},
inverse:'true', //排序
axisLine: {
show:false,
lineStyle: {
color:'#fff',
}
},
data: [//echarts下面顯示名稱
["${username.name}"],]
},
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,//每個(gè)柱子的顏色即為colorList數(shù)組里的每一項(xiàng)，如果柱子數(shù)目多于colorList的長(zhǎng)度，則柱子顏色循環(huán)使用該數(shù)組
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//使用上面定義存儲(chǔ)的數(shù)組
}]
};if (option && typeof option === "object") {
myChart.setOption(option,true);
}
注意：這個(gè)在使用各種標(biāo)記庫(kù)里面的標(biāo)記時(shí)，要先在JSP文件的頭部用來注明對(duì)它的引用。(很重要，有次錯(cuò)誤排除好久都找不出來，后來后知后覺才發(fā)現(xiàn)問題)
結(jié)果：
這樣，就可以看到在頁(yè)面里我們看到相對(duì)應(yīng)的Echarts圖表顯示出來啦，是不是比起簡(jiǎn)簡(jiǎn)單單的表格要更為簡(jiǎn)潔和直觀呢。
總結(jié)
以上是生活随笔為你收集整理的echarts搭配MySQL_Echarts连接Mysql使用心得的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python中keyboardinter
- 下一篇： 什么是股票板块 股票板块的热点判断