ECharts 및 Java 인터페이스를 사용하여 다중 채널 데이터 비교를 위한 통계 차트 디자인 구현

ECharts 및 Java 인터페이스를 사용하여 다중 채널 데이터 비교를 위한 통계 차트 디자인 구현

인터넷의 지속적인 발전으로 인해 점점 더 다양한 제품이 시장에 등장했으며 이러한 제품은 종종 다른 채널을 통해 판매됩니다. , 온라인 채널, 오프라인 채널, 소셜 미디어 채널 등 따라서 다양한 채널의 판매 데이터에 대한 통계와 채널별 판매 실적 비교는 기업의 의사결정에 있어 매우 중요한 의미를 갖습니다. 이 기사에서는 ECharts 및 Java 인터페이스를 사용하여 다중 채널 데이터 비교를 위한 통계 차트 디자인을 구현하는 방법을 소개합니다.

1. 준비

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=' 다양한 채널의 판매 데이터';

2. 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);
}

}

3. 프런트 엔드 페이지 디자인

마지막으로 프런트 엔드 페이지는 판매 데이터 비교를 표시하도록 디자인되어야 합니다. 다양한 채널에서. 이 기사에서는 Echarts.js를 차트 라이브러리로 사용하고 페이지 레이아웃을 위해 Bootstrap과 결합합니다.

2. 구현 프로세스

1. 판매 데이터 쿼리

먼저 프런트 엔드 페이지에서 쿼리 날짜 범위를 가져오고 백엔드에 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);
}

}

2. 차트 그리기

판매 데이터를 얻은 후 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!