ECharts と Java インターフェイスを使用してチャート リンケージ統計分析を実装する方法
ECharts は JavaScript ベースのビジュアル チャート ライブラリであり、さまざまなチャートを簡単に作成できます。折れ線グラフ、棒グラフ、円グラフなど。 Java は、エンタープライズ アプリケーションで広く使用されている非常に人気のあるプログラミング言語です。この記事では、ECharts と Java インターフェイスを使用してチャート連携統計分析を実装する方法を紹介します。
1. 前提知識
この記事を読む前に、次の基本的な知識を知っておく必要があります:
- HTML、CSS、JavaScript の基礎知識
- Spring Boot などの Java 開発の基礎知識
#ECharts の基本構成、ECharts データ形式などの ECharts の基礎知識-
2. 準備
ECharts のインストール-
ECharts の公式 Web サイトにはダウンロード リンクが用意されており、ECharts を直接ダウンロードして使用できます。
Java プロジェクトの作成-
Spring Boot を使用して、単純な Java プロジェクトを作成できます。
3. データの準備
ECharts と Java インターフェイスを使用してチャート リンケージ統計分析を実装する前に、使用する必要があるデータを準備する必要があります。この記事では、簡単な例を使用します。
2 つのデータ テーブルがあり、1 つは注文テーブル、もう 1 つは注文詳細テーブルであるとします。注文テーブルには、注文番号、注文金額、注文日などの注文の基本情報が保存されます。注文詳細テーブルには、商品名、数量、単価など、注文内の商品に関する詳細情報が保存されます。
ここで、毎日の注文数量と合計注文金額をカウントしたいと思います。データは次のように処理できます。
注文テーブルの注文日に基づいて日ごとにグループ化します。 - 毎日の注文数をクエリし、毎日の注文数量を計算します。
- 毎日の注文金額をクエリし、毎日の合計注文金額を計算します。
-
4. バックエンドの実装
Java エンティティ クラスの作成-
データを表す 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 インターフェイスの作成
データをクエリするためのインターフェイスを公開し、クエリ結果をフロントエンドに返す Java インターフェイスを作成する必要があります。この例では、OrderService インターフェイスを作成し、getOrderCountByDate と getOrderAmountByDate という 2 つのメソッドを追加できます。毎日の注文数量と合計注文金額をそれぞれクエリするために使用されます。
public interface OrderService {
List<Map<String, Object>> getOrderCountByDate();
List<Map<String, Object>> getOrderAmountByDate();
}ログイン後にコピー
Java インターフェースの実装
インターフェースを実装する場合、データベースを操作するために 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. フロントエンドの実装
HTML ページの作成
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>ログイン後にコピー
JavaScript ファイルの作成
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 アプリケーションを開始します
- #ターミナルで、Java プロジェクトが存在するディレクトリを入力し、次のコマンドを入力します:
mvn spring-boot:run
ログイン後にコピー
In ブラウザで HTML ページを開きます
- ブラウザに http://localhost:8080 と入力して、作成したページを開いてグラフを表示します。
チャートをクリック
- チャートをクリックすると、現在の日付に行われた注文の詳細が表示されます。
この記事では、ECharts と Java インターフェイスを使用してチャート リンケージ統計分析を実装する方法を紹介します。この例では、Spring Boot を使用して Java インターフェイスを実装し、ECharts を使用してクエリ結果を表示しました。この記事の例を使用する場合は、実際のニーズに合わせて変更する必要があります。 以上がECharts と Java インターフェイスを使用してチャート リンケージ統計分析を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
