Dalam beberapa tahun kebelakangan ini, pembangunan data besar telah menjadikan visualisasi data bidang yang semakin penting. Visualisasi data bukan sahaja memudahkan orang untuk memahami dan menganalisis data, tetapi juga meningkatkan keindahan data. Dalam bidang visualisasi, carta statistik 3D ialah kaedah yang biasa digunakan yang boleh memaparkan ciri-ciri data dengan lebih intuitif. Artikel ini akan memperkenalkan cara menggunakan antara muka ECharts dan Java untuk mencipta carta statistik 3D yang cantik dan memberikan contoh kod khusus.
[ECharts](https://echarts.apache.org/zh/index.html) ialah pustaka visualisasi berasaskan JavaScript sumber terbuka untuk membina antara muka penggambaran data yang interaktif dan cekap. ECharts menyokong pelbagai jenis carta termasuk carta bar, carta garis, carta serakan, peta, dll. Ia juga menyokong data dinamik dan ciri interaktif.
Dalam kebanyakan kes, kita perlu mendapatkan data dari latar belakang untuk melukis carta. Oleh itu, kita perlu menggunakan antara muka Java untuk mendapatkan data. Antara muka Java ialah teknologi yang digunakan untuk berinteraksi dengan latar belakang dan mendapatkan data. Dalam artikel ini, kami akan menggunakan antara muka Java untuk mendapatkan data yang dijana secara rawak untuk melukis carta statistik 3D.
Mula-mula, kita perlu memuat turun ECharts. Anda boleh memuat turun versi terkini daripada [tapak web rasmi ECharts](https://echarts.apache.org/zh/download.html). Selain itu, kami juga memerlukan Java IDE (seperti Eclipse) untuk menulis kod Java.
Berikut ialah kod Java untuk mendapatkan data yang dijana secara rawak dari latar belakang:
@RequestMapping("/getChartData")
@ResponseBody
public String getChartData() {
int min = 1;
int max = 100;
JSONArray jsonArray = new JSONArray();
for(int i = 0; i < 10; i++) {
int num1 = (int)(Math.random() * (max - min) + min);
int num2 = (int)(Math.random() * (max - min) + min);
int num3 = (int)(Math.random() * (max - min) + min);
jsonArray.add(new JSONArray(Arrays.asList("data" + (i + 1), num1, num2, num3)));
}
return jsonArray.toJSONString();
}Dalam kod di atas, kami menggunakan rangka kerja Spring MVC untuk menulis kod Java. Pertama, kami menetapkan nilai maksimum dan minimum. Kemudian, jana tiga integer secara rawak melalui kaedah Math.random() dan tambahkannya pada objek JSONArray. Akhir sekali, kami menukar objek JSONArray kepada rentetan dan belakang.
Berikut ialah kod HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D统计图示例</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="myChart" style="width: 800px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: '3D统计图示例'
},
tooltip: {},
legend: {
data: ['data1', 'data2', 'data3']
},
xAxis: {
type: 'category',
data: []
},
yAxis: {},
zAxis: {},
grid3D: {},
series: [{
name: 'data1',
type: 'bar3D',
data: []
},{
name: 'data2',
type: 'bar3D',
data: []
},{
name: 'data3',
type: 'bar3D',
data: []
}]
};
myChart.setOption(option);
$.ajax({
url: 'getChartData',
type: 'POST',
success: function (data) {
data = JSON.parse(data);
var xAxisData = data.map(function (item) {
return item[0];
});
var data1 = [], data2 = [], data3 = [];
for(var i = 0; i < data.length; i++) {
data1.push([data[i][0], data[i][1], i]);
data2.push([data[i][0], data[i][2], i]);
data3.push([data[i][0], data[i][3], i]);
}
myChart.setOption({
xAxis: {
data: xAxisData
},
series: [{
data: data1
}, {
data: data2
}, {
data: data3
}]
});
}
});
</script>
</body>
</html>Dalam kod di atas, kami telah menggunakan perpustakaan jQuery untuk mendapatkan data yang dijana secara rawak. Mula-mula, kami mencipta elemen div untuk memaparkan carta statistik 3D. Kemudian, kami menggunakan kaedah echarts.init() untuk memulakan carta statistik 3D dan menetapkan beberapa pilihan asas, seperti paksi koordinat, legenda, dsb. Seterusnya, kami menggunakan kaedah $.ajax() untuk mendapatkan data dari latar belakang dan memaparkan data dalam carta statistik 3D.
Perlu dinyatakan bahawa kami juga menggunakan tiga warna berbeza untuk mewakili siri data yang berbeza.
Akhir sekali, kami boleh membuka fail HTML dalam pelayar untuk menjalankan program kami. Dalam pelayar, kita boleh melihat carta statistik 3D yang cantik.
Artikel ini memperkenalkan cara menggunakan ECharts dan antara muka Java untuk mencipta carta statistik 3D yang cantik. Kami mula-mula mendapatkan data yang dijana secara rawak dari latar belakang, dan kemudian menggunakan ECharts untuk menggambarkan data. Dengan cara ini, kami dapat memahami dan menganalisis data dengan lebih intuitif dan meningkatkan keindahan data. Jika anda berminat dengan visualisasi data, anda juga boleh cuba menggunakan ECharts dan antara muka Java untuk membina program visualisasi data anda sendiri!
Atas ialah kandungan terperinci Cara menggunakan antara muka ECharts dan Java untuk mencipta carta statistik 3D yang cantik. 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)
