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 백엔드 코드를 작성해야 합니다. 이 기사에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
