Cara menggunakan ECharts dan antara muka Java untuk melaksanakan analisis statistik pautan carta
ECharts ialah perpustakaan carta visual berdasarkan JavaScript, yang boleh membantu kami membuat pelbagai carta dengan mudah, seperti carta garis, carta bar dan pai carta. Java ialah bahasa pengaturcaraan yang sangat popular yang digunakan secara meluas dalam aplikasi perusahaan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan antara muka ECharts dan Java untuk melaksanakan analisis statistik pautan carta.
1. Pengetahuan prasyarat
Sebelum mempelajari artikel ini, anda perlu mengetahui pengetahuan asas berikut:
- Pengetahuan asas HTML, CSS, JavaScript
- Pengetahuan asas pembangunan Java, seperti Spring Boot
- Pengetahuan asas ECharts, seperti konfigurasi Asas ECharts, format data ECharts, dsb.
2. Persediaan
- Pasang ECharts
Laman web rasmi ECharts menyediakan pautan muat turun, kami boleh memuat turun terus ECharts dan menggunakannya.
- Buat projek Java
Kita boleh menggunakan Spring Boot untuk mencipta projek Java yang mudah.
3. Penyediaan data
Sebelum kami menggunakan antara muka ECharts dan Java untuk melaksanakan analisis statistik pautan carta, kami perlu menyediakan data untuk digunakan. Dalam artikel ini, kami menggunakan contoh mudah.
Katakan kita mempunyai dua jadual data, satu jadual pesanan dan satu lagi jadual butiran pesanan. Jadual pesanan menyimpan maklumat asas pesanan, seperti nombor pesanan, jumlah pesanan, tarikh pesanan, dll. Jadual butiran pesanan menyimpan maklumat terperinci tentang produk dalam pesanan, seperti nama produk, kuantiti, harga unit, dsb.
Sekarang kami ingin mengira kuantiti pesanan harian dan jumlah jumlah pesanan. Kita boleh mengikuti langkah berikut untuk memproses data:
- Kumpulkan mengikut hari berdasarkan tarikh pesanan dalam jadual pesanan.
- Soal nombor pesanan setiap hari dan kira kuantiti pesanan harian.
- Soal amaun pesanan untuk setiap hari dan kira jumlah amaun pesanan untuk setiap hari.
4. Pelaksanaan back-end
- Buat kelas entiti Java
Kita perlu mencipta kelas entiti Java untuk mewakili data dalam jadual data. Dalam artikel ini, kita perlu mencipta dua kelas entiti Java: Order dan OrderItem.
@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方法
}Salin selepas log masuk
@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方法
}Salin selepas log masuk
- Buat antara muka Java
Kita perlu mencipta antara muka Java untuk mendedahkan antara muka untuk pertanyaan data dan mengembalikan hasil pertanyaan ke bahagian hadapan. Dalam contoh ini, kita boleh mencipta antara muka OrderService dan menambah dua kaedah: getOrderCountByDate dan getOrderAmountByDate. Digunakan untuk menanyakan kuantiti pesanan harian dan jumlah pesanan masing-masing.
public interface OrderService {
List<Map<String, Object>> getOrderCountByDate();
List<Map<String, Object>> getOrderAmountByDate();
}Salin selepas log masuk
- Melaksanakan antara muka Java
Apabila kita melaksanakan antara muka, kita perlu menggunakan Spring JPA untuk mengendalikan pangkalan data. Dalam kaedah getOrderCountByDate, kita perlu melakukan pertanyaan kumpulan untuk mengira bilangan pesanan setiap hari. Dalam kaedah getOrderAmountByDate, kita perlu melakukan pertanyaan kumpulan untuk mengira jumlah amaun pesanan harian.
@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;
}
}Salin selepas log masuk
4. Pelaksanaan bahagian hadapan
- Buat halaman HTML
Kita perlu mencipta halaman HTML untuk memaparkan carta ECharts. Dalam artikel ini, kami mencipta halaman HTML ringkas yang mengandungi dua carta ECharts: orderCountChart dan orderAmountChart.
<!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>Salin selepas log masuk
- Buat fail JavaScript
Kita perlu mencipta fail JavaScript untuk memanggil antara muka Java dan menggunakan ECharts untuk memaparkan hasil pertanyaan. Dalam artikel ini, kami mencipta fail JavaScript bernama db.js yang mengandungi dua fungsi: getOrderCountByDate dan getOrderAmountByDate. Kedua-dua fungsi ini digunakan untuk menanyakan kuantiti pesanan harian dan jumlah amaun pesanan masing-masing dan memaparkannya dalam carta 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);
});
}
});
}Salin selepas log masuk
5. Contoh Berjalan
Kami menggunakan antara muka ECharts dan Java untuk melaksanakan analisis statistik pautan carta Sekarang mari jalankan contoh ini untuk melihat kesannya.
- Mulakan aplikasi Java
Di terminal, masukkan direktori di mana projek Java terletak, dan masukkan arahan berikut:
mvn spring-boot:run
Salin selepas log masuk
- Buka halaman HTML dalam penyemak imbas
Masukkan http:// dalam pelayar localhost:8080 boleh membuka halaman yang kami tulis dan memaparkan carta.
- Klik pada carta
Kita boleh klik pada carta untuk melihat butiran pesanan yang diletakkan pada tarikh semasa.
Artikel ini memperkenalkan cara menggunakan ECharts dan antara muka Java untuk melaksanakan analisis statistik pautan carta. Dalam contoh ini, kami menggunakan Spring Boot untuk melaksanakan antara muka Java dan ECharts untuk memaparkan hasil pertanyaan. Apabila menggunakan contoh dalam artikel ini, anda perlu mengubah suainya agar sesuai dengan keperluan sebenar anda.
Atas ialah kandungan terperinci Cara menggunakan antara muka ECharts dan Java untuk melaksanakan analisis statistik pautan carta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
