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:
2. Vorbereitung
Die offizielle Website von ECharts bietet einen Download-Link, wir können ECharts direkt herunterladen und verwenden.
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:
4. Backend-Implementierung
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方法
}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();
}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
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>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.
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
Geben Sie http:// ein Der Browser localhost:8080 kann die von uns geschriebene Seite öffnen und das Diagramm anzeigen.
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!
