ECharts 및 Java 인터페이스를 사용하여 차트 연계 통계 분석을 구현하는 방법
- WBOY원래의
- 2023-12-17 17:50:20721검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!