Maison > Article > Java > Comment utiliser ECharts et l'interface Java pour créer de superbes graphiques statistiques 3D

Comment utiliser ECharts et l'interface Java pour créer de superbes graphiques statistiques 3D

WBOYoriginal: 2023-12-18 17:59:151183parcourir

Comment utiliser ECharts et linterface Java pour créer de superbes graphiques statistiques 3D

Ces dernières années, le développement du big data a fait de la visualisation des données un domaine de plus en plus important. La visualisation des données facilite non seulement la compréhension et l’analyse des données, mais augmente également la beauté des données. Dans le domaine de la visualisation, les graphiques statistiques 3D sont une méthode couramment utilisée qui permet d'afficher de manière plus intuitive les caractéristiques des données. Cet article expliquera comment utiliser les interfaces ECharts et Java pour créer de superbes graphiques statistiques 3D et fournira des exemples de code spécifiques.

Introduction à ECharts

[ECharts](https://echarts.apache.org/zh/index.html) est une bibliothèque de visualisation open source basée sur JavaScript permettant de créer des graphiques et une interface de visualisation de données interactifs et efficaces. ECharts prend en charge une variété de types de graphiques, notamment des graphiques à barres, des graphiques linéaires, des nuages de points, des cartes, etc. Il prend également en charge les données dynamiques et les fonctionnalités interactives.

Introduction à l'interface Java

Dans la plupart des cas, nous avons besoin d'obtenir des données en arrière-plan pour dessiner des graphiques. Par conséquent, nous devons utiliser l’interface Java pour obtenir des données. L'interface Java est une technologie utilisée pour interagir avec l'arrière-plan et obtenir des données. Dans cet article, nous utiliserons l'interface Java pour obtenir des données générées aléatoirement afin de dessiner des graphiques statistiques 3D.

Étape 1 : Préparation

Tout d'abord, nous devons télécharger ECharts. Vous pouvez télécharger la dernière version depuis le [site officiel d'ECharts](https://echarts.apache.org/zh/download.html). De plus, nous avons également besoin d'un IDE Java (tel qu'Eclipse) pour écrire du code Java.

Étape 2 : Écrire du code Java

Voici le code Java permettant d'obtenir des données générées aléatoirement à partir de l'arrière-plan :

@RequestMapping("/getChartData")
@ResponseBody
public String getChartData() {
    int min = 1;
    int max = 100;
    JSONArray jsonArray = new JSONArray();
    for(int i = 0; i < 10; i++) {
        int num1 = (int)(Math.random() * (max - min) + min);
        int num2 = (int)(Math.random() * (max - min) + min);
        int num3 = (int)(Math.random() * (max - min) + min);
        jsonArray.add(new JSONArray(Arrays.asList("data" + (i + 1), num1, num2, num3)));
    }
    return jsonArray.toJSONString();
}

Dans le code ci-dessus, nous avons utilisé le framework Spring MVC pour écrire du code Java. Tout d’abord, nous définissons les valeurs maximales et minimales. Ensuite, générez aléatoirement trois entiers via la méthode Math.random() et ajoutez-les à un objet JSONArray. Enfin, nous convertissons l'objet JSONArray en chaîne et inversement.

Étape 3 : Écrivez le code HTML

Voici le code HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D统计图示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="myChart" style="width: 800px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('myChart'));

        var option = {
            title: {
                text: '3D统计图示例'
            },
            tooltip: {},
            legend: {
                data: ['data1', 'data2', 'data3']
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {},
            zAxis: {},
            grid3D: {},
            series: [{
                name: 'data1',
                type: 'bar3D',
                data: []
            },{
                name: 'data2',
                type: 'bar3D',
                data: []
            },{
                name: 'data3',
                type: 'bar3D',
                data: []
            }]
        };
        myChart.setOption(option);
        $.ajax({
            url: 'getChartData',
            type: 'POST',
            success: function (data) {
                data = JSON.parse(data);
                var xAxisData = data.map(function (item) {
                    return item[0];
                });
                var data1 = [], data2 = [], data3 = [];
                for(var i = 0; i < data.length; i++) {
                    data1.push([data[i][0], data[i][1], i]);
                    data2.push([data[i][0], data[i][2], i]);
                    data3.push([data[i][0], data[i][3], i]);
                }
                myChart.setOption({
                    xAxis: {
                        data: xAxisData
                    },
                    series: [{
                        data: data1
                    }, {
                        data: data2
                    }, {
                        data: data3
                    }]
                });
            }
        });

    </script>
</body>
</html>

Dans le code ci-dessus, nous avons utilisé la bibliothèque jQuery pour obtenir des données générées aléatoirement. Tout d’abord, nous avons créé un élément div pour afficher le graphique de statistiques 3D. Ensuite, nous utilisons la méthode echarts.init() pour initialiser le graphique statistique 3D et définir certaines options de base, telles que les axes de coordonnées, la légende, etc. Ensuite, nous utilisons la méthode $.ajax() pour obtenir des données de l'arrière-plan et afficher les données dans un graphique statistique 3D.

Il convient de mentionner que nous utilisons également trois couleurs différentes pour représenter différentes séries de données.

Étape 4 : Exécuter le programme

Enfin, nous pouvons ouvrir le fichier HTML dans le navigateur pour exécuter notre programme. Dans le navigateur, nous pouvons voir un magnifique graphique statistique 3D.

Conclusion

Cet article explique comment utiliser ECharts et l'interface Java pour créer de superbes graphiques statistiques 3D. Nous obtenons d'abord des données générées aléatoirement à partir de l'arrière-plan, puis utilisons ECharts pour visualiser les données. De cette façon, nous pouvons comprendre et analyser les données de manière plus intuitive et améliorer la beauté des données. Si vous êtes intéressé par la visualisation de données, vous pouvez aussi bien essayer d'utiliser ECharts et l'interface Java pour créer votre propre programme de visualisation de données !

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!

Java JavaScript mvc spring jquery ajax echarts html eclipse mvc框架 math 字符串接口对象 ide apache https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Conseils de développement Java Websocket : comment gérer les connexions simultanéesArticle suivant：Conseils de développement Java Websocket : comment gérer les connexions simultanées

Articles Liés

Voir plus