Interface ECharts et Java : Comment implémenter rapidement des graphiques statistiques tels que des graphiques linéaires, des graphiques à barres, des diagrammes circulaires, etc.-javaDidacticiel-php.cn

Interface ECharts et Java : Comment implémenter rapidement des graphiques statistiques tels que des graphiques linéaires, des graphiques à barres, des diagrammes circulaires, etc.

ECharts et interface Java : Comment implémenter rapidement des graphiques statistiques tels que des graphiques linéaires, des graphiques à barres, des diagrammes circulaires, etc., des exemples de code spécifiques sont nécessaires

Avec l'avènement de l'ère Internet, l'analyse des données est devenue de plus en plus plus important. Les graphiques statistiques sont une méthode d'affichage très intuitive et puissante. Les graphiques peuvent afficher les données plus clairement, permettant aux utilisateurs de mieux comprendre la connotation et les modèles des données. Dans le développement Java, nous pouvons utiliser les interfaces ECharts et Java pour afficher rapidement divers graphiques statistiques.

ECharts est une bibliothèque de graphiques de visualisation de données basée sur HTML5 Canvas développée par Baidu. Elle peut facilement dessiner une variété de graphiques, notamment des graphiques linéaires, des graphiques à barres, des diagrammes circulaires, etc. L'interface Java est une technologie qui permet aux données back-end d'interagir avec l'affichage front-end et de transmettre des données au front-end via le code Java. Nous présenterons ensuite comment utiliser les interfaces ECharts et Java pour afficher rapidement divers graphiques statistiques.

Implémenter un graphique linéaire

Un graphique linéaire est un graphique qui représente les tendances des données en reliant les points de données. Dans ECharts, nous pouvons implémenter un graphique linéaire via le code suivant :

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '折线图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["周一","周二","周三","周四","周五","周六","周日"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 20, 30, 40]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

Copier après la connexion

Le code ci-dessus montre comment utiliser ECharts pour implémenter un graphique linéaire. Nous pouvons définir divers paramètres du graphique dans l'objet option, tels que le titre du graphique, les étiquettes de l'axe des x et de l'axe des y, etc. En transmettant des données à l'attribut data de la série, les données correspondantes peuvent être affichées dans le graphique. Enfin, utilisez la méthode setOption pour afficher le graphique.

Comment implémenter un graphique linéaire en Java ? Nous pouvons transmettre des données au front-end via le code Java suivant :

@RequestMapping("/echarts")
@ResponseBody
public Map<String,Object> echarts(){
    List<String> categories = new ArrayList<String>();
    categories.add("周一");
    categories.add("周二");
    categories.add("周三");
    categories.add("周四");
    categories.add("周五");
    categories.add("周六");
    categories.add("周日");

    List<Integer> data = new ArrayList<Integer>();
    data.add(5);
    data.add(20);
    data.add(36);
    data.add(10);
    data.add(20);
    data.add(30);
    data.add(40);

    Map<String,Object> result = new HashMap<String,Object>();
    result.put("categories",categories);
    result.put("data",data);

    return result;
}

Copier après la connexion

Dans le code ci-dessus, nous créons un objet Map et plaçons les données des axes X et Y dans des catégories et des données respectivement. Renvoyez ensuite l’objet Map au front-end.

Enfin, ajoutez le code JS suivant au code front-end pour terminer le rendu des données back-end du graphique linéaire :

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var categories = data.categories;
        var data = data.data;
        var option = {
            title: {
                text: '折线图'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: categories
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: data
            }]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

Copier après la connexion

Implémentation d'un graphique à barres

Un graphique à barres est un graphique utilisé pour comparer la taille de différentes catégories de données. Dans ECharts, nous pouvons implémenter des histogrammes via le code suivant :

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '柱状图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["周一","周二","周三","周四","周五","周六","周日"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 20, 30, 40]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

Copier après la connexion

Le code ci-dessus montre comment utiliser ECharts pour implémenter des histogrammes. Semblable au graphique linéaire, nous pouvons définir divers paramètres du graphique dans l'objet option, tels que le titre du graphique, les étiquettes de l'axe des x et de l'axe des y, etc. Dans le même temps, il suffit de définir l'attribut type sur « bar » pour convertir le graphique linéaire en graphique à barres.

