ECharts 및 Java 인터페이스를 사용하여 다중 채널 데이터 비교를 위한 통계 차트 디자인 구현
- 王林원래의
- 2023-12-17 13:43:441087검색
ECharts 및 Java 인터페이스를 사용하여 다중 채널 데이터 비교를 위한 통계 차트 디자인 구현
인터넷의 지속적인 발전으로 인해 점점 더 다양한 제품이 시장에 등장했으며 이러한 제품은 종종 다른 채널을 통해 판매됩니다. , 온라인 채널, 오프라인 채널, 소셜 미디어 채널 등 따라서 다양한 채널의 판매 데이터에 대한 통계와 채널별 판매 실적 비교는 기업의 의사결정에 있어 매우 중요한 의미를 갖습니다. 이 기사에서는 ECharts 및 Java 인터페이스를 사용하여 다중 채널 데이터 비교를 위한 통계 차트 디자인을 구현하는 방법을 소개합니다.
1. 준비
- 데이터베이스 테이블 디자인
먼저, 다양한 채널의 판매 데이터를 저장할 데이터베이스 테이블을 디자인해야 합니다. 이 기사에서는 아래와 같이 MySQL 데이터베이스를 예로 들어 "sales"라는 데이터베이스와 "channel_sales"라는 데이터 테이블을 생성합니다.
CREATE TABLE channel_sales (
id int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '销售记录ID',
channel_name varchar(50) NOT NULL COMMENT '渠道名称',
sales_date date NOT NULL COMMENT '销售日期',
sales_amount decimal(10,2) NOT NULL COMMENT '销售金额',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=' 다양한 채널의 판매 데이터';
- Java 백엔드 코드 작성
다음으로 데이터베이스의 판매 데이터를 프런트엔드 페이지에 제공하기 위한 Java 백엔드 코드를 작성해야 합니다. 이 기사에서는 Spring Boot 프레임워크를 사용하고 데이터 액세스를 위해 MyBatis를 사용합니다. 코드는 다음과 같습니다.
(1) ChannelSales 엔터티 클래스 생성
public 클래스 ChannelSales {
private Integer id; // 销售记录ID private String channelName; // 渠道名称 private Date salesDate; // 销售日期 private BigDecimal salesAmount; // 销售金额 // 省略getters和setters方法
}
(2) ChannelSalesMapper 인터페이스 생성
@Mapper
public 인터페이스 ChannelSalesMapper {
/**
* 查询不同渠道的销售数据
* @param startDate 开始日期
* @param endDate 结束日期
* @return 销售数据列表
*/
List<ChannelSales> selectByDate(@Param("startDate") Date startDate,
@Param("endDate") Date endDate);}
(3 ) ChannelSalesServiceImpl 구현 클래스 만들기
@Service
public 클래스 ChannelSalesServiceImpl은 ChannelSalesService를 구현합니다. {
@Autowired
private ChannelSalesMapper channelSalesMapper;
/**
* 查询不同渠道的销售数据
* @param startDate 开始日期
* @param endDate 结束日期
* @return 销售数据列表
*/
@Override
public List<ChannelSales> getSalesData(Date startDate, Date endDate) {
return channelSalesMapper.selectByDate(startDate, endDate);
}}
- 프런트 엔드 페이지 디자인
마지막으로 프런트 엔드 페이지는 판매 데이터 비교를 표시하도록 디자인되어야 합니다. 다양한 채널에서. 이 기사에서는 Echarts.js를 차트 라이브러리로 사용하고 페이지 레이아웃을 위해 Bootstrap과 결합합니다.
2. 구현 프로세스
- 판매 데이터 쿼리
먼저 프런트 엔드 페이지에서 쿼리 날짜 범위를 가져오고 백엔드에 Ajax 요청을 보내 다양한 채널의 판매 데이터를 가져옵니다. 코드는 다음과 같습니다.
// 날짜 범위 선택기 쿼리
$('#date-range').daterangepicker({
startDate: '2021-01-01', endDate: '2021-12-31'
});
// 쿼리 버튼 클릭 이벤트 듣기
$(' #query- btn').click(function() {
var range = $('#date-range').data('daterangepicker');
// 发送Ajax请求
$.ajax({
type: 'GET',
url: '/api/sales-data',
data: {
startDate: range.startDate.format('YYYY-MM-DD'),
endDate: range.endDate.format('YYYY-MM-DD')
},
success: function(result) {
// 处理查询结果
drawChart(result.data);
}
});});
백그라운드에서 쿼리 요청을 받은 후 ChannelSalesService의 getSalesData 메소드를 호출하여 데이터베이스의 판매 데이터를 쿼리하고 전면으로 반환합니다. -끝 페이지. 코드는 다음과 같습니다.
@RestController
@RequestMapping("/api")
public class ApiController {
@Autowired
private ChannelSalesService channelSalesService;
/**
* 获取不同渠道的销售数据
* @param startDate 开始日期
* @param endDate 结束日期
* @return 查询结果
*/
@GetMapping("/sales-data")
public Result getSalesData(@RequestParam("startDate")
@DateTimeFormat(pattern = "yyyy-MM-dd") Date startDate,
@RequestParam("endDate")
@DateTimeFormat(pattern = "yyyy-MM-dd") Date endDate) {
List<ChannelSales> salesData = channelSalesService.getSalesData(startDate, endDate);
return Result.success(salesData);
}}
- 차트 그리기
판매 데이터를 얻은 후 ECharts.js를 사용할 수 있습니다. 해당 통계 차트를 그립니다. 이 기사에서는 원형 차트와 막대 차트를 사용하여 다양한 채널의 판매 비율과 판매 순위를 표시합니다.
(1) 원형 차트
먼저 원형 차트의 그림을 살펴보겠습니다. 원형 차트는 다양한 채널의 판매 비율을 표시하는 데 사용됩니다. 코드는 다음과 같습니다.
function drawChart(data) {
// 构造销售数据
var salesData = [];
var totalAmount = 0;
data.forEach(function(item) {
salesData.push({
name: item.channelName,
value: item.salesAmount
});
totalAmount += item.salesAmount;
});
// 绘制饼图
var pieChart = echarts.init(document.getElementById('chart-1'));
var pieOption = {
title: {
text: '不同渠道销售占比',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
name: '渠道',
type: 'pie',
radius: '60%',
data: salesData.sort(function(a, b) {
return a.value - b.value;
}),
itemStyle: {
normal: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
formatter: '{b} ({d}%)'
}
}
]
};
pieChart.setOption(pieOption); }
(2 ) 히스토그램
다음은 히스토그램을 그리는 것입니다. 히스토그램은 다양한 채널의 판매 순위를 표시하는 데 사용됩니다.
function drawChart(data) {
// 构造销售数据
var salesData = [];
data.forEach(function(item) {
salesData.push({
name: item.channelName,
value: item.salesAmount
});
});
salesData.sort(function(a, b) {
return b.value - a.value;
});
// 绘制柱状图
var barChart = echarts.init(document.getElementById('chart-2'));
var barOption = {
title: {
text: '不同渠道销售排名',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: '{b}: {c} 元'
},
xAxis: {
type: 'category',
data: salesData.map(function(item) {
return item.name;
}),
axisLabel: {
interval: 0,
rotate: 45
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '销售额',
type: 'bar',
data: salesData.map(function(item) {
return item.value;
}),
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae',
'#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570'
];
return colorList[params.dataIndex % colorList.length];
}
}
}
}
]
};
barChart.setOption(barOption);}
3. 효과 표시
마지막으로 달성된 효과는 아래 그림과 같습니다.
그림 1 채널별 판매 비율
그림 2 채널별 판매 순위
온라인 채널이 제공하는 차트를 보면 직관적으로 알 수 있습니다. 매출에서 가장 큰 비중을 차지하고 있는 반면, 온라인과 오프라인 채널의 매출 차이는 크지 않은 반면, 소셜미디어 채널을 통한 매출은 상대적으로 낮습니다. 이 데이터는 기업이 다양한 채널에서 비즈니스 기회를 이해하고 적절한 결정을 내리는 데 도움이 됩니다.
4. 요약
이 기사에서는 ECharts 및 Java 인터페이스를 사용하여 다중 채널 데이터 비교를 위한 통계 차트 디자인을 구현하는 방법을 소개합니다. 이러한 방식으로 다양한 채널의 판매 데이터를 시각적으로 표시할 수 있을 뿐만 아니라 기업이 채널 간의 경쟁과 비즈니스 기회를 더 잘 이해하여 해당 결정을 내리는 데 도움이 될 수 있습니다. 특정 구현은 다양한 비즈니스 시나리오에 적응하기 위해 필요에 따라 유연하게 조정될 수 있습니다.
위 내용은 ECharts 및 Java 인터페이스를 사용하여 다중 채널 데이터 비교를 위한 통계 차트 디자인 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!