利用ECharts和Java接口实现多渠道数据对比的统计图设计

百变鹏仔 3周前 (11-27) #echarts

文章标签多渠道

随着互联网的不断发展，市场上涌现了越来越多种类繁多的产品，而这些产品往往是通过不同的渠道销售，如线上渠道、线下渠道、社交媒体渠道等等。因此，统计不同渠道的销售数据以及不同渠道之间的销售业绩对比，对于企业决策具有很重要的意义。本文将介绍如何利用ECharts和Java接口实现多渠道数据对比的统计图设计。

一、准备工作

数据库表设计

首先，需要设计数据库表，以存储不同渠道的销售数据。本文以MySQL数据库为例，创建一个名为“sales”的数据库，并在其中创建一个名为“channel_sales”的数据表，如下所示：

立即学习“Java免费学习笔记（深入）”；

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; // 销售记录IDprivate 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);</channelsales>

}

（3）创建ChannelSalesServiceImpl实现类

@Service
public class ChannelSalesServiceImpl implements ChannelSalesService {

@Autowiredprivate ChannelSalesMapper channelSalesMapper;/** * 查询不同渠道的销售数据 * @param startDate 开始日期 * @param endDate 结束日期 * @return 销售数据列表 */@Overridepublic List<channelsales> getSalesData(Date startDate, Date endDate) {    return channelSalesMapper.selectByDate(startDate, endDate);}</channelsales>

}

前端页面设计

最后，需要设计前端页面，以便展示不同渠道的销售数据对比。本文采用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 {

@Autowiredprivate 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);}</channelsales>

}

绘制图表

一旦获取到销售数据，就可以利用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接口实现多渠道数据对比的统计图设计

详解在React 组件中使用Echarts的正确姿势

PHP 使用Echarts生成数据统计报表详解

canvas使用贝塞尔曲线平滑拟合折线段的方法详解

echarts实现去掉X轴、Y轴和网格线效果实例分享

vue.js将echarts封装为组件一键使用