ECharts 및 Java 인터페이스를 사용하여 차트 연계 통계 분석을 구현하는 방법-java지도 시간-php.cn

ECharts 및 Java 인터페이스를 사용하여 차트 연계 통계 분석을 구현하는 방법

ECharts와 Java 인터페이스를 사용하여 차트 연계 통계 분석을 구현하는 방법

ECharts는 JavaScript 기반의 시각적 차트 라이브러리로 꺾은선형 차트, 막대형 차트, 파이 등 다양한 차트를 쉽게 만들 수 있도록 도와줍니다. 차트 등. Java는 엔터프라이즈 애플리케이션에서 널리 사용되는 매우 인기 있는 프로그래밍 언어입니다. 이 기사에서는 ECharts 및 Java 인터페이스를 사용하여 차트 연계 통계 분석을 구현하는 방법을 소개합니다.

1. 전제 지식

이 기사를 공부하기 전에 다음 기본 지식을 알아야 합니다.

HTML, CSS, JavaScript에 대한 기본 지식
Spring Boot와 같은 Java 개발에 대한 기본 지식
Java 개발에 대한 기본 지식 ECharts 기본 구성, ECharts 데이터 형식 등과 같은 ECharts

2. 준비

ECharts 설치

ECharts 공식 홈페이지에서 다운로드 링크를 제공하고 있으며, ECharts를 직접 다운로드하여 사용할 수 있습니다.

Create Java 프로젝트

Spring Boot를 사용하여 간단한 Java 프로젝트를 만들 수 있습니다.

3. 데이터 준비

차트 연계 통계 분석을 구현하기 위해 ECharts 및 Java 인터페이스를 사용하기 전에 사용할 데이터를 준비해야 합니다. 이 기사에서는 간단한 예를 사용합니다.

두 개의 데이터 테이블이 있다고 가정해 보겠습니다. 하나는 주문 테이블이고 다른 하나는 주문 세부 정보 테이블입니다. 주문 테이블에는 주문 번호, 주문 금액, 주문 날짜 등 주문의 기본 정보가 저장됩니다. 주문 내역 테이블에는 주문한 상품에 대한 상품명, 수량, 단가 등의 세부 정보가 저장됩니다.

이제 일일 주문 수량과 총 주문 금액을 계산해 보겠습니다. 다음 단계에 따라 데이터를 처리할 수 있습니다.

주문 테이블의 주문 날짜를 기준으로 날짜별로 그룹화합니다.
일자별 주문번호를 조회하여 일일 주문수량을 계산해 보세요.
일자별 주문금액을 조회하여 일자별 총 주문금액을 계산해 보세요.

4. 백엔드 구현

Java 엔터티 클래스 생성

데이터 테이블의 데이터를 표현하려면 Java 엔터티 클래스를 생성해야 합니다. 이 문서에서는 Order 및 OrderItem이라는 두 개의 Java 엔터티 클래스를 만들어야 합니다.

@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方法
 
}

로그인 후 복사

Java 인터페이스 만들기

데이터 쿼리를 위한 인터페이스를 노출하고 쿼리 결과를 프런트 엔드에 반환하려면 Java 인터페이스를 만들어야 합니다. 이 예에서는 OrderService 인터페이스를 생성하고 getOrderCountByDate 및 getOrderAmountByDate라는 두 가지 메서드를 추가할 수 있습니다. 일일 주문 수량과 총 주문 금액을 각각 조회하는 데 사용됩니다.

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

로그인 후 복사

Java 인터페이스 구현

인터페이스 구현 시 Spring JPA를 사용하여 데이터베이스를 운영해야 합니다. getOrderCountByDate 메소드에서는 일일 주문 수를 계산하기 위해 그룹 쿼리를 수행해야 합니다. getOrderAmountByDate 메소드에서는 총 일일 주문 금액을 계산하기 위해 그룹 쿼리를 수행해야 합니다.

@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. 프런트 엔드 구현

HTML 페이지 만들기

ECharts 차트를 표시하려면 HTML 페이지를 만들어야 합니다. 이 기사에서는 두 개의 EChart 차트(orderCountChart 및 orderAmountChart)가 포함된 간단한 HTML 페이지를 만듭니다.

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

로그인 후 복사

JavaScript 파일 만들기

Java 인터페이스를 호출하고 ECharts를 사용하여 쿼리 결과를 표시하려면 JavaScript 파일을 만들어야 합니다. 이 기사에서는 getOrderCountByDate 및 getOrderAmountByDate라는 두 가지 함수를 포함하는 db.js라는 JavaScript 파일을 만듭니다. 이 두 함수는 일일 주문 수량과 총 주문 금액을 각각 쿼리하여 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. 예제 실행

ECharts와 Java 인터페이스를 사용하여 차트 연계 통계 분석을 구현해 보겠습니다. 이제 이 예제를 실행하여 효과를 살펴보겠습니다.

Java 애플리케이션 시작

터미널에서 Java 프로젝트가 있는 디렉터리를 입력하고 다음 명령을 입력하세요.

mvn spring-boot:run

로그인 후 복사

브라우저에서 HTML 페이지 열기

http:// 입력 브라우저 localhost:8080은 우리가 작성한 페이지를 열고 차트를 표시할 수 있습니다.

차트를 클릭하세요

차트를 클릭하시면 현재 날짜에 이루어진 주문 내역을 보실 수 있습니다.

이 글에서는 ECharts와 Java 인터페이스를 사용하여 차트 연계 통계 분석을 구현하는 방법을 소개합니다. 이 예에서는 Spring Boot를 사용하여 Java 인터페이스를 구현하고 ECharts를 사용하여 쿼리 결과를 표시했습니다. 이 문서의 예제를 사용할 때는 실제 요구 사항에 맞게 수정해야 합니다.

위 내용은 ECharts 및 Java 인터페이스를 사용하여 차트 연계 통계 분석을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!