ECharts und Java-Schnittstelle: So implementieren Sie schnell statistische Diagramme wie Liniendiagramme, Balkendiagramme, Kreisdiagramme usw.

ECarts und Java-Schnittstelle: Für die schnelle Implementierung statistischer Diagramme wie Liniendiagramme, Balkendiagramme, Kreisdiagramme usw. sind spezifische Codebeispiele erforderlich

Mit dem Aufkommen des Internetzeitalters ist die Datenanalyse immer wichtiger geworden wichtiger. Statistische Diagramme sind eine sehr intuitive und leistungsstarke Anzeigemethode. Diagramme können Daten klarer darstellen und es den Menschen ermöglichen, die Bedeutung und Muster der Daten besser zu verstehen. In der Java-Entwicklung können wir ECharts und Java-Schnittstellen verwenden, um verschiedene statistische Diagramme schnell anzuzeigen.

ECharts ist eine von Baidu entwickelte Datenvisualisierungsdiagrammbibliothek, die auf HTML5 Canvas basiert. Sie kann problemlos eine Vielzahl von Diagrammen zeichnen, darunter Liniendiagramme, Balkendiagramme, Kreisdiagramme usw. Die Java-Schnittstelle ist eine Technologie, die es Back-End-Daten ermöglicht, mit der Front-End-Anzeige zu interagieren und Daten über Java-Code an das Front-End weiterzuleiten. Als Nächstes stellen wir vor, wie Sie mithilfe von ECharts und Java-Schnittstellen schnell verschiedene statistische Diagramme anzeigen können.

1. Liniendiagramm implementieren

Ein Liniendiagramm ist ein Diagramm, das Datentrends durch die Verbindung von Datenpunkten darstellt. In ECharts können wir ein Liniendiagramm mit dem folgenden Code implementieren:

// 基于准备好的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);

Der obige Code zeigt, wie man mit ECharts ein Liniendiagramm implementiert. Wir können im Optionsobjekt verschiedene Parameter des Diagramms festlegen, z. B. den Titel des Diagramms, die Beschriftungen der x- und y-Achse usw. Durch die Übergabe von Daten an das Datenattribut in der Reihe können die entsprechenden Daten im Diagramm angezeigt werden. Verwenden Sie abschließend die setOption-Methode, um das Diagramm zu rendern.

Wie implementiert man ein Liniendiagramm in Java? Wir können Daten über den folgenden Java-Code an das Frontend übergeben:

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

Im obigen Code erstellen wir ein Kartenobjekt und ordnen die x-Achsen- und y-Achsen-Daten in Kategorien bzw. Daten ein. Geben Sie dann das Map-Objekt an das Frontend zurück.

Fügen Sie abschließend den folgenden JS-Code zum Front-End-Code hinzu, um die Back-End-Datenwiedergabe des Liniendiagramms abzuschließen:

$.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');
    }
});

2. Implementieren eines Balkendiagramms

Ein Balkendiagramm ist ein Diagramm, das zum Vergleichen der Größe verwendet wird verschiedener Kategorien von Daten. In ECharts können wir Histogramme über den folgenden Code implementieren:

// 基于准备好的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);

Der obige Code zeigt, wie ECharts zum Implementieren von Histogrammen verwendet wird. Ähnlich wie beim Liniendiagramm können wir im Optionsobjekt verschiedene Parameter des Diagramms festlegen, z. B. den Titel des Diagramms, die Beschriftungen der x- und y-Achse usw. Gleichzeitig müssen wir nur das Typattribut auf „Balken“ setzen, um das Liniendiagramm in ein Balkendiagramm umzuwandeln.

Wie implementiert man ein Histogramm in Java? Wir können Daten über den folgenden Java-Code an das Frontend übergeben:

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

Im obigen Code erstellen wir ein Kartenobjekt und ordnen die x-Achsen- und y-Achsen-Daten in Kategorien bzw. Daten ein. Geben Sie dann das Map-Objekt an das Frontend zurück. Fügen Sie dem Front-End-Code den folgenden JS-Code hinzu, um die Back-End-Datenwiedergabe des Histogramms abzuschließen:

$.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');
    }
});

3. Implementieren eines Kreisdiagramms

Ein Kreisdiagramm ist ein Diagramm, das zur Darstellung des Datenanteils verwendet wird. In ECharts können wir Kreisdiagramme mit dem folgenden Code implementieren:

// 基于准备好的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);

Der obige Code zeigt, wie ECharts zum Implementieren von Kreisdiagrammen verwendet wird. Ähnlich wie bei Liniendiagrammen und Balkendiagrammen können wir im Optionsobjekt verschiedene Parameter des Diagramms festlegen, z. B. den Titel des Diagramms, die Beschriftungen der x- und y-Achse usw. Durch die Übergabe von Daten an das Datenattribut in der Reihe können die entsprechenden Daten im Diagramm angezeigt werden. Beachten Sie, dass die Kreisdiagrammdaten hier dem Format entsprechen müssen, das dem Wert und Namen entspricht, z. B. {Wert:335, Name:'direkter Zugriff'}.

Wie implementiert man ein Kreisdiagramm in Java? Mit dem folgenden Java-Code können wir Daten an das Frontend übergeben:

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

Im obigen Code erstellen wir ein Map-Array mit 5 Elementen und speichern die Werte und Namen in der Map. Geben Sie dann das Map-Array an das Frontend zurück. Fügen Sie dem Front-End-Code den folgenden JS-Code hinzu, um die Back-End-Datenwiedergabe des Kreisdiagramms abzuschließen:

$.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');
    }
});

Zusammenfassung:

Anhand der obigen Beispiele können wir feststellen, dass die Verwendung von ECharts und Java-Schnittstellen sehr einfach ist um statistische Diagramme anzuzeigen. Sie müssen lediglich die Java-Schnittstelle im Front-End-Code aufrufen, um die Daten abzurufen, und sie dann an das Optionsobjekt von ECharts übergeben. In der Java-Schnittstelle müssen die Daten zunächst in ein Sammlungsobjekt wie Map oder List gekapselt und dann an das Frontend zurückgegeben werden. Natürlich ist es bequemer, Spring Boot zu verwenden. Die Kombination aus ECharts und Java-Schnittstelle kann an verschiedene Entwicklungsmodelle mit Front-End- und Back-End-Trennung angepasst werden.

Das obige ist der detaillierte Inhalt vonECharts und Java-Schnittstelle: So implementieren Sie schnell statistische Diagramme wie Liniendiagramme, Balkendiagramme, Kreisdiagramme usw.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!