小哥哥,小姐姐們容我再打一波小廣告,我打算用幾年時間去做一份關於Java學習、面試、進階的GitHub項目。
目前剛剛整理好JavaSE基礎內容,我將陸續的整理好JavaWeb階段以及框架知識體系,並添加完善到GitHub中,所以我希望大家能到我的GitHub給上一個Star !現在我的GitHub雖然還沒有完善多少技術文章,但是在幾個月後,我的GitHub也會陸續成爲一個完整的Java學習體系!
記得說好的Star哦!
GitHub地址: https://github.com/Ziphtracks/JavaLearningmanual
一、什麼是Echarts?
ECharts 是一款由百度前端技術部開發的,基於 Javascript 的數據可視化圖表庫,提供直 觀,生動,可交互,可個性化定製的數據可視化圖表。
二、Echarts的下載
Echarts官網下載地址:https://echarts.apache.org/zh/index.html
三、Echarts的開發步驟
3.1 Echarts的引入
將Echarts引入到項目中,其實官方就給瞭解釋。可以點擊5分鐘上手Echarts進入。這裏通過標籤引入打包下載好的Echarts。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
3.2 Echarts入門案例步驟
- 引入Echarts文件
- 爲 ECharts 準備一個具備高寬的DOM容器
- 初始化一個echarts實例
- 指定你所需要圖的配置項和數據
- 通過 setOption 方法生成一個簡單的柱狀圖
<%--
Created by IntelliJ IDEA.
User: Ziph
Date: 2020/5/19
Time: 13:22
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>echarts入門</title>
<%--1.引入echarts.js--%>
<script src="echarts/echarts.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
/*3.初始化echarts容器*/
var eCharts = echarts.init(document.getElementById("main"));
/*4.設定echarts屬性*/
eCharts.setOption({
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
</script>
</head>
<body>
<%--2.設定一個具有寬高的echarts容器--%>
<div id="main" style="width: 1000px;height: 400px">
</div>
</body>
</html>
四、Echarts官方文檔的使用
關於Echarts的使用,我們必須學會查看Echarts的官方文檔,這裏我給大家介紹一下官方文檔的常用操作。
4.1 5分鐘上手教程
5分鐘上手教程就是新手教程了!
4.2 API
可以根據API查詢在使用Echarts時的語法!可以根據語法來操作Echarts圖表!
4.3 官方實例
可以根據官方實例,找到並修改自己想要的圖表,最後粘貼複製到自己的項目中使用即可!
五、Echarts與服務器的交互
5.1 爲什麼Echarts圖表要與服務器交互?
我們在使用Echarts的時候,在頁面中是寫死的圖標信息。但是當我們真正的用於開發時,圖表的信息就必須保證動態的顯示週期內統計的數據信息。這時候我們就必須使用數據庫來存儲信息,使得數據動態的顯示。
5.2 Echarts與服務器交互的實現
項目結構
所需jar包
LineChart.jsp頁面
<%--
Created by IntelliJ IDEA.
User: Ziph
Date: 2020/5/19
Time: 13:34
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>echarts折線圖</title>
<script src="echarts/echarts.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
var eCharts = echarts.init(document.getElementById("main"));
$.get("${pageContext.request.contextPath}/LineChart", {}, function (data) {
var option = {
title: {
text: '賣家週記錄'
},
xAxis: {
name: 'weeks',
type: 'category',
data: data.weekList
},
yAxis: {
name: '銷量/件',
type: 'value'
},
series: [{
data: data.saleList,
type: 'line',
}]
};
eCharts.setOption(option);
}, "json");
});
</script>
</head>
<body>
<div id="main" style="width: 1000px;height: 400px"></div>
</body>
</html>
Sale實體類
package com.mylifes1110.java.bean;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Sale {
//使用的Lombok插件,大家也可以自行生成所需的get/set方法、toString方法等
private Integer id;
private Integer sales;
private String week;
}
c3p0.properties配置文件
c3p0.driverClass=com.mysql.jdbc.Driver
c3p0.jdbcUrl=jdbc:mysql://localhost:3306/temp
c3p0.user=root
c3p0.password=123456
DBUtils連接池工具類
package com.mylifes1110.java.utils;
import com.mchange.v2.c3p0.ComboPooledDataSource;
/**
* c3p0工具類
*/
public class DBUtils {
private static ComboPooledDataSource dataSource;
static {
dataSource = new ComboPooledDataSource();
}
public static ComboPooledDataSource getDataSource() {
return dataSource;
}
}
Jackson解析工具類
package com.mylifes1110.java.utils;
import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
* Jackson工具類
*/
public class JSONUtils {
/**
* 將Java對象轉換爲JSON字符串
*
* @param o Java對象
* @return JSON字符串
* @throws JsonProcessingException
*/
public static String toJsonStr(Object o) throws JsonProcessingException {
return new ObjectMapper().writeValueAsString(o);
}
/**
* 將JSON字符串相應到瀏覽器
*
* @param response 響應對象
* @param o Java對象
* @throws IOException
*/
public static void writeJsonStr(HttpServletResponse response, Object o) throws IOException {
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(toJsonStr(o));
}
}
LineChartServlet
package com.mylifes1110.java.controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
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.mylifes1110.java.bean.Sale;
import com.mylifes1110.java.service.SaleService;
import com.mylifes1110.java.service.impl.SaleServiceImpl;
import com.mylifes1110.java.utils.JSONUtils;
import lombok.SneakyThrows;
@WebServlet(
name = "LineChartServlet",
value = "/LineChart"
)
public class LineChartServlet extends HttpServlet {
@SneakyThrows
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
SaleService saleService = new SaleServiceImpl();
List<Sale> sales = saleService.selectSalesList();
List<Integer> saleList = new ArrayList<>();
List<String> weekList = new ArrayList<>();
for (Sale sale : sales) {
saleList.add(sale.getSales());
weekList.add(sale.getWeek());
}
Map<String, Object> map = new HashMap<>();
map.put("weekList", weekList);
map.put("saleList", saleList);
JSONUtils.writeJsonStr(response, map);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
SaleDao
package com.mylifes1110.java.dao;
import com.mylifes1110.java.bean.Sale;
import java.sql.SQLException;
import java.util.List;
public interface SaleDao {
List<Sale> selectSalesList() throws SQLException;
}
SaleDaoImpl
package com.mylifes1110.java.dao.impl;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import com.mylifes1110.java.bean.Sale;
import com.mylifes1110.java.dao.SaleDao;
import com.mylifes1110.java.utils.DBUtils;
public class SaleDaoImpl implements SaleDao {
@Override
public List<Sale> selectSalesList() throws SQLException {
return new QueryRunner(DBUtils.getDataSource()).query("select * from tb_sales ",
new BeanListHandler<Sale>(Sale.class));
}
}
SaleService
package com.mylifes1110.java.service;
import com.mylifes1110.java.bean.Sale;
import java.sql.SQLException;
import java.util.List;
public interface SaleService {
List<Sale> selectSalesList() throws SQLException;
}
SaleServiceImpl
package com.mylifes1110.java.service.impl;
import com.mylifes1110.java.bean.Sale;
import com.mylifes1110.java.dao.SaleDao;
import com.mylifes1110.java.dao.impl.SaleDaoImpl;
import com.mylifes1110.java.service.SaleService;
import java.sql.SQLException;
import java.util.List;
public class SaleServiceImpl implements SaleService {
private SaleDao saleDao = new SaleDaoImpl();
@Override
public List<Sale> selectSalesList() throws SQLException {
return saleDao.selectSalesList();
}
}
頁面顯示效果
這樣我們就可以修改數據庫,及時、動態的設計到服務器中顯示數據圖表統計信息了!