如何利用ECharts和Java接口实现图表联动统计分析-java教程-PHP中文网

如何利用ECharts和Java接口实现图表联动统计分析

ECharts是一款基于JavaScript的可视化图表库，它可以帮助我们轻松地创建各种各样的图表，如折线图、柱状图、饼图等等。而Java是一种非常流行的编程语言，它在企业级应用中被广泛使用。在本篇文章中，我们将介绍如何利用ECharts和Java接口实现图表联动统计分析。

一、前置知识

在学习本文之前，需要了解以下基础知识：

HTML、CSS、JavaScript的基础知识
Java开发基础知识，如Spring Boot
ECharts的基础知识，如ECharts基础配置、ECharts数据格式等等。

二、准备工作

安装ECharts

ECharts官网上提供了下载链接，我们可以直接下载ECharts并使用。

创建Java工程

我们可以使用Spring Boot创建一个简单的Java工程。

三、数据准备

我们在使用ECharts和Java接口实现图表联动统计分析之前，需要准备好需要使用的数据。在本文中，我们使用一个简单的示例。

假设我们有两个数据表，一个是订单表，一个是订单详情表。订单表中存储了订单的基本信息，如订单号、订单金额、订单日期等等。订单详情表中存储了订单中商品的详细信息，如商品名称、数量、单价等等。

现在我们想要统计每天的订单数量和订单总金额。我们可以按照以下步骤来处理数据：

根据订单表中的订单日期，按照天进行分组。
对每一天的订单号进行查询，计算每天的订单数量。
对每一天的订单金额进行查询，计算每天的订单总金额。

四、后端实现

创建Java实体类

我们需要创建Java实体类来表示数据表中的数据。在本文中，我们需要创建两个Java实体类：Order和OrderItem。

@Entity
@Table(name = "t_order")
public class Order {
 
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
 
    @Column(name = "order_no")
    private String orderNo;
 
    @Column(name = "order_amount")
    private BigDecimal orderAmount;
 
    @Column(name = "order_date")
    private LocalDate orderDate;
 
    // getter、setter方法
 
}

登录后复制

@Entity
@Table(name = "t_order_item")
public class OrderItem {
 
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
 
    @Column(name = "order_id")
    private Long orderId;
 
    @Column(name = "product_name")
    private String productName;
 
    @Column(name = "product_price")
    private BigDecimal productPrice;
 
    @Column(name = "product_quantity")
    private Integer productQuantity;
 
    // getter、setter方法
 
}

登录后复制

创建Java接口

我们需要创建一个Java接口来暴露查询数据的接口，并返回给前端查询结果。在本例中，我们可以创建一个接口OrderService，并添加两个方法：getOrderCountByDate和getOrderAmountByDate。分别用来查询每天的订单数量和订单总金额。

public interface OrderService {
 
    List<Map<String, Object>> getOrderCountByDate();
 
    List<Map<String, Object>> getOrderAmountByDate();
 
}

登录后复制

实现Java接口

我们在实现接口的时候，需要使用Spring JPA来操作数据库。在getOrderCountByDate方法中，我们需要进行分组查询，统计每天的订单数量。在getOrderAmountByDate方法中，我们需要进行分组查询，统计每天的订单总金额。

@Service
public class OrderServiceImpl implements OrderService {
 
    @PersistenceContext
    private EntityManager em;
 
    @Override
    public List<Map<String, Object>> getOrderCountByDate() {
        String sql = "SELECT order_date, COUNT(*) AS order_count FROM t_order GROUP BY order_date";
        Query query = em.createNativeQuery(sql);
        List<Object[]> list = query.getResultList();
        List<Map<String, Object>> result = new ArrayList<>(list.size());
        for (Object[] array : list) {
            Map<String, Object> map = new HashMap<>();
            map.put("orderDate", array[0]);
            map.put("orderCount", array[1]);
            result.add(map);
        }
        return result;
    }
 
    @Override
    public List<Map<String, Object>> getOrderAmountByDate() {
        String sql = "SELECT order_date, SUM(order_amount) AS order_amount FROM t_order GROUP BY order_date";
        Query query = em.createNativeQuery(sql);
        List<Object[]> list = query.getResultList();
        List<Map<String, Object>> result = new ArrayList<>(list.size());
        for (Object[] array : list) {
            Map<String, Object> map = new HashMap<>();
            map.put("orderDate", array[0]);
            map.put("orderAmount", array[1]);
            result.add(map);
        }
        return result;
    }
 
}

