ECharts と Java インターフェイスを使用してチャート リンケージ統計分析を実装する方法
ECharts は JavaScript ベースのビジュアル チャート ライブラリであり、さまざまなチャートを簡単に作成できます。折れ線グラフ、棒グラフ、円グラフなど。 Java は、エンタープライズ アプリケーションで広く使用されている非常に人気のあるプログラミング言語です。この記事では、ECharts と Java インターフェイスを使用してチャート連携統計分析を実装する方法を紹介します。
1. 前提知識
この記事を読む前に、次の基本的な知識を知っておく必要があります:
@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方法 }
public interface OrderService { List<Map<String, Object>> getOrderCountByDate(); List<Map<String, Object>> getOrderAmountByDate(); }
@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. フロントエンドの実装
<!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>
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 アプリケーションを開始します
mvn spring-boot:run
In ブラウザで HTML ページを開きます
チャートをクリック
以上がECharts と Java インターフェイスを使用してチャート リンケージ統計分析を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。