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

末蓝、 2023-02-13 08:05 11阅读 0赞

### 文章目录 ###

*   *   *  一、什么是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][https_github.com_Ziphtracks_JavaLearningmanual]

--------------------

### 一、什么是Echarts？ ###

> ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直 观，生动，可交互，可个性化定制的数据可视化图表。

### 二、Echarts的下载 ###

> Echarts官网下载地址：[https://echarts.apache.org/zh/index.html][https_echarts.apache.org_zh_index.html]

![image-20200527211614311][]

![image-20200527211643984][]

### 三、Echarts的开发步骤 ###

#### 3.1 Echarts的引入 ####

> 将Echarts引入到项目中，其实官方就给了解释。可以点击5分钟上手Echarts进入。这里通过标签引入打包下载好的Echarts。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        
        <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>

![image-20200527212304163][]

### 四、Echarts官方文档的使用 ###

> 关于Echarts的使用，我们必须学会查看Echarts的官方文档，这里我给大家介绍一下官方文档的常用操作。

#### 4.1 5分钟上手教程 ####

> 5分钟上手教程就是新手教程了！

![image-20200527212635138][]

#### 4.2 API ####

> 可以根据API查询在使用Echarts时的语法！可以根据语法来操作Echarts图表！

![image-20200527212909621][]

#### 4.3 官方实例 ####

> 可以根据官方实例，找到并修改自己想要的图表，最后粘贴复制到自己的项目中使用即可！

![image-20200527213152126][]

![image-20200527213324952][]

### 五、Echarts与服务器的交互 ###

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

> 我们在使用Echarts的时候，在页面中是写死的图标信息。但是当我们真正的用于开发时，图表的信息就必须保证动态的显示周期内统计的数据信息。这时候我们就必须使用数据库来存储信息，使得数据动态的显示。

#### 5.2 Echarts与服务器交互的实现 ####

###### 项目结构 ######

![image-20200527214007747][]

###### 所需jar包 ######

![image-20200527214212198][]

###### 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();
        }
    }

###### 页面显示效果 ######

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

![image-20200527214852992][]

[https_github.com_Ziphtracks_JavaLearningmanual]: https://github.com/Ziphtracks/JavaLearningmanual
[https_echarts.apache.org_zh_index.html]: https://echarts.apache.org/zh/index.html
[image-20200527211614311]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vWmlwaHRyYWNrcy9GaWd1cmViZWQvcmF3L21hc3Rlci9pbWcvMjAyMDA1MjcyMTE2MTUucG5n?x-oss-process=image/format,png
[image-20200527211643984]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vWmlwaHRyYWNrcy9GaWd1cmViZWQvcmF3L21hc3Rlci9pbWcvMjAyMDA1MjcyMTE2NDUucG5n?x-oss-process=image/format,png
[image-20200527212304163]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vWmlwaHRyYWNrcy9GaWd1cmViZWQvcmF3L21hc3Rlci9pbWcvMjAyMDA1MjcyMTIzMDYucG5n?x-oss-process=image/format,png
[image-20200527212635138]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vWmlwaHRyYWNrcy9GaWd1cmViZWQvcmF3L21hc3Rlci9pbWcvMjAyMDA1MjcyMTI2MzcucG5n?x-oss-process=image/format,png
[image-20200527212909621]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vWmlwaHRyYWNrcy9GaWd1cmViZWQvcmF3L21hc3Rlci9pbWcvMjAyMDA1MjcyMTI5MTEucG5n?x-oss-process=image/format,png
[image-20200527213152126]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vWmlwaHRyYWNrcy9GaWd1cmViZWQvcmF3L21hc3Rlci9pbWcvMjAyMDA1MjcyMTMxNTUucG5n?x-oss-process=image/format,png
[image-20200527213324952]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vWmlwaHRyYWNrcy9GaWd1cmViZWQvcmF3L21hc3Rlci9pbWcvMjAyMDA1MjcyMTMzMjYucG5n?x-oss-process=image/format,png
[image-20200527214007747]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vWmlwaHRyYWNrcy9GaWd1cmViZWQvcmF3L21hc3Rlci9pbWcvMjAyMDA1MjcyMTQwMDkucG5n?x-oss-process=image/format,png
[image-20200527214212198]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vWmlwaHRyYWNrcy9GaWd1cmViZWQvcmF3L21hc3Rlci9pbWcvMjAyMDA1MjcyMTQyMTQucG5n?x-oss-process=image/format,png
[image-20200527214852992]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vWmlwaHRyYWNrcy9GaWd1cmViZWQvcmF3L21hc3Rlci9pbWcvMjAyMDA1MjcyMTQ4NTQucG5n?x-oss-process=image/format,png