ECharts と Java インターフェイスを使用してチャートリンケージ統計分析を実装する方法-＆＃＆チュートリアル-php.cn

ECharts と Java インターフェイスを使用してチャートリンケージ統計分析を実装する方法

ECharts は JavaScript ベースのビジュアルチャートライブラリであり、さまざまなチャートを簡単に作成できます。折れ線グラフ、棒グラフ、円グラフなど。 Java は、エンタープライズアプリケーションで広く使用されている非常に人気のあるプログラミング言語です。この記事では、ECharts と Java インターフェイスを使用してチャート連携統計分析を実装する方法を紹介します。

1. 前提知識

この記事を読む前に、次の基本的な知識を知っておく必要があります:

HTML、CSS、JavaScript の基礎知識
Spring Boot などの Java 開発の基礎知識

2. 準備

ECharts の公式 Web サイトにはダウンロードリンクが用意されており、ECharts を直接ダウンロードして使用できます。

Spring Boot を使用して、単純な Java プロジェクトを作成できます。

3. データの準備

ECharts と Java インターフェイスを使用してチャートリンケージ統計分析を実装する前に、使用する必要があるデータを準備する必要があります。この記事では、簡単な例を使用します。

2 つのデータテーブルがあり、1 つは注文テーブル、もう 1 つは注文詳細テーブルであるとします。注文テーブルには、注文番号、注文金額、注文日などの注文の基本情報が保存されます。注文詳細テーブルには、商品名、数量、単価など、注文内の商品に関する詳細情報が保存されます。

ここで、毎日の注文数量と合計注文金額をカウントしたいと思います。データは次のように処理できます。

毎日の注文数をクエリし、毎日の注文数量を計算します。
毎日の注文金額をクエリし、毎日の合計注文金額を計算します。

4. バックエンドの実装

データを表す Java エンティティクラスを作成する必要があります。データ表。この記事では、Order と OrderItem という 2 つの Java エンティティクラスを作成する必要があります。

@Entity
@Table(name = "t_order")
public class Order {
 
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
 
    @Column(name = "order_no")
    private String orderNo;
 
    @Column(name = "order_amount")
    private BigDecimal orderAmount;
 
    @Column(name = "order_date")
    private LocalDate orderDate;
 
    // getter、setter方法
 
}

ログイン後にコピー

@Entity
@Table(name = "t_order_item")
public class OrderItem {
 
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
 
    @Column(name = "order_id")
    private Long orderId;
 
    @Column(name = "product_name")
    private String productName;
 
    @Column(name = "product_price")
    private BigDecimal productPrice;
 
    @Column(name = "product_quantity")
    private Integer productQuantity;
 
    // getter、setter方法
 
}

ログイン後にコピー

データをクエリするためのインターフェイスを公開し、クエリ結果をフロントエンドに返す Java インターフェイスを作成する必要があります。この例では、OrderService インターフェイスを作成し、getOrderCountByDate と getOrderAmountByDate という 2 つのメソッドを追加できます。毎日の注文数量と合計注文金額をそれぞれクエリするために使用されます。

public interface OrderService {
 
    List<Map<String, Object>> getOrderCountByDate();
 
    List<Map<String, Object>> getOrderAmountByDate();
 
}

ログイン後にコピー

インターフェースを実装する場合、データベースを操作するために Spring JPA を使用する必要があります。 getOrderCountByDate メソッドでは、グループクエリを実行して 1 日あたりの注文数をカウントする必要があります。 getOrderAmountByDate メソッドでは、グループクエリを実行して、1 日の合計注文金額をカウントする必要があります。

@Service
public class OrderServiceImpl implements OrderService {
 
    @PersistenceContext
    private EntityManager em;
 
    @Override
    public List<Map<String, Object>> getOrderCountByDate() {
        String sql = "SELECT order_date, COUNT(*) AS order_count FROM t_order GROUP BY order_date";
        Query query = em.createNativeQuery(sql);
        List<Object[]> list = query.getResultList();
        List<Map<String, Object>> result = new ArrayList<>(list.size());
        for (Object[] array : list) {
            Map<String, Object> map = new HashMap<>();
            map.put("orderDate", array[0]);
            map.put("orderCount", array[1]);
            result.add(map);
        }
        return result;
    }
 
