Comment utiliser ECharts et l'interface Java pour mettre en œuvre une analyse statistique de liaison de graphiques

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 :

1. Connaissance de base de HTML, CSS, JavaScript
2. Connaissance de base du développement Java, tel que Spring Boot
3. Connaissance de base de ECharts, tels que la configuration ECharts Basic, le format de données ECharts, etc.

2. Préparation

1. Installer ECharts

Le site officiel d'ECharts fournit un lien de téléchargement, nous pouvons directement télécharger ECharts et l'utiliser.

2. Créer un projet Java

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 :

1. Grouper par jour en fonction de la date de commande dans le tableau des commandes.
2. Requérez le numéro de commande de chaque jour et calculez la quantité de commande quotidienne.
3. Requérez le montant de la commande pour chaque jour et calculez le montant total de la commande pour chaque jour.

4. Implémentation back-end

1. Créer des classes d'entités Java

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方法
 
}

2. Créer une interface Java

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

3. Implémenter l'interface Java

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

1. Créer une page HTML

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>

2. Créer un fichier JavaScript

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.

1. Démarrez l'application Java

Dans le terminal, entrez le répertoire où se trouve le projet Java, et entrez la commande suivante :

mvn spring-boot:run

2. Ouvrez la page HTML dans le navigateur

Entrez http:// dans le navigateur localhost:8080 peut ouvrir la page que nous avons écrite et afficher le graphique.

3. Cliquez sur 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!