Cara menggunakan antara muka ECharts dan Java untuk melaksanakan analisis statistik pautan carta

Cara menggunakan ECharts dan antara muka Java untuk melaksanakan analisis statistik pautan carta

ECharts ialah perpustakaan carta visual berdasarkan JavaScript, yang boleh membantu kami membuat pelbagai carta dengan mudah, seperti carta garis, carta bar dan pai carta. Java ialah bahasa pengaturcaraan yang sangat popular yang digunakan secara meluas dalam aplikasi perusahaan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan antara muka ECharts dan Java untuk melaksanakan analisis statistik pautan carta.

1. Pengetahuan prasyarat

Sebelum mempelajari artikel ini, anda perlu mengetahui pengetahuan asas berikut:

1. Pengetahuan asas HTML, CSS, JavaScript
2. Pengetahuan asas pembangunan Java, seperti Spring Boot
3. Pengetahuan asas ECharts, seperti konfigurasi Asas ECharts, format data ECharts, dsb.

2. Persediaan

1. Pasang ECharts

Laman web rasmi ECharts menyediakan pautan muat turun, kami boleh memuat turun terus ECharts dan menggunakannya.

2. Buat projek Java

Kita boleh menggunakan Spring Boot untuk mencipta projek Java yang mudah.

3. Penyediaan data

Sebelum kami menggunakan antara muka ECharts dan Java untuk melaksanakan analisis statistik pautan carta, kami perlu menyediakan data untuk digunakan. Dalam artikel ini, kami menggunakan contoh mudah.

Katakan kita mempunyai dua jadual data, satu jadual pesanan dan satu lagi jadual butiran pesanan. Jadual pesanan menyimpan maklumat asas pesanan, seperti nombor pesanan, jumlah pesanan, tarikh pesanan, dll. Jadual butiran pesanan menyimpan maklumat terperinci tentang produk dalam pesanan, seperti nama produk, kuantiti, harga unit, dsb.

Sekarang kami ingin mengira kuantiti pesanan harian dan jumlah jumlah pesanan. Kita boleh mengikuti langkah berikut untuk memproses data:

1. Kumpulkan mengikut hari berdasarkan tarikh pesanan dalam jadual pesanan.
2. Soal nombor pesanan setiap hari dan kira kuantiti pesanan harian.
3. Soal amaun pesanan untuk setiap hari dan kira jumlah amaun pesanan untuk setiap hari.

4. Pelaksanaan back-end

1. Buat kelas entiti Java

Kita perlu mencipta kelas entiti Java untuk mewakili data dalam jadual data. Dalam artikel ini, kita perlu mencipta dua kelas entiti Java: Order dan OrderItem.

@Entity
@Table(name = "t_order")
public class Order {
 
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
 
    @Column(name = "order_no")
    private String orderNo;
 
    @Column(name = "order_amount")
    private BigDecimal orderAmount;
 
    @Column(name = "order_date")
    private LocalDate orderDate;
 
    // getter、setter方法
 
}

@Entity
@Table(name = "t_order_item")
public class OrderItem {
 
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
 
    @Column(name = "order_id")
    private Long orderId;
 
    @Column(name = "product_name")
    private String productName;
 
    @Column(name = "product_price")
    private BigDecimal productPrice;
 
    @Column(name = "product_quantity")
    private Integer productQuantity;
 
    // getter、setter方法
 
}

2. Buat antara muka Java

Kita perlu mencipta antara muka Java untuk mendedahkan antara muka untuk pertanyaan data dan mengembalikan hasil pertanyaan ke bahagian hadapan. Dalam contoh ini, kita boleh mencipta antara muka OrderService dan menambah dua kaedah: getOrderCountByDate dan getOrderAmountByDate. Digunakan untuk menanyakan kuantiti pesanan harian dan jumlah pesanan masing-masing.

public interface OrderService {
 
    List<Map<String, Object>> getOrderCountByDate();
 
    List<Map<String, Object>> getOrderAmountByDate();
 
}

3. Melaksanakan antara muka Java

Apabila kita melaksanakan antara muka, kita perlu menggunakan Spring JPA untuk mengendalikan pangkalan data. Dalam kaedah getOrderCountByDate, kita perlu melakukan pertanyaan kumpulan untuk mengira bilangan pesanan setiap hari. Dalam kaedah getOrderAmountByDate, kita perlu melakukan pertanyaan kumpulan untuk mengira jumlah amaun pesanan harian.

@Service
public class OrderServiceImpl implements OrderService {
 
    @PersistenceContext
    private EntityManager em;
 
    @Override
    public List<Map<String, Object>> getOrderCountByDate() {
        String sql = "SELECT order_date, COUNT(*) AS order_count FROM t_order GROUP BY order_date";
        Query query = em.createNativeQuery(sql);
        List<Object[]> list = query.getResultList();
        List<Map<String, Object>> result = new ArrayList<>(list.size());
        for (Object[] array : list) {
            Map<String, Object> map = new HashMap<>();
            map.put("orderDate", array[0]);
            map.put("orderCount", array[1]);
            result.add(map);
        }
        return result;
    }
 
    @Override
    public List<Map<String, Object>> getOrderAmountByDate() {
        String sql = "SELECT order_date, SUM(order_amount) AS order_amount FROM t_order GROUP BY order_date";
        Query query = em.createNativeQuery(sql);
        List<Object[]> list = query.getResultList();
        List<Map<String, Object>> result = new ArrayList<>(list.size());
        for (Object[] array : list) {
            Map<String, Object> map = new HashMap<>();
            map.put("orderDate", array[0]);
            map.put("orderAmount", array[1]);
            result.add(map);
        }
        return result;
    }
 
}

