Gunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik dalam berbilang format data

Gunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik dalam berbilang format data

Dengan populariti Internet dan pengembangan berterusan pengumpulan data, pemprosesan dan visualisasi data telah menjadi keperluan penting. Carta statistik ialah cara penting untuk visualisasi data. Artikel ini akan memperkenalkan cara menggunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik dalam berbilang format data.

1. Pengenalan kepada ECharts

ECharts ialah perpustakaan visualisasi sumber terbuka berdasarkan JavaScript, dibangunkan oleh Baidu Front-end Technology. Ia menyediakan pelbagai jenis carta dan kaedah interaksi, menyokong terminal mudah alih dan mempunyai kebolehskalaan yang kukuh. ECharts terutamanya mempunyai ciri berikut:

1 Mudah dipelajari dan digunakan: ECharts menyediakan dokumentasi dan contoh lengkap supaya pengguna boleh bermula dengan cepat.

2. Menyokong berbilang jenis data: ECharts menyokong penghuraian berbilang format data, seperti JSON, XML, CSV, dll.

3 Jenis carta kaya: ECharts menyokong lukisan pelbagai jenis carta, seperti carta bar, carta garis, carta serakan, carta pai, dsb.

4 Keupayaan interaksi yang berkuasa: ECharts menyokong pelbagai kaedah interaksi, seperti seret dan lepas, zum, pautan, dsb.

5 Sangat boleh disesuaikan: ECharts menyediakan banyak item konfigurasi dan mekanisme pengembangan untuk memenuhi pelbagai keperluan pengguna.

2. Pengenalan kepada antara muka Java

Java ialah bahasa pengaturcaraan yang sangat baik dengan keupayaan pemprosesan yang berkuasa dan perpustakaan pihak ketiga yang kaya. Antara muka Java ialah sejenis antara muka yang disediakan oleh atur cara Java kepada atur cara atau panggilan sistem lain. Antara muka Java terutamanya mempunyai ciri-ciri berikut:

1 Menyokong pelbagai jenis data: Antara muka Java boleh menyokong penghantaran berbilang format data, seperti JSON, XML, dll.

2. Tingkatkan keselamatan data: Antara muka Java boleh melakukan pengesahan kebenaran dan penyulitan data untuk meningkatkan keselamatan penghantaran data.

3. Tingkatkan kebolehpercayaan data: Antara muka Java boleh melakukan pengesahan data dan pengendalian pengecualian untuk meningkatkan kebolehpercayaan penghantaran data.

4 Meningkatkan kecekapan pembangunan: Antara muka Java boleh merealisasikan penggunaan semula kod dan pembangunan modular, meningkatkan kecekapan pembangunan.

3. Aplikasi antara muka ECharts dan Java

Gabungan antara muka ECharts dan Java dapat merealisasikan reka bentuk carta statistik dalam pelbagai format data. Langkah-langkah khusus adalah seperti berikut:

1 Pemprosesan data bahagian belakang: Gunakan antara muka Java untuk memproses data dan menukar data ke dalam format data yang disokong oleh ECharts.

2. Paparan data bahagian hadapan: Gunakan ECharts untuk memaparkan data sebagai carta statistik.

Yang berikut menggunakan contoh untuk menunjukkan cara menggunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik dalam berbilang format data.

Contoh: Melukis carta bar dan carta pai

Keperluan: Gunakan antara muka Java untuk mendapatkan data, tukar data ke dalam format JSON yang disokong oleh ECharts, dan kemudian gunakan ECharts untuk melukis histogram dan carta pai.

1. Kod belakang

Mula-mula tulis kod antara muka Java untuk mendapatkan data dan tukarkannya ke dalam format JSON yang disokong oleh ECharts.

@RequestMapping(value = "/getChartData", method = RequestMethod.GET, produces = "application/json;charset=UTF-8")
@ResponseBody
public String getChartData() {
    List<ChartEntity> list = chartService.getChartData();
    Gson gson = new Gson();
    String json = gson.toJson(list);
    return json;
}

Antaranya, ChartEntity ialah kelas entiti data, mengandungi dua atribut: nama dan nilai.

2. Kod hujung hadapan

Kemudian tulis kod hujung hadapan dan gunakan ECharts untuk melukis histogram dan carta pai. Antaranya, data diperolehi melalui permintaan asynchronous Ajax ke antara muka Java, dan kemudiannya data ditukar kepada format JSON yang disokong oleh ECharts, dan akhirnya ECharts digunakan untuk melukis histogram dan carta pai.

// 引入ECharts
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

// 绘制柱状图
var barChart = echarts.init(document.getElementById('bar-chart'));
$.ajax({
    url: "/getChartData",
    type: "GET",
    success: function(result) {
        var data = JSON.parse(result);
        var option = {
            title: {
                text: '柱状图'
            },
            xAxis: {
                type: 'category',
                data: data.map(function(item) {
                    return item.name;
                })
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data.map(function(item) {
                    return item.value;
                }),
                type: 'bar'
            }]
        };
        barChart.setOption(option);
    },
    error: function(error) {
        console.log(error);
    }
});

// 绘制饼图
var pieChart = echarts.init(document.getElementById('pie-chart'));
$.ajax({
    url: "/getChartData",
    type: "GET",
    success: function(result) {
        var data = JSON.parse(result);
        var option = {
            title: {
                text: '饼图',
                left: 'center'
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: data.map(function(item) {
                    return {
                        name: item.name,
                        value: item.value
                    }
                })
            }]
        };
        pieChart.setOption(option);
    },
    error: function(error) {
        console.log(error);
    }
});

Dalam kod di atas, gunakan kaedah init ECharts untuk memulakan bekas div carta bar dan carta pai, kemudian gunakan Ajax untuk mendapatkan data yang dikembalikan oleh antara muka Java, tukar data ke dalam format JSON yang disokong oleh ECharts , dan akhirnya gunakan kaedah setOption ECharts untuk melukisnya Bar dan carta pai.

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik dalam berbilang format data. Melalui antara muka Java, data dalam format yang berbeza boleh ditukar kepada format JSON yang disokong oleh ECharts, dan kemudian pelbagai carta statistik boleh divisualisasikan melalui ECharts. Aplikasi antara muka ECharts dan Java boleh meningkatkan kecekapan dan ketepatan pemprosesan dan visualisasi data, dan merupakan hala tuju penting dalam pembangunan Web.

Atas ialah kandungan terperinci Gunakan antara muka ECharts dan Java untuk melaksanakan reka bentuk carta statistik dalam berbilang format data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!