Maison > Article > Java > Apprenez les interfaces ECharts et Java à partir de zéro : créez des graphiques statistiques colorés

Apprenez les interfaces ECharts et Java à partir de zéro : créez des graphiques statistiques colorés

WBOYoriginal: 2023-12-17 10:29:121471parcourir

Apprenez ECharts et l'interface Java à partir de zéro : créez des graphiques statistiques colorés

Ces dernières années, avec l'essor de l'analyse du Big Data, les graphiques statistiques jouent un rôle important dans la visualisation des données. En tant que puissante bibliothèque de visualisation de données, ECharts peut aider les développeurs à créer des graphiques statistiques colorés pour afficher et analyser efficacement les données. Grâce à l'interface Java, nous pouvons connecter de manière transparente les données back-end aux ECharts front-end. Cet article apprendra les interfaces ECharts et Java à partir de zéro et partagera quelques exemples de code spécifiques.

Introduction de base à ECharts
ECharts est une bibliothèque de visualisation de données open source de Baidu qui prend en charge une variété de types de graphiques, notamment des graphiques linéaires, des graphiques à barres, des diagrammes circulaires, etc. Il fournit des éléments de configuration riches et des fonctions interactives pour répondre à divers besoins de visualisation de données.
Installation et utilisation
Tout d'abord, vous devez télécharger la dernière version d'ECharts. Après le téléchargement depuis le site officiel (https://echarts.apache.org/zh/index.html), décompressez-le dans le répertoire du projet. Ensuite, introduisez la bibliothèque de visualisation ECharts dans la page HTML :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计图表示例</title>
    <script src="echarts.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        // 在这里编写生成图表的代码
    </script>
</body>
</html>

Exemple de dessin d'un graphique linéaire
Ce qui suit prend un simple graphique linéaire comme exemple pour présenter comment utiliser ECharts pour dessiner un graphique.

var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);

var option = {
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line'
    }]
};

option && myChart.setOption(option);

Dans le code ci-dessus, nous obtenons d'abord l'élément div chart et créons une instance ECharts. Ensuite, spécifiez les données des axes X et Y, ainsi que les données du graphique linéaire, via l'élément de configuration option. Enfin, appelez la méthode setOption pour appliquer l'élément de configuration au graphique. chart这个div元素，并创建一个ECharts实例。然后，通过option配置项指定x轴和y轴的数据，以及折线图的数据。最后，调用setOption方法将配置项应用到图表上。

Java接口与ECharts的结合
在实际项目中，常常需要通过Java后端获取数据，并将数据传递给ECharts生成相应的图表。这时，我们可以使用Java接口与ECharts进行交互。

首先，我们需要在Java中编写一个接口，用于获取数据。以下是一个简单的Java接口示例：

@RestController
public class ChartDataController {

    @GetMapping("/chartData")
    public List<Integer> getChartData() {
        // 在这里编写获取数据的代码
        List<Integer> data = new ArrayList<>();
        data.add(120);
        data.add(200);
        data.add(150);
        data.add(80);
        data.add(70);
        data.add(110);
        data.add(130);
        return data;
    }
}

在上面的代码中，我们通过@GetMapping注解将/chartData路径映射为获取图表数据的方法。在实际项目中，可以在这个方法中调用数据库、接口等获取数据的方式。

接下来，我们需要在前端的JavaScript代码中通过Ajax请求获取数据，并将数据传递给ECharts生成图表。

var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);

$.ajax({
    url: '/chartData',
    success: function(data) {
        var option = {
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'line'
            }]
        };

        option && myChart.setOption(option);
    }
});

在上面的JavaScript代码中，我们使用jQuery的ajax方法发送请求，指定URL为/chartData

Dans les projets réels, il est souvent nécessaire d'obtenir des données via le backend Java et de transmettre les données à ECharts pour générer les graphiques correspondants. À l'heure actuelle, nous pouvons utiliser l'interface Java pour interagir avec ECharts.

/chartData

@GetMapping

ajax

/chartData

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 jquery ajax echarts html 接口数据库 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：Comment utiliser WebSocket pour le contrôle à distance en JavaArticle suivant：Comment utiliser WebSocket pour le contrôle à distance en Java

Articles Liés

Voir plus