登录后复制

四、前端实现

创建HTML页面

我们需要创建一个HTML页面，用来展示ECharts图表。在本文中，我们创建一个简单的HTML页面，该页面包含两个ECharts图表：orderCountChart和orderAmountChart。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts Demo</title>
</head>
<body>
 
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
 
<script src="echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="db.js"></script>
 
<script>
    $(function () {
        getOrderCountByDate();
        getOrderAmountByDate();
    });
 
    function getOrderCountByDate() {
        $.ajax({
            url: '/api/orders/countByDate',
            type: 'GET',
            success: function (data) {
                var orderCountChart = echarts.init(document.getElementById('main1'));
                var option = {
                    title: {
                        text: '订单数量'
                    },
                    tooltip: {},
                    xAxis: {
                        data: data.map(function (item) {
                            return item.orderDate;
                        })
                    },
                    yAxis: {},
                    series: [{
                        name: '订单数量',
                        type: 'bar',
                        data: data.map(function (item) {
                            return item.orderCount;
                        })
                    }]
                };
                orderCountChart.setOption(option);
                orderCountChart.on('click', function (params) {
                    getOrderItemsByDate(params.name);
                });
            }
        });
    }
 
    function getOrderAmountByDate() {
        $.ajax({
            url: '/api/orders/amountByDate',
            type: 'GET',
            success: function (data) {
                var orderAmountChart = echarts.init(document.getElementById('main2'));
                var option = {
                    title: {
                        text: '订单金额'
                    },
                    tooltip: {},
                    xAxis: {
                        data: data.map(function (item) {
                            return item.orderDate;
                        })
                    },
                    yAxis: {},
                    series: [{
                        name: '订单金额',
                        type: 'bar',
                        data: data.map(function (item) {
                            return item.orderAmount;
                        })
                    }]
                };
                orderAmountChart.setOption(option);
                orderAmountChart.on('click', function (params) {
                    getOrderItemsByDate(params.name);
                });
            }
        });
    }
 
    function getOrderItemsByDate(orderDate) {
        console.log('Order date:', orderDate);
    }
 
</script>
 
</body>
</html>

登录后复制

创建JavaScript文件

我们需要创建一个JavaScript文件，用来调用Java接口，并使用ECharts来展示查询结果。在本文中，我们创建一个名为db.js的JavaScript文件，包含两个函数：getOrderCountByDate和getOrderAmountByDate。这两个函数分别用来查询每天的订单数量和订单总金额并展示在ECharts图表中。

function getOrderCountByDate() {
    $.ajax({
        url: '/api/orders/countByDate',
        type: 'GET',
        success: function (data) {
            var orderCountChart = echarts.init(document.getElementById('main1'));
            var option = {
                title: {
                    text: '订单数量'
                },
                tooltip: {},
                xAxis: {
                    data: data.map(function (item) {
                        return item.orderDate;
                    })
                },
                yAxis: {},
                series: [{
                    name: '订单数量',
                    type: 'bar',
                    data: data.map(function (item) {
                        return item.orderCount;
                    })
                }]
            };
            orderCountChart.setOption(option);
            orderCountChart.on('click', function (params) {
                getOrderItemsByDate(params.name);
            });
        }
    });
}
 
function getOrderAmountByDate() {
    $.ajax({
        url: '/api/orders/amountByDate',
        type: 'GET',
        success: function (data) {
            var orderAmountChart = echarts.init(document.getElementById('main2'));
            var option = {
                title: {
                    text: '订单金额'
                },
                tooltip: {},
                xAxis: {
                    data: data.map(function (item) {
                        return item.orderDate;
                    })
                },
                yAxis: {},
                series: [{
                    name: '订单金额',
                    type: 'bar',
                    data: data.map(function (item) {
                        return item.orderAmount;
                    })
                }]
            };
            orderAmountChart.setOption(option);
            orderAmountChart.on('click', function (params) {
                getOrderItemsByDate(params.name);
            });
        }
    });
}

登录后复制

五、运行示例

我们使用ECharts和Java接口实现了图表联动统计分析，现在我们来运行一下本例，看看效果如何。