欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【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教科书】教你如何使用具有强大的数据统计图表功能的Echarts

【Echarts教科书】教你如何使用具有强大的数据统计图表功能的Echarts

三、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官方文档的使用

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

4.1 5分钟上手教程

5分钟上手教程就是新手教程了!

【Echarts教科书】教你如何使用具有强大的数据统计图表功能的Echarts

4.2 API

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

【Echarts教科书】教你如何使用具有强大的数据统计图表功能的Echarts

4.3 官方实例

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

【Echarts教科书】教你如何使用具有强大的数据统计图表功能的Echarts

【Echarts教科书】教你如何使用具有强大的数据统计图表功能的Echarts

五、Echarts与服务器的交互

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

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

5.2 Echarts与服务器交互的实现

项目结构

【Echarts教科书】教你如何使用具有强大的数据统计图表功能的Echarts

所需jar包

【Echarts教科书】教你如何使用具有强大的数据统计图表功能的Echarts

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