4. Pelaksanaan bahagian hadapan

1. Buat halaman HTML

Kita perlu mencipta halaman HTML untuk memaparkan carta ECharts. Dalam artikel ini, kami mencipta halaman HTML ringkas yang mengandungi dua carta ECharts: orderCountChart dan orderAmountChart.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts Demo</title>
</head>
<body>
 
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
 
<script src="echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="db.js"></script>
 
<script>
    $(function () {
        getOrderCountByDate();
        getOrderAmountByDate();
    });
 
    function getOrderCountByDate() {
        $.ajax({
            url: '/api/orders/countByDate',
            type: 'GET',
            success: function (data) {
                var orderCountChart = echarts.init(document.getElementById('main1'));
                var option = {
                    title: {
                        text: '订单数量'
                    },
                    tooltip: {},
                    xAxis: {
                        data: data.map(function (item) {
                            return item.orderDate;
                        })
                    },
                    yAxis: {},
                    series: [{
                        name: '订单数量',
                        type: 'bar',
                        data: data.map(function (item) {
                            return item.orderCount;
                        })
                    }]
                };
                orderCountChart.setOption(option);
                orderCountChart.on('click', function (params) {
                    getOrderItemsByDate(params.name);
                });
            }
        });
    }
 
    function getOrderAmountByDate() {
        $.ajax({
            url: '/api/orders/amountByDate',
            type: 'GET',
            success: function (data) {
                var orderAmountChart = echarts.init(document.getElementById('main2'));
                var option = {
                    title: {
                        text: '订单金额'
                    },
                    tooltip: {},
                    xAxis: {
                        data: data.map(function (item) {
                            return item.orderDate;
                        })
                    },
                    yAxis: {},
                    series: [{
                        name: '订单金额',
                        type: 'bar',
                        data: data.map(function (item) {
                            return item.orderAmount;
                        })
                    }]
                };
                orderAmountChart.setOption(option);
                orderAmountChart.on('click', function (params) {
                    getOrderItemsByDate(params.name);
                });
            }
        });
    }
 
    function getOrderItemsByDate(orderDate) {
        console.log('Order date:', orderDate);
    }
 
</script>
 
</body>
</html>

2. Buat fail JavaScript

Kita perlu mencipta fail JavaScript untuk memanggil antara muka Java dan menggunakan ECharts untuk memaparkan hasil pertanyaan. Dalam artikel ini, kami mencipta fail JavaScript bernama db.js yang mengandungi dua fungsi: getOrderCountByDate dan getOrderAmountByDate. Kedua-dua fungsi ini digunakan untuk menanyakan kuantiti pesanan harian dan jumlah amaun pesanan masing-masing dan memaparkannya dalam carta ECharts.

function getOrderCountByDate() {
    $.ajax({
        url: '/api/orders/countByDate',
        type: 'GET',
        success: function (data) {
            var orderCountChart = echarts.init(document.getElementById('main1'));
            var option = {
                title: {
                    text: '订单数量'
                },
                tooltip: {},
                xAxis: {
                    data: data.map(function (item) {
                        return item.orderDate;
                    })
                },
                yAxis: {},
                series: [{
                    name: '订单数量',
                    type: 'bar',
                    data: data.map(function (item) {
                        return item.orderCount;
                    })
                }]
            };
            orderCountChart.setOption(option);
            orderCountChart.on('click', function (params) {
                getOrderItemsByDate(params.name);
            });
        }
    });
}
 
function getOrderAmountByDate() {
    $.ajax({
        url: '/api/orders/amountByDate',
        type: 'GET',
        success: function (data) {
            var orderAmountChart = echarts.init(document.getElementById('main2'));
            var option = {
                title: {
                    text: '订单金额'
                },
                tooltip: {},
                xAxis: {
                    data: data.map(function (item) {
                        return item.orderDate;
                    })
                },
                yAxis: {},
                series: [{
                    name: '订单金额',
                    type: 'bar',
                    data: data.map(function (item) {
                        return item.orderAmount;
                    })
                }]
            };
            orderAmountChart.setOption(option);
            orderAmountChart.on('click', function (params) {
                getOrderItemsByDate(params.name);
            });
        }
    });
}

5. Contoh Berjalan

Kami menggunakan antara muka ECharts dan Java untuk melaksanakan analisis statistik pautan carta Sekarang mari jalankan contoh ini untuk melihat kesannya.

1. Mulakan aplikasi Java

Di terminal, masukkan direktori di mana projek Java terletak, dan masukkan arahan berikut:

mvn spring-boot:run

2. Buka halaman HTML dalam penyemak imbas

Masukkan http:// dalam pelayar localhost:8080 boleh membuka halaman yang kami tulis dan memaparkan carta.

3. Klik pada carta

Kita boleh klik pada carta untuk melihat butiran pesanan yang diletakkan pada tarikh semasa.

Artikel ini memperkenalkan cara menggunakan ECharts dan antara muka Java untuk melaksanakan analisis statistik pautan carta. Dalam contoh ini, kami menggunakan Spring Boot untuk melaksanakan antara muka Java dan ECharts untuk memaparkan hasil pertanyaan. Apabila menggunakan contoh dalam artikel ini, anda perlu mengubah suainya agar sesuai dengan keperluan sebenar anda.

Atas ialah kandungan terperinci Cara menggunakan antara muka ECharts dan Java untuk melaksanakan analisis statistik pautan carta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!