146 lines
3.9 KiB
HTML
146 lines
3.9 KiB
HTML
<!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>
|
|
|