Comment utiliser ECharts et l'interface Java pour implémenter une analyse statistique de liaison de graphiques
ECharts est une bibliothèque de graphiques visuels basée sur JavaScript, qui peut nous aider à créer facilement une variété de graphiques, tels que des graphiques linéaires, des graphiques à barres et des secteurs. des graphiques, des images, etc. Java est un langage de programmation très populaire et largement utilisé dans les applications d'entreprise. Dans cet article, nous présenterons comment utiliser les interfaces ECharts et Java pour implémenter l'analyse statistique de liaison de graphiques.
1. Connaissances préalables
Avant d'étudier cet article, vous devez connaître les connaissances de base suivantes :
2. Préparation
Le site officiel d'ECharts fournit un lien de téléchargement, nous pouvons directement télécharger ECharts et l'utiliser.
Nous pouvons utiliser Spring Boot pour créer un projet Java simple.
3. Préparation des données
Avant d'utiliser ECharts et l'interface Java pour mettre en œuvre l'analyse statistique de liaison de graphiques, nous devons préparer les données à utiliser. Dans cet article, nous utilisons un exemple simple.
Supposons que nous ayons deux tableaux de données, l'un est le tableau des commandes et l'autre est le tableau des détails de la commande. Le tableau des commandes stocke les informations de base de la commande, telles que le numéro de commande, le montant de la commande, la date de la commande, etc. Le tableau des détails de la commande stocke des informations détaillées sur les produits de la commande, telles que le nom du produit, la quantité, le prix unitaire, etc.
Maintenant, nous voulons compter la quantité de commande quotidienne et le montant total de la commande. Nous pouvons suivre les étapes suivantes pour traiter les données :
4. Implémentation back-end
Nous devons créer des classes d'entités Java pour représenter les données dans la table de données. Dans cet article, nous devons créer deux classes d'entités Java : Order et 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方法
}Nous devons créer une interface Java pour exposer l'interface d'interrogation des données et renvoyer les résultats de la requête au front-end. Dans cet exemple, nous pouvons créer une interface OrderService et ajouter deux méthodes : getOrderCountByDate et getOrderAmountByDate. Utilisé pour interroger respectivement la quantité de commande quotidienne et le montant total de la commande.
public interface OrderService {
List<Map<String, Object>> getOrderCountByDate();
List<Map<String, Object>> getOrderAmountByDate();
}Lorsque nous implémentons l'interface, nous devons utiliser Spring JPA pour faire fonctionner la base de données. Dans la méthode getOrderCountByDate, nous devons effectuer une requête de groupe pour compter le nombre de commandes par jour. Dans la méthode getOrderAmountByDate, nous devons effectuer une requête de groupe pour compter le nombre total de commandes par jour.
@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. Implémentation frontale
Nous devons créer une page HTML pour afficher les graphiques ECharts. Dans cet article, nous créons une page HTML simple qui contient deux graphiques ECharts : orderCountChart et 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>Nous devons créer un fichier JavaScript pour appeler l'interface Java et utiliser ECharts pour afficher les résultats de la requête. Dans cet article, nous créons un fichier JavaScript nommé db.js qui contient deux fonctions : getOrderCountByDate et getOrderAmountByDate. Ces deux fonctions sont utilisées pour interroger respectivement la quantité de commande quotidienne et le montant total de la commande et les afficher dans le graphique 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);
});
}
});
}5. Exemple d'exécution
Nous utilisons ECharts et l'interface Java pour implémenter l'analyse statistique de liaison de graphiques. Exécutons maintenant cet exemple pour voir l'effet.
Dans le terminal, entrez le répertoire où se trouve le projet Java, et entrez la commande suivante :
mvn spring-boot:run
Entrez http:// dans le navigateur localhost:8080 peut ouvrir la page que nous avons écrite et afficher le graphique.
Nous pouvons cliquer sur le graphique pour afficher les détails de la commande passée à la date actuelle.
Cet article explique comment utiliser ECharts et l'interface Java pour mettre en œuvre une analyse statistique de liaison de graphiques. Dans cet exemple, nous avons utilisé Spring Boot pour implémenter l'interface Java et ECharts pour afficher les résultats de la requête. Lorsque vous utilisez les exemples de cet article, vous devrez les modifier pour les adapter à vos besoins réels.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
