首頁 > 文章 > Java > 如何利用ECharts和Java介面實現圖表連動統計分析

如何利用ECharts和Java介面實現圖表連動統計分析

WBOY原創: 2023-12-17 17:50:20622瀏覽

如何利用ECharts和Java介面實作圖表連動統計分析

ECharts是一款基於JavaScript的視覺化圖表庫，它可以幫助我們輕鬆地建立各種各樣的圖表，如折線圖、長條圖、圓餅圖等等。而Java是一種非常流行的程式語言，它在企業級應用中被廣泛使用。在本篇文章中，我們將介紹如何利用ECharts和Java介面實現圖表連動統計分析。

一、前知識

在學習本文之前，需要先了解以下基礎：

HTML、CSS、JavaScript的基礎知識
Java開發基礎知識，如Spring Boot
ECharts的基礎知識，如ECharts基礎配置、ECharts資料格式等等。

2、準備工作

安裝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即可開啟我們所寫的頁面，並展示圖表。

點擊圖表

我們可以點擊圖表來查看目前日期下的訂單詳情。

本文介紹如何利用ECharts和Java介面實現圖表連動統計分析。我們在該範例中使用了Spring Boot來實作Java接口，並使用了ECharts來展示查詢結果。在使用本文中的範例時，您需要根據您的實際需求進行適當修改。

以上是如何利用ECharts和Java介面實現圖表連動統計分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Java和WebSocket的結合：如何實現即時視訊串流播放下一篇：Java和WebSocket的結合：如何實現即時視訊串流播放

看更多