第一版策略

2026-03-03 17:20:42 +08:00
parent 79bf079548
commit 2a98d431a9
16 changed files with 145 additions and 1173 deletions
--- a/bb_chart_2026_03_02.html
+++ b/bb_chart_2026_03_02.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ETHUSDT 2026-03-02 K线 + 布林带</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        background: #111;
+        color: #eee;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+      }
+      #chart {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script>
+      async function main() {
+        // 从同目录加载由 Python 导出的 JSON 数据
+        const resp = await fetch("bb_chart_2026_03_02_data.json");
+        const raw = await resp.json();
+
+        const categoryData = [];
+        const klineData = [];
+        const upper = [];
+        const mid = [];
+        const lower = [];
+
+        for (const k of raw) {
+          const d = new Date(k.timestamp);
+          const label = `${d.getHours().toString().padStart(2, "0")}:${d
+            .getMinutes()
+            .toString()
+            .padStart(2, "0")}`;
+          categoryData.push(label);
+          klineData.push([k.open, k.close, k.low, k.high]);
+          upper.push(k.bb_upper);
+          mid.push(k.bb_mid);
+          lower.push(k.bb_lower);
+        }
+
+        const chartDom = document.getElementById("chart");
+        const chart = echarts.init(chartDom, null, { renderer: "canvas" });
+
+        const option = {
+          backgroundColor: "#111",
+          tooltip: {
+            trigger: "axis",
+            axisPointer: { type: "cross" },
+          },
+          axisPointer: {
+            link: [{ xAxisIndex: "all" }],
+          },
+          grid: {
+            left: "3%",
+            right: "3%",
+            top: "6%",
+            bottom: "5%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            data: categoryData,
+            scale: true,
+            boundaryGap: true,
+            axisLine: { lineStyle: { color: "#888" } },
+            axisLabel: { color: "#ccc" },
+          },
+          yAxis: {
+            scale: true,
+            axisLine: { lineStyle: { color: "#888" } },
+            splitLine: { lineStyle: { color: "#333" } },
+            axisLabel: { color: "#ccc" },
+          },
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+            {
+              type: "slider",
+              start: 0,
+              end: 100,
+              height: 20,
+            },
+          ],
+          series: [
+            {
+              name: "K线",
+              type: "candlestick",
+              data: klineData,
+              itemStyle: {
+                color: "#26a69a",
+                color0: "#ef5350",
+                borderColor: "#26a69a",
+                borderColor0: "#ef5350",
+              },
+            },
+            {
+              name: "BB上轨",
+              type: "line",
+              data: upper,
+              symbol: "none",
+              lineStyle: { color: "#ff9800", width: 1 },
+            },
+            {
+              name: "BB中轨",
+              type: "line",
+              data: mid,
+              symbol: "none",
+              lineStyle: { color: "#fff", width: 1, type: "dashed" },
+            },
+            {
+              name: "BB下轨",
+              type: "line",
+              data: lower,
+              symbol: "none",
+              lineStyle: { color: "#ff9800", width: 1 },
+            },
+          ],
+        };
+
+        chart.setOption(option);
+        window.addEventListener("resize", () => chart.resize());
+      }
+
+      main().catch((e) => {
+        console.error(e);
+        alert("加载数据失败，请确认 bb_chart_2026_03_02_data.json 已生成并与本 HTML 同目录。");
+      });
+    </script>
+  </body>
+</html>
+