diff --git a/web/frontend/src/components/KLineChart.vue b/web/frontend/src/components/KLineChart.vue index a3e02d8..4075e34 100644 --- a/web/frontend/src/components/KLineChart.vue +++ b/web/frontend/src/components/KLineChart.vue @@ -43,8 +43,8 @@ function render() { { type: 'category', gridIndex: 1, data: dates, scale: true, boundaryGap: false, axisLabel: { show: false } }, ] const yAxes: any[] = [ - { scale: true, splitArea: { show: true } }, - { gridIndex: 1, scale: true, splitNumber: 3 }, + { scale: true, splitArea: { show: true }, name: '价格', nameLocation: 'end', nameTextStyle: { fontSize: 11 } }, + { gridIndex: 1, scale: true, splitNumber: 3, name: '持仓', nameLocation: 'end', nameTextStyle: { fontSize: 11 } }, ] const series: any[] = [ { @@ -74,7 +74,7 @@ function render() { if (hasScores) { grids.push({ left: isMobile.value ? 48 : 60, right: isMobile.value ? 12 : 40, top: '88%', height: '10%' }) xAxes.push({ type: 'category', gridIndex: 2, data: dates, scale: true, boundaryGap: false, axisLabel: { show: false } }) - yAxes.push({ gridIndex: 2, min: 0, max: 100, splitNumber: 2 }) + yAxes.push({ gridIndex: 2, min: 0, max: 100, splitNumber: 2, name: '综合分', nameLocation: 'end', nameTextStyle: { fontSize: 11 } }) series.push({ name: '综合分', type: 'bar', @@ -98,7 +98,30 @@ function render() { chart.setOption( { backgroundColor: 'transparent', - tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, + tooltip: { + trigger: 'axis', + axisPointer: { type: 'cross' }, + formatter: (params: any) => { + if (!Array.isArray(params)) return '' + const date = params[0]?.axisValue || '' + let html = `${date}
` + for (const p of params) { + if (p.seriesName === 'K 线') { + const ohlc = p.data as number[] + const labels = ['开盘', '收盘', '最低', '最高'] + html += labels.map((n, i) => `${p.marker} ${n}: ${ohlc[i] ?? '-'}`).join('
') + '
' + continue + } + let name = p.seriesName + let val: string + if (name === '持仓量') val = (p.data as number)?.toLocaleString() ?? '-' + else if (name === '综合分') val = (p.data as number)?.toFixed(1) ?? '-' + else val = p.data ?? '-' + html += `${p.marker} ${name}: ${val}
` + } + return html + }, + }, legend: { data: legendData, top: 0 }, grid: grids, xAxis: xAxes,