docs(bigdata-system-dev): 大数据系统开发实验3，添加 ECharts 图表示例

- 新增 K 线图、折线图、散点图、柱状图、热力图、雷达图和饼图的 HTML 文件- 添加 Main.java 文件作为项目入口 - 创建 pom.xml 文件配置 Maven 项目
2025-05-13 11:09:27 +08:00
parent b2f5b0e40b
commit 1a1d4b52f4
10 changed files with 86366 additions and 0 deletions
--- a/bigdata-system-dev/src/main/java/cn/vscoder/experiment_3/雷达图.html
+++ b/bigdata-system-dev/src/main/java/cn/vscoder/experiment_3/雷达图.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>雷达图</title>
+    <script src="js/echarts.js"></script>
+</head>
+
+<body>
+<div id="main" style="width:800px;height:800px;"></div>
+
+<script>
+    var chartDom = document.getElementById('main');
+    var myChart = echarts.init(chartDom);
+    var option;
+
+    option = {
+        title: {
+            text: '雷达图'
+        },
+        legend: {
+            data: ['Allocated Budget', 'Actual Spending']
+        },
+        radar: {
+            // shape: 'circle',
+            indicator: [
+                {name: 'Sales', max: 6500},
+                {name: 'Administration', max: 16000},
+                {name: 'Information Technology', max: 30000},
+                {name: 'Customer Support', max: 38000},
+                {name: 'Development', max: 52000},
+                {name: 'Marketing', max: 25000}
+            ]
+        },
+        series: [
+            {
+                name: 'Budget vs spending',
+                type: 'radar',
+                data: [
+                    {
+                        value: [4200, 3000, 20000, 35000, 50000, 18000],
+                        name: 'Allocated Budget'
+                    },
+                    {
+                        value: [5000, 14000, 28000, 26000, 42000, 21000],
+                        name: 'Actual Spending'
+                    }
+                ]
+            }
+        ]
+    };
+
+    option && myChart.setOption(option);
+</script>
+</body>
+</html>