ECharts と Java インターフェイスを使用して、マルチチャネル データ比較のための統計グラフの設計を実装します。

ECharts と Java インターフェイスを使用して、マルチチャネル データ比較のための統計グラフ デザインを実装する

インターネットの継続的な発展に伴い、グラフの種類はますます増えています。製品、およびこれらの製品は多くの場合、オンライン チャネル、オフライン チャネル、ソーシャル メディア チャネルなどのさまざまなチャネルを通じて販売されます。したがって、さまざまなチャネルの販売データを統計したり、さまざまなチャネル間の販売実績を比較したりすることは、企業の意思決定にとって非常に重要です。この記事では、ECharts と Java インターフェイスを使用して、マルチチャネル データ比較のための統計グラフのデザインを実装する方法を紹介します。

1. 準備

1. データベース テーブルの設計

まず、さまざまなチャネルからの販売データを保存するデータベース テーブルを設計する必要があります。この記事では、例として MySQL データベースを使用して、以下に示すように、「sales」という名前のデータベースとその中に「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
10,2) NOT NULL COMMENT '売上額', PRIMARY KEY ( id
)) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='さまざまなチャネルからの販売データ';
Java バックグラウンド コードの作成

次に、Java に戻ります。データベース内の販売データをフロントエンド ページに提供するには、終了コードを記述する必要があります。この記事では Spring Boot フレームワークを使用し、データ アクセスに MyBatis を使用します。コードは次のとおりです。

2. (1) ChannelSales エンティティ クラスの作成

public class ChannelSales {

private Integer id; // 销售记录ID
private String channelName; // 渠道名称
private Date salesDate; // 销售日期
private BigDecimal salesAmount; // 销售金额

// 省略getters和setters方法

}

(2) ChannelSalesMapper インターフェイスの作成

@Mapper

パブリック インターフェイス ChannelSalesMapper {

/**
 * 查询不同渠道的销售数据
 * @param startDate 开始日期
 * @param endDate 结束日期
 * @return 销售数据列表
 */
List<ChannelSales> selectByDate(@Param("startDate") Date startDate,
                                @Param("endDate") Date endDate);

}

(3) ChannelSalesServiceImpl 実装クラスを作成します

@Service

public class 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 と組み合わせます。

3. 2. 実装プロセス

売上データのクエリ

まず、フロントエンド ページからクエリの日付範囲を取得し、Ajax リクエストを送信します。さまざまなチャネルから売上データを取得するための背景。コードは次のとおりです:

1. // クエリの日付範囲ピッカー
$('#date-range').daterangepicker({

startDate: '2021-01-01',
endDate: '2021-12-31'

});

//クエリ ボタンのクリックをリッスンします。event
$('#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);
}

}

Drawグラフ

売上データを取得したら、ECharts.js を使用して、対応する統計グラフを描画できます。この記事では、円グラフと棒グラフを使用して、さまざまなチャネルの売上構成比と売上ランキングを表示します。

2. (1) 円グラフ

まず、円グラフの描画を見てみましょう。円グラフは、さまざまなチャネルの売上比率を表示するために使用されます。コードは次のとおりです:

functiondrawChart (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) Histogram

次のステップはヒストグラムを描画することです。ヒストグラムは、さまざまなチャネルの売上ランキング コードは次のとおりです:

functiondrawChart(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 中国語 Web サイトの他の関連記事を参照してください。