【Echarts教科书】Echarts数据统计图表的强大你了解过吗？

小哥哥，小姐姐们容我再打一波小广告，我打算用几年时间去做一份关于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();
    }
}

页面显示效果

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

【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

页面显示效果

小米商城（Servlet+JSP）

【Filter教科書】Filter過濾器技術總結（Filter實現自動登錄、過濾髒詞功能等）

【Echarts教科書】Echarts數據統計圖表教學（詳細）

Javadoc生成的詳細操作教程

秒懂系列，深入理解Java反射機制

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結