So verwenden Sie ECharts und die Java-Schnittstelle, um eine statistische Diagrammverknüpfungsanalyse zu implementieren

So verwenden Sie ECharts und die Java-Schnittstelle, um eine statistische Analyse der Diagrammverknüpfung zu implementieren

ECharts ist eine visuelle Diagrammbibliothek auf Basis von JavaScript, mit der wir auf einfache Weise eine Vielzahl von Diagrammen erstellen können, z. B. Liniendiagramme, Balkendiagramme und Kreisdiagramme Diagramme. Bilder usw. Java ist eine sehr beliebte Programmiersprache, die in Unternehmensanwendungen weit verbreitet ist. In diesem Artikel stellen wir vor, wie ECharts und Java-Schnittstellen zur Implementierung einer statistischen Diagrammverknüpfungsanalyse verwendet werden.

1. Vorkenntnisse

Bevor Sie diesen Artikel studieren, müssen Sie die folgenden Grundkenntnisse kennen:

1. Grundkenntnisse in HTML, CSS, JavaScript
2. Grundkenntnisse in der Java-Entwicklung, z. B. Spring Boot
3. Grundkenntnisse in ECharts, wie ECharts-Grundkonfiguration, ECharts-Datenformat usw.

2. Vorbereitung

1. Installieren Sie ECharts

Die offizielle Website von ECharts bietet einen Download-Link, wir können ECharts direkt herunterladen und verwenden.

2. Java-Projekt erstellen

Wir können Spring Boot verwenden, um ein einfaches Java-Projekt zu erstellen.

3. Datenvorbereitung

Bevor wir ECharts und die Java-Schnittstelle verwenden, um eine statistische Diagrammverknüpfungsanalyse zu implementieren, müssen wir die zu verwendenden Daten vorbereiten. In diesem Artikel verwenden wir ein einfaches Beispiel.

Angenommen, wir haben zwei Datentabellen, eine ist die Bestelltabelle und die andere ist die Bestelldetailtabelle. In der Bestelltabelle werden die grundlegenden Informationen der Bestellung gespeichert, z. B. Bestellnummer, Bestellmenge, Bestelldatum usw. In der Bestelldetailtabelle werden detaillierte Informationen zu den Produkten in der Bestellung gespeichert, z. B. Produktname, Menge, Stückpreis usw.

Jetzt wollen wir die tägliche Bestellmenge und die Gesamtbestellmenge zählen. Wir können die folgenden Schritte ausführen, um die Daten zu verarbeiten:

1. Gruppierung nach Tag basierend auf dem Bestelldatum in der Bestelltabelle.
2. Fragen Sie die Bestellnummer jedes Tages ab und berechnen Sie die tägliche Bestellmenge.
3. Fragen Sie die Bestellmenge für jeden Tag ab und berechnen Sie die Gesamtbestellmenge für jeden Tag.

4. Backend-Implementierung

1. Erstellen Sie Java-Entitätsklassen

Wir müssen Java-Entitätsklassen erstellen, um die Daten in der Datentabelle darzustellen. In diesem Artikel müssen wir zwei Java-Entitätsklassen erstellen: Order und 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方法
 
}

2. Java-Schnittstelle erstellen

Wir müssen eine Java-Schnittstelle erstellen, um die Schnittstelle zum Abfragen von Daten verfügbar zu machen und die Abfrageergebnisse an das Front-End zurückzugeben. In diesem Beispiel können wir eine Schnittstelle „OrderService“ erstellen und zwei Methoden hinzufügen: getOrderCountByDate und getOrderAmountByDate. Wird zur Abfrage der täglichen Bestellmenge bzw. der Gesamtbestellmenge verwendet.

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

3. Java-Schnittstelle implementieren

Wenn wir die Schnittstelle implementieren, müssen wir Spring JPA verwenden, um die Datenbank zu betreiben. In der Methode getOrderCountByDate müssen wir eine Gruppenabfrage durchführen, um die Anzahl der Bestellungen pro Tag zu zählen. In der Methode getOrderAmountByDate müssen wir eine Gruppenabfrage durchführen, um die Gesamtzahl der Bestellungen pro Tag zu zählen.

@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;
    }
 
}

4. Frontend-Implementierung

1. HTML-Seite erstellen

Wir müssen eine HTML-Seite erstellen, um ECharts-Diagramme anzuzeigen. In diesem Artikel erstellen wir eine einfache HTML-Seite, die zwei ECharts-Diagramme enthält: orderCountChart und 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>

2. JavaScript-Datei erstellen

Wir müssen eine JavaScript-Datei erstellen, um die Java-Schnittstelle aufzurufen und ECharts zum Anzeigen der Abfrageergebnisse zu verwenden. In diesem Artikel erstellen wir eine JavaScript-Datei mit dem Namen db.js, die zwei Funktionen enthält: getOrderCountByDate und getOrderAmountByDate. Mit diesen beiden Funktionen werden die tägliche Bestellmenge bzw. die Gesamtbestellmenge abgefragt und im ECharts-Diagramm angezeigt.

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);
            });
        }
    });
}

5. Ausführungsbeispiel

Wir verwenden ECharts und die Java-Schnittstelle, um die statistische Analyse der Diagrammverknüpfung zu implementieren, um den Effekt zu sehen.

1. Starten Sie die Java-Anwendung.

Geben Sie im Terminal das Verzeichnis ein, in dem sich das Java-Projekt befindet, und geben Sie den folgenden Befehl ein:

mvn spring-boot:run

2. Öffnen Sie die HTML-Seite im Browser.

Geben Sie http:// ein Der Browser localhost:8080 kann die von uns geschriebene Seite öffnen und das Diagramm anzeigen.

3. Klicken Sie auf das Diagramm

Wir können auf das Diagramm klicken, um die Bestelldetails anzuzeigen, die am aktuellen Datum aufgegeben wurden.

In diesem Artikel wird erläutert, wie Sie ECharts und die Java-Schnittstelle verwenden, um eine statistische Diagrammverknüpfungsanalyse zu implementieren. In diesem Beispiel haben wir Spring Boot zur Implementierung der Java-Schnittstelle und ECharts zur Anzeige der Abfrageergebnisse verwendet. Wenn Sie die Beispiele in diesem Artikel verwenden, müssen Sie sie an Ihre tatsächlichen Anforderungen anpassen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ECharts und die Java-Schnittstelle, um eine statistische Diagrammverknüpfungsanalyse zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!