|
@@ -311,12 +311,12 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="chart-container">
|
|
<div class="chart-container">
|
|
|
- <h2>📈 价格走势图</h2>
|
|
|
|
|
|
|
+ <h2>📈 价格观测图</h2>
|
|
|
<div class="chart-wrapper" id="priceChart"></div>
|
|
<div class="chart-wrapper" id="priceChart"></div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="chart-container">
|
|
<div class="chart-container">
|
|
|
- <h2>📊 价差走势图 (BPS)</h2>
|
|
|
|
|
|
|
+ <h2 id="bpsChartTitle">📊 价差走势图 (BPS)</h2>
|
|
|
<div class="chart-wrapper" id="bpsChart"></div>
|
|
<div class="chart-wrapper" id="bpsChart"></div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -772,6 +772,14 @@
|
|
|
console.log('📊 displayBpsChart 被调用, 数据点数:', data.length);
|
|
console.log('📊 displayBpsChart 被调用, 数据点数:', data.length);
|
|
|
console.log(' tradingEventsData:', tradingEventsData?.length);
|
|
console.log(' tradingEventsData:', tradingEventsData?.length);
|
|
|
|
|
|
|
|
|
|
+ // 更新BPS图表标题,添加交易对名字
|
|
|
|
|
+ const symbol = document.getElementById('symbolFilter').value.trim();
|
|
|
|
|
+ const symbolDisplay = symbol ? ` - ${symbol}` : '';
|
|
|
|
|
+ const bpsChartTitle = document.getElementById('bpsChartTitle');
|
|
|
|
|
+ if (bpsChartTitle) {
|
|
|
|
|
+ bpsChartTitle.innerHTML = `📊 价差走势图 (BPS)${symbolDisplay}`;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
const container = document.getElementById('bpsChart');
|
|
const container = document.getElementById('bpsChart');
|
|
|
|
|
|
|
|
// 销毁旧图表实例
|
|
// 销毁旧图表实例
|
|
@@ -788,64 +796,9 @@
|
|
|
const askBps = data.map(d => [d.timestamp * 1000, d.ask_bps]);
|
|
const askBps = data.map(d => [d.timestamp * 1000, d.ask_bps]);
|
|
|
const bidBps = data.map(d => [d.timestamp * 1000, d.bid_bps]);
|
|
const bidBps = data.map(d => [d.timestamp * 1000, d.bid_bps]);
|
|
|
|
|
|
|
|
- // 准备事件标记数据
|
|
|
|
|
|
|
+ // 准备事件标记数据 - BPS图表不显示标记
|
|
|
const bpsMarkPoints = [];
|
|
const bpsMarkPoints = [];
|
|
|
|
|
|
|
|
- if (tradingEventsData && tradingEventsData.length > 0) {
|
|
|
|
|
- console.log(' 准备添加', tradingEventsData.length, '个事件标记到BPS图表');
|
|
|
|
|
- tradingEventsData.forEach(event => {
|
|
|
|
|
- const timestamp = event.timestamp * 1000;
|
|
|
|
|
- const eventType = event.event_type;
|
|
|
|
|
-
|
|
|
|
|
- let color, symbol, symbolSize, label, symbolRotate = 0;
|
|
|
|
|
-
|
|
|
|
|
- // 根据 event_type 确定方向
|
|
|
|
|
- // open_long 和 close_short 是买入(向上箭头)
|
|
|
|
|
- // open_short 和 close_long 是卖出(向下箭头)
|
|
|
|
|
- if (eventType === 'open_long' || eventType === 'close_short') {
|
|
|
|
|
- symbol = 'arrow';
|
|
|
|
|
- symbolSize = 10;
|
|
|
|
|
- symbolRotate = 0;
|
|
|
|
|
- color = '#28a745';
|
|
|
|
|
- label = eventType === 'open_long' ? '开多' : '平空';
|
|
|
|
|
- } else if (eventType === 'open_short' || eventType === 'close_long') {
|
|
|
|
|
- symbol = 'arrow';
|
|
|
|
|
- symbolSize = 10;
|
|
|
|
|
- symbolRotate = 180;
|
|
|
|
|
- color = '#dc3545';
|
|
|
|
|
- label = eventType === 'open_short' ? '开空' : '平多';
|
|
|
|
|
- } else {
|
|
|
|
|
- color = '#6c757d';
|
|
|
|
|
- symbol = 'circle';
|
|
|
|
|
- symbolSize = 8;
|
|
|
|
|
- label = '其他';
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- const bpsValue = event.ask_bps || event.bid_bps || 0;
|
|
|
|
|
- bpsMarkPoints.push({
|
|
|
|
|
- coord: [timestamp, bpsValue],
|
|
|
|
|
- value: label,
|
|
|
|
|
- symbol: symbol,
|
|
|
|
|
- symbolSize: symbolSize,
|
|
|
|
|
- symbolRotate: symbolRotate,
|
|
|
|
|
- itemStyle: {
|
|
|
|
|
- color: color,
|
|
|
|
|
- borderColor: '#fff',
|
|
|
|
|
- borderWidth: 2
|
|
|
|
|
- },
|
|
|
|
|
- label: {
|
|
|
|
|
- show: true,
|
|
|
|
|
- position: 'top',
|
|
|
|
|
- formatter: label,
|
|
|
|
|
- fontSize: 10,
|
|
|
|
|
- color: color,
|
|
|
|
|
- fontWeight: 'bold'
|
|
|
|
|
- },
|
|
|
|
|
- eventData: event
|
|
|
|
|
- });
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
const option = {
|
|
const option = {
|
|
|
title: {
|
|
title: {
|
|
|
text: '',
|
|
text: '',
|
|
@@ -971,18 +924,6 @@
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
bpsChart.setOption(option);
|
|
bpsChart.setOption(option);
|
|
|
-
|
|
|
|
|
- // 添加点击事件监听
|
|
|
|
|
- if (bpsMarkPoints.length > 0) {
|
|
|
|
|
- console.log(' 添加BPS图表点击事件监听');
|
|
|
|
|
- bpsChart.off('click');
|
|
|
|
|
- bpsChart.on('click', function(params) {
|
|
|
|
|
- console.log(' BPS图表被点击:', params);
|
|
|
|
|
- if (params.componentType === 'markPoint' && params.data.eventData) {
|
|
|
|
|
- showEventDetails(params.data.eventData);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 同步两个图表的缩放
|
|
// 同步两个图表的缩放
|
|
@@ -1687,43 +1628,46 @@
|
|
|
// 更新时间范围显示
|
|
// 更新时间范围显示
|
|
|
function updateTimeRangeDisplay() {
|
|
function updateTimeRangeDisplay() {
|
|
|
if (!selectedTimeRange) return;
|
|
if (!selectedTimeRange) return;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
const startTime = new Date(selectedTimeRange.start * 1000);
|
|
const startTime = new Date(selectedTimeRange.start * 1000);
|
|
|
const endTime = new Date(selectedTimeRange.end * 1000);
|
|
const endTime = new Date(selectedTimeRange.end * 1000);
|
|
|
-
|
|
|
|
|
|
|
+ const symbol = document.getElementById('symbolFilter').value.trim();
|
|
|
|
|
+ const symbolDisplay = symbol ? ` - ${symbol}` : '';
|
|
|
|
|
+
|
|
|
// 在图表标题中显示当前查看的时间范围
|
|
// 在图表标题中显示当前查看的时间范围
|
|
|
const priceChartTitle = document.querySelector('.chart-container h2');
|
|
const priceChartTitle = document.querySelector('.chart-container h2');
|
|
|
if (priceChartTitle) {
|
|
if (priceChartTitle) {
|
|
|
priceChartTitle.innerHTML = `📈 价格走势图 <small style="color: #666; font-size: 0.7em;">(${startTime.toLocaleTimeString()} - ${endTime.toLocaleTimeString()})</small>`;
|
|
priceChartTitle.innerHTML = `📈 价格走势图 <small style="color: #666; font-size: 0.7em;">(${startTime.toLocaleTimeString()} - ${endTime.toLocaleTimeString()})</small>`;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- const bpsChartTitle = document.querySelectorAll('.chart-container h2')[1];
|
|
|
|
|
|
|
+
|
|
|
|
|
+ const bpsChartTitle = document.getElementById('bpsChartTitle');
|
|
|
if (bpsChartTitle) {
|
|
if (bpsChartTitle) {
|
|
|
- bpsChartTitle.innerHTML = `📊 价差走势图 (BPS) <small style="color: #666; font-size: 0.7em;">(${startTime.toLocaleTimeString()} - ${endTime.toLocaleTimeString()})</small>`;
|
|
|
|
|
|
|
+ bpsChartTitle.innerHTML = `📊 价差走势图 (BPS)${symbolDisplay} <small style="color: #666; font-size: 0.7em;">(${startTime.toLocaleTimeString()} - ${endTime.toLocaleTimeString()})</small>`;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 重置到原始视图
|
|
// 重置到原始视图
|
|
|
function resetToOriginalView() {
|
|
function resetToOriginalView() {
|
|
|
selectedTimeRange = null;
|
|
selectedTimeRange = null;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 移除所有选择区域
|
|
// 移除所有选择区域
|
|
|
document.querySelectorAll('.thumbnail-selection').forEach(el => el.remove());
|
|
document.querySelectorAll('.thumbnail-selection').forEach(el => el.remove());
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 重新加载当前时间范围的数据
|
|
// 重新加载当前时间范围的数据
|
|
|
const timeRange = document.getElementById('timeRange').value;
|
|
const timeRange = document.getElementById('timeRange').value;
|
|
|
const symbol = document.getElementById('symbolFilter').value.trim();
|
|
const symbol = document.getElementById('symbolFilter').value.trim();
|
|
|
loadPriceData(timeRange, symbol);
|
|
loadPriceData(timeRange, symbol);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 重置图表标题
|
|
// 重置图表标题
|
|
|
const priceChartTitle = document.querySelector('.chart-container h2');
|
|
const priceChartTitle = document.querySelector('.chart-container h2');
|
|
|
if (priceChartTitle) {
|
|
if (priceChartTitle) {
|
|
|
priceChartTitle.innerHTML = '📈 价格走势图';
|
|
priceChartTitle.innerHTML = '📈 价格走势图';
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- const bpsChartTitle = document.querySelectorAll('.chart-container h2')[1];
|
|
|
|
|
|
|
+
|
|
|
|
|
+ const symbolDisplay = symbol ? ` - ${symbol}` : '';
|
|
|
|
|
+ const bpsChartTitle = document.getElementById('bpsChartTitle');
|
|
|
if (bpsChartTitle) {
|
|
if (bpsChartTitle) {
|
|
|
- bpsChartTitle.innerHTML = '📊 价差走势图 (BPS)';
|
|
|
|
|
|
|
+ bpsChartTitle.innerHTML = `📊 价差走势图 (BPS)${symbolDisplay}`;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|