Heim >Java >javaLernprogramm >So verwenden Sie ECharts und die Java-Schnittstelle, um wunderschöne statistische 3D-Diagramme zu erstellen

So verwenden Sie ECharts und die Java-Schnittstelle, um wunderschöne statistische 3D-Diagramme zu erstellen

WBOYOriginal: 2023-12-18 17:59:151207Durchsuche

In den letzten Jahren hat die Entwicklung von Big Data die Datenvisualisierung zu einem immer wichtigeren Feld gemacht. Die Datenvisualisierung erleichtert nicht nur das Verstehen und Analysieren von Daten, sondern erhöht auch die Schönheit der Daten. Im Bereich der Visualisierung sind 3D-Statistikdiagramme eine häufig verwendete Methode, mit der die Eigenschaften von Daten intuitiver dargestellt werden können. In diesem Artikel wird erläutert, wie Sie mithilfe von ECharts und Java-Schnittstellen schöne statistische 3D-Diagramme erstellen, und es werden spezifische Codebeispiele bereitgestellt.

Einführung in ECharts

[ECharts](https://echarts.apache.org/zh/index.html) ist eine Open-Source-Visualisierungsbibliothek auf JavaScript-Basis zum Erstellen interaktiver, effizienter Diagramme und Datenvisualisierungsschnittstellen. ECharts unterstützt eine Vielzahl von Diagrammtypen, darunter Balkendiagramme, Liniendiagramme, Streudiagramme, Karten usw. Es unterstützt auch dynamische Daten und interaktive Funktionen.

Einführung in die Java-Schnittstelle

In den meisten Fällen müssen wir Daten aus dem Hintergrund abrufen, um Diagramme zu zeichnen. Daher müssen wir die Java-Schnittstelle verwenden, um Daten abzurufen. Die Java-Schnittstelle ist eine Technologie zur Interaktion mit dem Hintergrund und zum Abrufen von Daten. In diesem Artikel verwenden wir die Java-Schnittstelle, um zufällig generierte Daten zum Zeichnen von 3D-Statistikdiagrammen abzurufen.

Schritt 1: Vorbereitung

Zuerst müssen wir ECharts herunterladen. Sie können die neueste Version von der [offiziellen ECharts-Website](https://echarts.apache.org/zh/download.html) herunterladen. Darüber hinaus benötigen wir auch eine Java-IDE (z. B. Eclipse), um Java-Code schreiben zu können.

Schritt 2: Java-Code schreiben

Das Folgende ist der Java-Code, um zufällig generierte Daten aus dem Hintergrund abzurufen:

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

Im obigen Code haben wir das Spring MVC-Framework zum Schreiben von Java-Code verwendet. Zuerst legen wir die Maximal- und Minimalwerte fest. Generieren Sie dann zufällig drei ganze Zahlen über die Methode Math.random() und fügen Sie sie einem JSONArray-Objekt hinzu. Schließlich konvertieren wir das JSONArray-Objekt in einen String und zurück.

Schritt 3: HTML-Code schreiben

Hier ist der HTML-Code:

<!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>

Im obigen Code haben wir die jQuery-Bibliothek verwendet, um zufällig generierte Daten zu erhalten. Zuerst haben wir ein div-Element erstellt, um das 3D-Statistikdiagramm anzuzeigen. Anschließend verwenden wir die Methode echarts.init(), um das statistische 3D-Diagramm zu initialisieren und einige grundlegende Optionen wie Koordinatenachsen, Legende usw. festzulegen. Als Nächstes verwenden wir die Methode $.ajax(), um Daten aus dem Hintergrund abzurufen und die Daten in einem statistischen 3D-Diagramm anzuzeigen.

Erwähnenswert ist, dass wir auch drei verschiedene Farben verwenden, um verschiedene Datenreihen darzustellen.

Schritt 4: Führen Sie das Programm aus

Schließlich können wir die HTML-Datei im Browser öffnen, um unser Programm auszuführen. Im Browser sehen wir ein schönes 3D-Statistikdiagramm.

Fazit

In diesem Artikel wird erläutert, wie Sie mit ECharts und der Java-Schnittstelle schöne statistische 3D-Diagramme erstellen. Wir erhalten zunächst zufällig generierte Daten aus dem Hintergrund und verwenden dann ECharts, um die Daten zu visualisieren. Auf diese Weise können wir die Daten intuitiver verstehen und analysieren und die Schönheit der Daten verbessern. Wenn Sie sich für Datenvisualisierung interessieren, können Sie auch versuchen, ECharts und die Java-Schnittstelle zu verwenden, um Ihr eigenes Datenvisualisierungsprogramm zu erstellen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ECharts und die Java-Schnittstelle, um wunderschöne statistische 3D-Diagramme zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tipps zur Java-Websocket-Entwicklung: Umgang mit gleichzeitigen VerbindungenNächster Artikel：Tipps zur Java-Websocket-Entwicklung: Umgang mit gleichzeitigen Verbindungen

In Verbindung stehende Artikel

Mehr sehen