页面引入多个echarts_JavaWeb之Echarts数据统计图表详细教程

一、什么是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: ZiphDate: 2020/5/19Time: 13:22To 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: ZiphDate: 2020/5/19Time: 13:34To 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@Overrideprotected 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);}
@Overrideprotected 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 {@Overridepublic 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();@Overridepublic List<Sale> selectSalesList() throws SQLException {return saleDao.selectSalesList();}
}

页面显示效果

这样我们就可以修改数据库，及时、动态的设计到服务器中显示数据图表统计信息了！

页面引入多个echarts_JavaWeb之Echarts数据统计图表详细教程相关推荐

python Flask框架如何请求及返回数据——flask详细教程
python Flask框架如何请求及返回数据--flask详细教程文章目录: 1 Flask介绍 1.1 Flask简单介绍 1.2 Flask相关资料信息 2 Flask快速入门 2.1 Fla ...
在matlab中导入excel,Matlab导入Excel文件中的数据的详细教程分享
操作Matlab时还不会导入Excel文件中的数据?本文就介绍了Matlab导入Excel文件中的数据的操作内容,想要学习的朋友可以看一看下文哦,相信对大家会有所帮助的. 直接点击鼠标操作导入数据打 ...
【中科微北斗+GPS模块经纬度数据解析详细教程-附免费代码工程】
中科微北斗+GPS模块经纬度数据解析详细教程-附免费代码工程简介准备工作 PC端需要用到的工具代码下载地址 GD32F103C8T6最小系统板代码实现 GD32串口引脚定义如下: 串口的初始化 ...
【Echarts教科书】Echarts数据统计图表教学（详细）
文章目录一.什么是Echarts? 二.Echarts的下载三.Echarts的开发步骤 3.1 Echarts的引入 3.2 Echarts入门案例步骤四.Echarts官方文档的使用 4.1 ...
英雄联盟LPL比赛数据可视化详细教程,可视化的魅力,你值得拥有!!!
LPL比赛数据可视化完成这个项目,我感觉我已经被掏空了,我几乎用尽了我会的所有知识 html+css+javascript+jQuery+python+requests+numpy+mysql+py ...
python学得好牢饭_英雄联盟LPL比赛数据可视化详细教程,可视化的魅力,你值得拥有!!!...
LPL比赛数据可视化完成这个项目,我感觉我已经被掏空了,我几乎用尽了我会的所有知识 html+css+javascript+jQuery+python+requests+numpy+mysql+py ...
echarts入门（详细教程）
一.echarts的介绍 1.echarts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.ECharts最初由百度团队开源,并于2018年初捐 ...
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...
基于学术研究于NASA官网GPM卫星数据下载详细教程
目录一.相关网址 1.用户注册网址:(点我) 2.数据下载主页:https://disc.gsfc.nasa.gov 3.其他相关网址二.下载数据步骤 1.首先注册账户,只有登录账户后,才能下载搜 ...

页面引入多个echarts_JavaWeb之Echarts数据统计图表详细教程

二、Echarts的下载

三、Echarts的开发步骤

3.1 Echarts的引入

3.2 Echarts入门案例步骤

四、Echarts官方文档的使用

4.1 5分钟上手教程

4.2 API

4.3 官方实例

五、Echarts与服务器的交互

5.1 为什么Echarts图表要与服务器交互？

5.2 Echarts与服务器交互的实现

项目结构

所需jar包

LineChart.jsp页面

Sale实体类

c3p0.properties配置文件

DBUtils连接池工具类

Jackson解析工具类

LineChartServlet

SaleDao

SaleDaoImpl

SaleService

SaleServiceImpl

页面显示效果

页面引入多个echarts_JavaWeb之Echarts数据统计图表详细教程相关推荐

最新文章

热门文章