【Echarts教科书】Echarts数据统计图表教学（详细）

文章目录

一、什么是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
  - 页面显示效果

小哥哥，小姐姐们容我再打一波小广告，我打算用几年时间去做一份关于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: 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教科书】Echarts数据统计图表教学（详细）相关推荐

页面引入多个echarts_JavaWeb之Echarts数据统计图表详细教程
一.什么是Echarts? ECharts 是一款由百度前端技术部开发的,基于 Javascript 的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. 二.Echarts的 ...
ECharts实现数据可视化超详细基础入门教程
ECharts实现数据可视化超详细基础入门教程 ECharts介绍 ECharts官网:https://echarts.apache.org/zh/index.html ECharts是一款基于Jav ...
echarts tab切换_Python 数据可视化实战：使用 PyQt5 和 Echarts 打造股票数据看板
月小水长一个编码者.思考者在一篇论文中,最吸引审稿人目光的莫过于枯燥的文字间精美的图表在一份项目路演ppt 中,酷炫的财务报表往往是打动投资人的最后一剂强心剂作为数据分析最后也是最直接的一环,数据可视 ...
基于VUE + Echarts 实现可视化数据大屏展示效果
中国(寿光)国际蔬菜科技博览会智慧农业系统 - LED拼接屏展示前端开发文档上线后呈现效果: 一.开发需求及方案制定 1.确定现场led拼接屏的宽高比,按照1920px*1080px的分辨率,F11 ...
vue+echarts中国地图数据可视化展示
1.效果展示 2.步骤: 2.1.在main.js文件中加入 //引入echartsimport * as echarts from "echarts";Vue.prototype ...
在Vue中使用Echarts地图以及数据展示
效果图如下(东营市地图) 1.地图显示首先要获取该地区的JSON数据,网站:DATAV.GeoAtolas,逐步选择地图区域,然后复制数据到本地另存为dy.json. 直接上代码了,添加了详细备注 ...
基于 Echarts 实现可视化数据大屏展示(150套)
基于 Echarts 实现可视化数据大屏展示(150套) 基于 Echarts 实现可视化数据大屏响应式展示效果的源码, 代码质量高,可以在此基础上重新开发. 作品介绍 1.网页作品简介方面 :本项目 ...
“大数据时代下的地理信息可视化：ECharts地图和数据面板实践“
数据可视化是一种数据分析技术,它通过将数据转化为图形或图表等可视化方式,以便更好地理解和解释数据.在实际应用中,数据可视化被广泛用于数据监控.业务分析.决策支持等领域.而ECharts是一款优秀的数据 ...
python制作股票图表怎么看_Python 数据可视化实战：使用 PyQt5 和 Echarts 打造股票数据看板...
在一篇论文中,最吸引审稿人目光的莫过于枯燥的文字间精美的图表在一份项目路演 ppt 中,酷炫的财务报表往往是打动投资人的最后一剂强心剂作为数据分析最后也是最直接的一环,数据可视化的重要性不言而喻 ...

【Echarts教科书】Echarts数据统计图表教学（详细）

文章目录

一、什么是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教科书】Echarts数据统计图表教学（详细）相关推荐

最新文章

热门文章