Comment implémenter un histogramme en Java ? Nous pouvons transmettre des données au front-end via le code Java suivant :

@RequestMapping("/echarts")
@ResponseBody
public Map<String,Object> echarts(){
    List<String> categories = new ArrayList<String>();
    categories.add("周一");
    categories.add("周二");
    categories.add("周三");
    categories.add("周四");
    categories.add("周五");
    categories.add("周六");
    categories.add("周日");

    List<Integer> data = new ArrayList<Integer>();
    data.add(5);
    data.add(20);
    data.add(36);
    data.add(10);
    data.add(20);
    data.add(30);
    data.add(40);

    Map<String,Object> result = new HashMap<String,Object>();
    result.put("categories",categories);
    result.put("data",data);

    return result;
}

Copier après la connexion

Dans le code ci-dessus, nous créons un objet Map et plaçons les données des axes X et Y dans des catégories et des données respectivement. Renvoyez ensuite l’objet Map au front-end. Ajoutez le code JS suivant au code front-end pour terminer le rendu des données back-end de l'histogramme :

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var categories = data.categories;
        var data = data.data;
        var option = {
            title: {
                text: '柱状图'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: categories
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: data
            }]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

Copier après la connexion

Implémentation d'un diagramme circulaire

Un diagramme circulaire est un graphique utilisé pour représenter la proportion de données. Dans ECharts, nous pouvons implémenter des diagrammes circulaires via le code suivant :

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

Copier après la connexion

Le code ci-dessus montre comment utiliser ECharts pour implémenter des diagrammes circulaires. Semblable aux graphiques en courbes et aux graphiques à barres, nous pouvons définir divers paramètres du graphique dans l'objet option, tels que le titre du graphique, les étiquettes de l'axe des x et de l'axe des y, etc. En transmettant des données à l'attribut data de la série, les données correspondantes peuvent être affichées dans le graphique. Notez que les données du graphique à secteurs doivent ici respecter le format correspondant à la valeur et au nom, tel que {value:335, name:'direct access'}.

Comment implémenter un camembert en Java ? Nous pouvons transmettre des données au front-end via le code Java suivant :

@RequestMapping("/echarts")
@ResponseBody
public List<Map<String,Object>> echarts(){
    List<Map<String,Object>> result = new ArrayList<Map<String,Object>>();

    Map<String,Object> data1 = new HashMap<String,Object>();
    data1.put("value",335);
    data1.put("name","直接访问");
    result.add(data1);

    Map<String,Object> data2 = new HashMap<String,Object>();
    data2.put("value",310);
    data2.put("name","邮件营销");
    result.add(data2);

    Map<String,Object> data3 = new HashMap<String,Object>();
    data3.put("value",234);
    data3.put("name","联盟广告");
    result.add(data3);

    Map<String,Object> data4 = new HashMap<String,Object>();
    data4.put("value",135);
    data4.put("name","视频广告");
    result.add(data4);

    Map<String,Object> data5 = new HashMap<String,Object>();
    data5.put("value",1548);
    data5.put("name","搜索引擎");
    result.add(data5);

    return result;
}

Copier après la connexion

Dans le code ci-dessus, nous créons un tableau Map avec 5 éléments et stockons les valeurs et les noms dans la Map. Renvoyez ensuite le tableau Map au front-end. Ajoutez le code JS suivant au code front-end pour compléter le rendu des données back-end du camembert :

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var legendData = [];
        var seriesData = [];
        $.each(data,function(index,item){
            legendData.push(item.name);
            seriesData.push(item);
        });

        var option = {
            title: {
                text: '饼图',
                subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: legendData
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: seriesData
                }
            ]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

Copier après la connexion

Résumé :

A travers les exemples ci-dessus, nous pouvons constater qu'il est très simple d'utiliser les interfaces ECharts et Java pour afficher des graphiques statistiques. Il vous suffit d'appeler l'interface Java dans le code front-end pour obtenir les données, puis de les transmettre à l'objet option d'ECharts. Dans l'interface Java, les données doivent d'abord être encapsulées dans un objet de collection tel que Map ou List, puis renvoyées au front-end. Naturellement, il est plus pratique d’utiliser Spring Boot. La combinaison d'ECharts et de l'interface Java peut s'adapter à différents modèles de développement avec séparation front-end et back-end.

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!