利用ECharts和Java介面實現多通路資料對比的統計圖設計
隨著網路的不斷發展，市場上湧現了越來越多種類繁多的產品，而這些產品往往是透過不同的管道銷售，如線上管道、線下管道、社群媒體管道等等。因此，統計不同管道的銷售數據以及不同管道之間的銷售績效對比，對於企業決策具有很重要的意義。本文將介紹如何利用ECharts和Java介面實現多通路資料對比的統計圖設計。
一、準備工作
- 資料庫表設計
#首先，需要設計資料庫表，以儲存不同管道的銷售資料。本文以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 class ChannelSales {
private Integer id; // 销售记录ID
private String channelName; // 渠道名称
private Date salesDate; // 销售日期
private BigDecimal salesAmount; // 销售金额
// 省略getters和setters方法
登入後複製
}
（2）建立ChannelSalesMapper介面
@Mapper
public interface ChannelSalesMapper {
/**
* 查询不同渠道的销售数据
* @param startDate 开始日期
* @param endDate 结束日期
* @return 销售数据列表
*/
List<ChannelSales> selectByDate(@Param("startDate") Date startDate,
@Param("endDate") Date endDate);登入後複製
}
（3）建立ChannelSalesServiceImpl實作類別
@Service
public class ChannelSalesServiceImpl implements 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進行頁面佈局。
二、實作流程
查詢銷售資料
#首先，從前端頁面取得查詢日期範圍，並傳送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);登入後複製
}
三、效果展示
最後，將實現的效果展示如下圖所示：
圖1 不同通路銷售佔比
圖2 不同通路銷售排名
從圖表中可以直觀地看出，線上通路銷售佔比最大，同時，線上通路和線下通路的銷售額相差不大，但社群媒體管道的銷售額相對較低。這些數據有助於企業了解不同通路商機並做出相應決策。
四、總結
本文介紹如何利用ECharts和Java介面實現多通路資料對比的統計圖設計。透過這種方式，不僅可以直觀地顯示不同管道的銷售數據，而且可以幫助企業更了解通路間的競爭情況和商機，從而做出相應決策。具體實現可以根據自己的需求進行靈活調整，以適應不同的業務場景。
以上是利用ECharts和Java介面實現多通路資料對比的統計圖設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！