    @Override
    public List<Map<String, Object>> getOrderAmountByDate() {
        String sql = "SELECT order_date, SUM(order_amount) AS order_amount FROM t_order GROUP BY order_date";
        Query query = em.createNativeQuery(sql);
        List<Object[]> list = query.getResultList();
        List<Map<String, Object>> result = new ArrayList<>(list.size());
        for (Object[] array : list) {
            Map<String, Object> map = new HashMap<>();
            map.put("orderDate", array[0]);
            map.put("orderAmount", array[1]);
            result.add(map);
        }
        return result;
    }
 
}

ログイン後にコピー

4. フロントエンドの実装

ECharts チャートを表示するには HTML ページを作成する必要があります。この記事では、orderCountChart と orderAmountChart という 2 つの ECharts チャートを含む単純な HTML ページを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts Demo</title>
</head>
<body>
 
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
 
<script src="echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="db.js"></script>
 
<script>
    $(function () {
        getOrderCountByDate();
        getOrderAmountByDate();
    });
 
    function getOrderCountByDate() {
        $.ajax({
            url: '/api/orders/countByDate',
            type: 'GET',
            success: function (data) {
                var orderCountChart = echarts.init(document.getElementById('main1'));
                var option = {
                    title: {
                        text: '订单数量'
                    },
                    tooltip: {},
                    xAxis: {
                        data: data.map(function (item) {
                            return item.orderDate;
                        })
                    },
                    yAxis: {},
                    series: [{
                        name: '订单数量',
                        type: 'bar',
                        data: data.map(function (item) {
                            return item.orderCount;
                        })
                    }]
                };
                orderCountChart.setOption(option);
                orderCountChart.on('click', function (params) {
                    getOrderItemsByDate(params.name);
                });
            }
        });
    }
 
    function getOrderAmountByDate() {
        $.ajax({
            url: '/api/orders/amountByDate',
            type: 'GET',
            success: function (data) {
                var orderAmountChart = echarts.init(document.getElementById('main2'));
                var option = {
                    title: {
                        text: '订单金额'
                    },
                    tooltip: {},
                    xAxis: {
                        data: data.map(function (item) {
                            return item.orderDate;
                        })
                    },
                    yAxis: {},
                    series: [{
                        name: '订单金额',
                        type: 'bar',
                        data: data.map(function (item) {
                            return item.orderAmount;
                        })
                    }]
                };
                orderAmountChart.setOption(option);
                orderAmountChart.on('click', function (params) {
                    getOrderItemsByDate(params.name);
                });
            }
        });
    }
 
    function getOrderItemsByDate(orderDate) {
        console.log('Order date:', orderDate);
    }
 
</script>
 
</body>
</html>

ログイン後にコピー

Java インターフェイスを呼び出し、EChart を使用してクエリ結果を表示するための JavaScript ファイルを作成する必要があります。この記事では、getOrderCountByDate と getOrderAmountByDate という 2 つの関数を含む db.js という名前の JavaScript ファイルを作成します。これら 2 つの関数は、それぞれ毎日の注文数量と合計注文金額をクエリし、ECharts チャートに表示するために使用されます。

function getOrderCountByDate() {
    $.ajax({
        url: '/api/orders/countByDate',
        type: 'GET',
        success: function (data) {
            var orderCountChart = echarts.init(document.getElementById('main1'));
            var option = {
                title: {
                    text: '订单数量'
                },
                tooltip: {},
                xAxis: {
                    data: data.map(function (item) {
                        return item.orderDate;
                    })
                },
                yAxis: {},
                series: [{
                    name: '订单数量',
                    type: 'bar',
                    data: data.map(function (item) {
                        return item.orderCount;
                    })
                }]
            };
            orderCountChart.setOption(option);
            orderCountChart.on('click', function (params) {
                getOrderItemsByDate(params.name);
            });
        }
    });
}
 
function getOrderAmountByDate() {
    $.ajax({
        url: '/api/orders/amountByDate',
        type: 'GET',
        success: function (data) {
            var orderAmountChart = echarts.init(document.getElementById('main2'));
            var option = {
                title: {
                    text: '订单金额'
                },
                tooltip: {},
                xAxis: {
                    data: data.map(function (item) {
                        return item.orderDate;
                    })
                },
                yAxis: {},
                series: [{
                    name: '订单金额',
                    type: 'bar',
                    data: data.map(function (item) {
                        return item.orderAmount;
                    })
                }]
            };
            orderAmountChart.setOption(option);
            orderAmountChart.on('click', function (params) {
                getOrderItemsByDate(params.name);
            });
        }
    });
}

ログイン後にコピー

5. 実行例

ECharts と Java インターフェイスを使用してチャートリンケージ統計分析を実装します。次に、この例を実行して効果を確認しましょう。

#Java アプリケーションを開始します