利用ECharts和Java介面實現多通路資料對比的統計圖設計

利用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 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中文網其他相關文章！