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

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

WBOY

Libérer： 2023-12-17 10:29:12

original

1537 Les gens l'ont consulté

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

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

在上面的代码中，我们通过@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);
    }
});

Copier après la connexion

在上面的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!