Home >Java >javaTutorial >How to use ECharts and Java interface to implement chart linkage statistical analysis

How to use ECharts and Java interface to implement chart linkage statistical analysis

WBOYOriginal: 2023-12-17 17:50:20735browse

ECharts是一款基于JavaScript的可视化图表库，它可以帮助我们轻松地创建各种各样的图表，如折线图、柱状图、饼图等等。而Java是一种非常流行的编程语言，它在企业级应用中被广泛使用。在本篇文章中，我们将介绍How to use ECharts and Java interface to implement chart linkage statistical analysis。

一、前置知识

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

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接口实现了图表联动统计分析，现在我们来运行一下本例，看看效果如何。

启动Java应用程序

在终端中，进入到Java工程所在的目录，并输入以下命令：

mvn spring-boot:run

在浏览器中打开HTML页面

在浏览器中输入http://localhost:8080即可打开我们编写的页面，并展示图表。

点击图表

我们可以点击图表来查看当前日期下的订单详情。

本文介绍了How to use ECharts and Java interface to implement chart linkage statistical analysis。我们在该示例中使用了Spring Boot来实现Java接口，并使用了ECharts来展示查询结果。在使用本文中的示例时，您需要根据您的实际需求进行适当修改。

The above is the detailed content of How to use ECharts and Java interface to implement chart linkage statistical analysis. For more information, please follow other related articles on the PHP Chinese website!

Java JavaScript spring spring boot css echarts html 接口 JS 数据库 http

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The combination of Java and WebSocket: how to achieve real-time video streamingNext article：The combination of Java and WebSocket: how to achieve real-time video streaming

See more

How to use ECharts and Java interface to implement chart linkage statistical analysis

Related articles