Antara muka ECharts dan Java: cara menggunakannya pada sistem analisis statistik peringkat perusahaan-javaTutorial-php.cn

Antara muka ECharts dan Java: cara menggunakannya pada sistem analisis statistik peringkat perusahaan

王林

Lepaskan： 2023-12-17 12:21:36

asal

1242 orang telah melayarinya

Antara muka ECharts dan Java: cara menggunakannya pada sistem analisis statistik peringkat perusahaan

ECharts (Carta Perusahaan) ialah alat sumber terbuka visualisasi data yang berkuasa yang digunakan secara meluas dalam sistem analisis statistik peringkat perusahaan. Antara muka Java digabungkan dengannya menyediakan pembangun penyelesaian visualisasi data yang lebih fleksibel dan cekap. Artikel ini akan memperkenalkan cara menggunakan antara muka ECharts dan Java pada sistem analisis statistik peringkat perusahaan dan memberikan contoh kod khusus.

Pertama, kita perlu membina persekitaran pembangunan asas. Pastikan anda telah memasang perisian berikut:

JDK (Java Development Kit): digunakan untuk menyusun dan menjalankan kod Java
IDE (Persekitaran Pembangunan Bersepadu): seperti Eclipse, IntelliJ IDEA, dsb., digunakan untuk membangunkan Java; program;
ECharts: Muat turun dan perkenalkan fail JavaScript ECharts untuk digunakan di halaman hadapan.

Seterusnya, kami akan menggunakan contoh khusus untuk menunjukkan cara menggunakan antara muka ECharts dan Java untuk membina sistem analisis statistik peringkat perusahaan.

Buat antara muka belakang Java

Pertama, kita perlu mencipta kelas Java untuk memproses data dan mengembalikan hasil yang diproses ke halaman hujung hadapan. Sebagai contoh, kami mencipta kelas Java bernama "ChartController":

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ChartController {

    @GetMapping("/data")
    public String getData() {
        // 在这里编写获取数据的逻辑

        // 假设我们获取到了以下数据
        String data = "{"name": "John", "age": 28}";

        return data;
    }
}

Salin selepas log masuk

Dalam kod di atas, kami menggunakan rangka kerja Spring Boot untuk mencipta antara muka RESTful. Melalui anotasi @GetMapping, kami memetakan kaedah ini ke laluan "/data". Dalam kaedah getData(), kita boleh menulis logik untuk mendapatkan data.

Buat halaman hadapan

Seterusnya, kita perlu mencipta halaman hadapan untuk memaparkan data. Kami boleh menggunakan HTML, CSS dan JavaScript untuk membina halaman dan memperkenalkan fail JavaScript ECharts. Sebagai contoh, kami mencipta fail bernama "index.html":

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts Demo</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height:400px;"></div>

    <script type="text/javascript">
        // 使用Ajax向后端接口请求数据
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/data", true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                renderChart(data);
            }
        };
        xhr.send();

        // 渲染图表
        function renderChart(data) {
            var chart = echarts.init(document.getElementById('chart'));
            
            // 在这里编写使用ECharts渲染图表的代码
            var option = {
                title: {
                    text: '示例图表'
                },
                xAxis: {
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {},
                series: [{
                    name: '示例数据',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20, 5]
                }]
            };
            
            chart.setOption(option);
        }
    </script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula memperkenalkan fail JavaScript ECharts dan mencipta bekas div bernama "carta" untuk memaparkan carta. Berikan carta dengan menggunakan Ajax untuk meminta data daripada antara muka belakang dan memanggil kaedah renderChart() selepas mendapatkan data.

Jalankan projek

Selepas melengkapkan langkah di atas, kita boleh menjalankan projek dan membuka halaman dalam pelayar. Dengan melawati "http://localhost:8080" kita akan melihat carta bar yang menunjukkan data sampel.

Melalui contoh ini, kita dapat melihat cara menggunakan ECharts dan antara muka Java untuk membina sistem analisis statistik peringkat perusahaan. Kami boleh menulis kod pemprosesan data dalam antara muka Java mengikut keperluan sebenar, dan menggunakan fail JavaScript ECharts untuk menghasilkan carta. Dengan cara ini, kami boleh mencapai penyelesaian visualisasi data yang fleksibel, cekap dan interaktif.

Nota: Contoh di atas menggunakan rangka kerja Spring Boot untuk mencipta antara muka belakang Java. Jika anda menggunakan rangka kerja Java yang lain, anda boleh melaraskan kod tersebut dengan sewajarnya. Di samping itu, contoh menggunakan data statik, dan anda boleh mendapatkan data daripada pangkalan data atau sumber data lain mengikut situasi sebenar.

Atas ialah kandungan terperinci Antara muka ECharts dan Java: cara menggunakannya pada sistem analisis statistik peringkat perusahaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!