(function () { var chartEl = document.getElementById('market-chart'); var emptyEl = document.getElementById('market-chart-empty'); var wrapEl = chartEl && chartEl.parentElement; var chart = null; var currentPeriod = '15m'; var quoteTimer = null; var klineTimer = null; var lastData = null; var klineLoading = false; var FAST_PERIODS = ['timeshare', '1m', '2m', '5m', '15m', '1h', '2h', '4h']; function getSymbol() { var hidden = document.getElementById('market-symbol-hidden'); var input = document.getElementById('market-symbol-input'); if (hidden && hidden.value) return hidden.value.trim(); if (input && input.value) return input.value.trim(); return ''; } function getMarketCodes() { return { symbol: getSymbol(), market_code: (document.getElementById('market-market-code') || {}).value || '', sina_code: (document.getElementById('market-sina-code') || {}).value || '', }; } function themeColors() { var dark = document.documentElement.getAttribute('data-theme') !== 'light'; return { bg: dark ? '#0a0c14' : '#f4f7fc', text: dark ? '#a8b0c8' : '#5c6578', title: dark ? '#e8eaf6' : '#1a2233', grid: dark ? '#1a2038' : '#e2e8f0', up: dark ? '#4cd97f' : '#15803d', down: dark ? '#ff6b7a' : '#dc2626', line: dark ? '#4cc2ff' : '#2563eb', area: dark ? 'rgba(76,194,255,0.12)' : 'rgba(37,99,235,0.1)', slider: dark ? '#1e2640' : '#cbd5e1', sliderFill: dark ? '#4cc2ff' : '#2563eb', }; } function isTradingSession() { var d = new Date(); var wd = d.getDay(); if (wd === 0) return false; if (wd === 6 && d.getHours() < 21) return false; var t = d.getHours() * 60 + d.getMinutes(); function inRange(sh, sm, eh, em) { return t >= sh * 60 + sm && t < eh * 60 + em; } if (inRange(9, 0, 11, 30)) return true; if (inRange(13, 30, 15, 0)) return true; if (inRange(21, 0, 24, 0)) return true; if (inRange(0, 0, 2, 30)) return true; return false; } function klinePollMs() { if (!isTradingSession()) return 0; if (currentPeriod === 'timeshare' || FAST_PERIODS.indexOf(currentPeriod) >= 0) { return 1000; } if (currentPeriod === 'd' || currentPeriod === 'w') return 30000; return 5000; } function quotePollMs() { return isTradingSession() ? 1000 : 10000; } function initChart() { if (!chartEl || !window.echarts) return; chart = echarts.init(chartEl); window.addEventListener('resize', function () { if (chart) chart.resize(); }); document.addEventListener('click', function (e) { if (e.target.closest('[data-theme-pick]')) { setTimeout(function () { if (chart && lastData) renderChart(lastData, true); }, 100); } }); } function getDataZoom(c, preserve) { var defStart = currentPeriod === 'timeshare' ? 60 : 75; var zoom = [ { type: 'inside', xAxisIndex: [0, 1], start: defStart, end: 100, zoomOnMouseWheel: true, moveOnMouseMove: true, moveOnMouseWheel: false, }, { type: 'slider', xAxisIndex: [0, 1], start: defStart, end: 100, height: 22, bottom: 4, borderColor: c.grid, backgroundColor: c.bg, fillerColor: c.area, handleStyle: { color: c.sliderFill }, dataBackground: { lineStyle: { color: c.grid }, areaStyle: { color: c.area }, }, textStyle: { color: c.text, fontSize: 10 }, }, ]; if (preserve && chart) { var opt = chart.getOption(); if (opt && opt.dataZoom) { opt.dataZoom.forEach(function (z, i) { if (zoom[i] && z.start != null && z.end != null) { zoom[i].start = z.start; zoom[i].end = z.end; } }); } } return zoom; } function renderChart(data, preserveZoom) { if (!chart) return; lastData = data; var c = themeColors(); var bars = data.bars || []; var times = bars.map(function (b) { return b.time; }); var isLine = data.chart_type === 'line' || data.period === 'timeshare'; var dataZoom = getDataZoom(c, preserveZoom); var grids = [ { left: 56, right: 20, top: 44, height: '50%' }, { left: 56, right: 20, top: '66%', height: '14%' }, ]; var base = { backgroundColor: c.bg, animation: false, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, axisPointer: { link: [{ xAxisIndex: 'all' }] }, dataZoom: dataZoom, grid: grids, xAxis: [ { type: 'category', data: times, gridIndex: 0, axisLabel: { color: c.text, fontSize: 10 }, axisLine: { lineStyle: { color: c.grid } } }, { type: 'category', data: times, gridIndex: 1, axisLabel: { show: false }, axisLine: { lineStyle: { color: c.grid } } }, ], yAxis: [ { scale: true, gridIndex: 0, splitLine: { lineStyle: { color: c.grid } }, axisLabel: { color: c.text } }, { scale: true, gridIndex: 1, splitLine: { show: false }, axisLabel: { color: c.text, fontSize: 10 }, splitNumber: 2 }, ], }; if (isLine) { var closes = bars.map(function (b) { return b.close; }); var vols = bars.map(function (b) { return b.volume; }); chart.setOption(Object.assign(base, { series: [ { name: '价格', type: 'line', data: closes, smooth: true, showSymbol: false, lineStyle: { width: 1.5, color: c.line }, areaStyle: { color: c.area }, xAxisIndex: 0, yAxisIndex: 0, }, { name: '成交量', type: 'bar', data: vols, itemStyle: { color: c.area }, xAxisIndex: 1, yAxisIndex: 1, }, ], }), true); } else { var candle = bars.map(function (b) { return [b.open, b.close, b.low, b.high]; }); var vols = bars.map(function (b) { var up = b.close >= b.open; return { value: b.volume, itemStyle: { color: up ? c.up : c.down, opacity: 0.65 }, }; }); chart.setOption(Object.assign(base, { tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, formatter: function (params) { var idx = params[0] && params[0].dataIndex; if (idx == null || !bars[idx]) return ''; var b = bars[idx]; return [ b.time, '开 ' + b.open, '高 ' + b.high, '低 ' + b.low, '收 ' + b.close, '量 ' + b.volume, ].join('
'); }, }, series: [ { name: 'K线', type: 'candlestick', data: candle, itemStyle: { color: c.up, color0: c.down, borderColor: c.up, borderColor0: c.down, }, xAxisIndex: 0, yAxisIndex: 0, }, { name: '成交量', type: 'bar', data: vols, xAxisIndex: 1, yAxisIndex: 1, }, ], }), true); } var title = (data.chart_symbol || data.symbol || '') + ' · ' + periodLabel(data.period); chart.setOption({ title: { text: title, left: 12, top: 8, textStyle: { color: c.title, fontSize: 13, fontWeight: 600 } }, }); } function periodLabel(key) { var tabs = document.querySelectorAll('.period-tab'); for (var i = 0; i < tabs.length; i++) { if (tabs[i].getAttribute('data-period') === key) return tabs[i].textContent; } return key; } function hideEmptyOverlay() { if (emptyEl) { emptyEl.style.display = ''; } if (wrapEl) wrapEl.classList.add('has-data'); } function showEmptyOverlay(text) { if (emptyEl) { emptyEl.textContent = text; emptyEl.style.display = 'flex'; } if (wrapEl) wrapEl.classList.remove('has-data'); } function setLoading(on) { var btn = document.getElementById('market-load-btn'); if (btn) { btn.disabled = on; btn.textContent = on ? '加载中…' : '查看'; } if (on) { showEmptyOverlay('加载中…'); } else if (lastData) { hideEmptyOverlay(); } } function updateRefreshHint() { var el = document.getElementById('market-refresh-hint'); if (!el) return; if (!getSymbol()) { el.textContent = ''; return; } if (isTradingSession()) { var ms = klinePollMs(); var src = lastData && lastData.source === 'local' ? ' · 本地缓存' : ''; el.textContent = ms === 1000 ? '交易中 · 1秒刷新' + src : '交易中 · 自动刷新' + src; } else { el.textContent = '非交易时段 · 暂停高频刷新'; } } function loadKline(silent) { var symbol = getSymbol(); if (!symbol) { if (!silent) alert('请先选择或输入合约代码'); return; } if (klineLoading) return; klineLoading = true; if (!silent) setLoading(true); var url = '/api/kline?symbol=' + encodeURIComponent(symbol) + '&period=' + encodeURIComponent(currentPeriod); fetch(url) .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, data: j }; }); }) .then(function (res) { if (!res.ok) throw new Error(res.data.error || '加载失败'); hideEmptyOverlay(); renderChart(res.data, silent); updateQuoteMeta(res.data); updateRefreshHint(); if (!quoteTimer) startQuotePoll(); if (!klineTimer) startKlinePoll(); }) .catch(function (err) { if (!silent) { showEmptyOverlay(err.message || '加载失败'); } }) .finally(function () { klineLoading = false; if (!silent) setLoading(false); }); } function updateQuoteMeta(data) { var meta = document.getElementById('market-quote-meta'); if (meta) { meta.textContent = data.count ? ('共 ' + data.count + ' 根 · ' + periodLabel(data.period)) : ''; } var nameEl = document.getElementById('market-quote-name'); var hiddenName = document.getElementById('market-symbol-name'); if (nameEl) { nameEl.textContent = (hiddenName && hiddenName.value) || data.symbol || '—'; } } function loadQuote() { var codes = getMarketCodes(); if (!codes.symbol) return; var q = 'symbol=' + encodeURIComponent(codes.symbol); if (codes.market_code) q += '&market_code=' + encodeURIComponent(codes.market_code); if (codes.sina_code) q += '&sina_code=' + encodeURIComponent(codes.sina_code); fetch('/api/market_quote?' + q) .then(function (r) { return r.json(); }) .then(function (data) { var priceEl = document.getElementById('market-quote-price'); var nameEl = document.getElementById('market-quote-name'); if (nameEl && data.name) nameEl.textContent = data.name + ' ' + (data.symbol || ''); if (priceEl) { priceEl.textContent = data.price != null ? Number(data.price).toFixed(2) : '—'; } }) .catch(function () { /* ignore */ }); } function startQuotePoll() { if (quoteTimer) clearInterval(quoteTimer); loadQuote(); var ms = quotePollMs(); if (ms > 0) quoteTimer = setInterval(loadQuote, ms); } function startKlinePoll() { if (klineTimer) clearInterval(klineTimer); var ms = klinePollMs(); if (ms > 0 && getSymbol()) { klineTimer = setInterval(function () { loadKline(true); updateRefreshHint(); }, ms); } } function restartPollers() { startQuotePoll(); startKlinePoll(); updateRefreshHint(); } function shiftDataZoom(delta) { if (!chart) return; var opt = chart.getOption(); if (!opt || !opt.dataZoom || !opt.dataZoom.length) return; var z = opt.dataZoom[0]; var span = (z.end - z.start) || 20; var newSpan = Math.max(5, Math.min(100, span + delta)); var center = (z.start + z.end) / 2; var start = Math.max(0, center - newSpan / 2); var end = Math.min(100, center + newSpan / 2); if (end - start < newSpan) { if (start === 0) end = newSpan; else start = end - newSpan; } chart.dispatchAction({ type: 'dataZoom', start: start, end: end }); } function resetDataZoom() { if (!chart) return; var start = currentPeriod === 'timeshare' ? 60 : 75; chart.dispatchAction({ type: 'dataZoom', start: start, end: 100 }); } function bindPeriodTabs() { var tabs = document.getElementById('market-period-tabs'); if (!tabs) return; tabs.addEventListener('click', function (e) { var btn = e.target.closest('.period-tab'); if (!btn) return; tabs.querySelectorAll('.period-tab').forEach(function (el) { el.classList.remove('active'); }); btn.classList.add('active'); currentPeriod = btn.getAttribute('data-period') || '15m'; restartPollers(); if (getSymbol()) loadKline(false); }); } function bindZoomButtons() { var zoomIn = document.getElementById('chart-zoom-in'); var zoomOut = document.getElementById('chart-zoom-out'); var zoomReset = document.getElementById('chart-zoom-reset'); if (zoomIn) zoomIn.addEventListener('click', function () { shiftDataZoom(-12); }); if (zoomOut) zoomOut.addEventListener('click', function () { shiftDataZoom(12); }); if (zoomReset) zoomReset.addEventListener('click', resetDataZoom); } document.addEventListener('DOMContentLoaded', function () { initChart(); bindPeriodTabs(); bindZoomButtons(); var active = document.querySelector('.period-tab.active'); if (active) currentPeriod = active.getAttribute('data-period') || '15m'; var loadBtn = document.getElementById('market-load-btn'); if (loadBtn) loadBtn.addEventListener('click', function () { restartPollers(); loadKline(false); }); var hidden = document.getElementById('market-symbol-hidden'); var input = document.getElementById('market-symbol-input'); if (hidden && hidden.value) { if (input && !input.value) input.value = hidden.value; restartPollers(); loadKline(false); } else { updateRefreshHint(); } }); })();