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

独自空忆成欢 提交于 2020-08-13 16:01:41

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

image-20200527211614311

image-20200527211643984

三、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>

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!