【Echarts教科书】教你如何使用具有强大的数据统计图表功能的Echarts
程序员文章站
2022-04-24 12:38:36
...
小哥哥，小姐姐们容我再打一波小广告，我打算用几年时间去做一份关于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();
}
}
页面显示效果
这样我们就可以修改数据库，及时、动态的设计到服务器中显示数据图表统计信息了！
下一篇： 入门MyBatis你一点都不需要慌