我来帮你搞定这个需求！核心思路是通过自定义光标事件监听鼠标悬停状态，实时获取当前指向的系列数据值，然后动态更新图例的条目文本。我已经在你的基础代码上做了针对性修改，下面是完整实现和细节说明：

完整实现代码 #

const { lightningChart, Themes, LegendPosition, AxisScrollStrategies, AxisTickStrategies } = lcjs
const lc = lightningChart()
const chart = lc.ChartXY({
    theme: Themes.light,
    defaultAxisX: { type: 'linear-highPrecision' },
    legend: { position: LegendPosition.TopLeft }
})
chart.setTitle('')
chart.axisX
    .setScrollStrategy(AxisScrollStrategies.scrolling)
    .setTickStrategy(AxisTickStrategies.DateTime)
    .setInterval({ start: 0, end: 10000, stopAxisAfter: false })

// 创建系列并初始化名称
const series1 = chart.addLineSeries({ schema: { x: { pattern: 'progressive' }, y: { pattern: null } } }).setName('Trend 1')
const series2 = chart.addLineSeries({ schema: { x: { pattern: 'progressive' }, y: { pattern: null } } }).setName('Trend 2')
const series3 = chart.addLineSeries({ schema: { x: { pattern: 'progressive' }, y: { pattern: null } } }).setName('Trend 3')

// 保存每个系列的原始名称，用于鼠标离开时恢复显示
const originalSeriesNames = {
    series1: series1.getName(),
    series2: series2.getName(),
    series3: series3.getName()
}

// 自定义光标事件：处理鼠标悬停/离开时的图例文本更新
chart.setCustomCursor((event) => {
    // 第一步：重置所有系列的名称为原始值（处理鼠标离开或未命中数据点的情况）
    series1.setName(originalSeriesNames.series1)
    series2.setName(originalSeriesNames.series2)
    series3.setName(originalSeriesNames.series3)

    // 第二步：如果鼠标命中了数据点，更新对应系列的图例文本为「系列名: 数值」
    if (event.hits.length > 0) {
        event.hits.forEach(hit => {
            const targetSeries = hit.series
            // 格式化数值为两位小数，可根据需求调整精度
            const formattedY = hit.y.toFixed(2)
            // 匹配目标系列并更新名称
            switch (targetSeries) {
                case series1:
                    targetSeries.setName(`${originalSeriesNames.series1}: ${formattedY}`)
                    break
                case series2:
                    targetSeries.setName(`${originalSeriesNames.series2}: ${formattedY}`)
                    break
                case series3:
                    targetSeries.setName(`${originalSeriesNames.series3}: ${formattedY}`)
                    break
            }
        })
    }
})

// 模拟实时数据推送
setInterval(() => {
    const x = Date.now()
    series1.appendSample({ x, y: Math.random() })
    series2.appendSample({ x, y: Math.random() * 10 })
    series3.appendSample({ x, y: -Math.random() * 5 })
}, 1000/60)

关键逻辑说明 #

1. 原始名称缓存：
   提前保存每个系列的初始名称，这样在鼠标离开图表或未命中数据点时，能快速恢复图例的默认显示状态。

2. 自定义光标事件：
   通过chart.setCustomCursor监听鼠标在图表上的所有移动/悬停行为，event.hits数组会返回当前鼠标命中的所有系列数据点信息，其中包含：

   • series：命中的系列实例
   • y：当前命中点的y轴数值
   • 其他如x、sample等可选数据

3. 动态更新图例文本：
   LightningChart的图例条目会自动同步对应系列的名称，所以直接调用series.setName()就能实时更新图例的显示内容，无需手动操作图例DOM，既简单又能保证组件内部状态的一致性。

可选优化方案 #

如果需要更精细地控制图例文本（比如单独修改颜色、字体），可以直接操作图例条目对象：

// 获取所有图例条目
const legendEntries = chart.legend.getEntries()
// 修改第一个条目的文本
legendEntries[0].setText(`${originalSeriesNames.series1}: ${formattedY}`)
// 还可以修改样式
legendEntries[0].setFontColor('#ff0000')

注意事项 #

• 数值格式化：toFixed(2)是将数值保留两位小数，你可以根据业务需求调整为toFixed(1)或直接使用原始数值。
• 性能：setCustomCursor的回调触发频率较高，但series.setName()内部做了重绘优化，不会导致性能问题。
• 鼠标离开处理：当前代码通过每次回调先重置名称的方式，自动处理了鼠标离开图表的场景，无需额外监听onMouseLeave事件。

这样修改后，当你把鼠标悬停到图表的数据点上时，左上角的图例就会自动显示对应系列的当前数值，完全符合你想要的非弹窗式数据展示需求！