Initial commit: caddy static file server workspace

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:33:50 +08:00
commit a98b21114c
1438 changed files with 15044 additions and 0 deletions
--- a/caddy/www/echarts_pie_chart_example.html
+++ b/caddy/www/echarts_pie_chart_example.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ECharts 圓餅圖 - 完整範例</title>
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: Arial, sans-serif;
+    }
+    /* 設定圖表容器，讓它能隨視窗大小縮放 */
+    #main {
+      width: 100%;
+      height: 100vh; /* 讓圖表高度等於視窗高度 */
+    }
+  </style>
+</head>
+<body>
+
+  <div id="main"></div>
+
+  <script type="text/javascript">
+    // 取得 HTML 容器 DOM
+    var chartDom = document.getElementById('main');
+    // 初始化 ECharts 實例
+    var myChart = echarts.init(chartDom);
+    var option;
+
+    // 設定圓餅圖的 option
+    option = {
+      title: {
+        text: '這是一個圓餅圖',
+        subtext: '簡單範例',
+        left: 'center'
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)'
+      },
+      legend: {
+        orient: 'vertical',
+        left: 'left',
+      },
+      series: [
+        {
+          name: '資料類別',
+          type: 'pie',
+          radius: '50%',
+          data: [
+            {value: 1048, name: 'Google'},
+            {value: 735, name: 'Apple'},
+            {value: 580, name: 'Microsoft'},
+            {value: 484, name: 'Amazon'},
+            {value: 300, name: 'Facebook'}
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    };
+
+    // 使用 option 顯示圖表
+    myChart.setOption(option);
+
+    // 加上 RWD 監聽事件
+    // 當瀏覽器視窗大小改變時，重新繪製圖表
+    window.addEventListener('resize', function() {
+        myChart.resize();
+    });
+  </script>
+</body>
+</html>