echarts 点到坐标的标线

ECharts是一个强大的数据可视化库，它支持在图表中添加各种交互元素，包括点到坐标的标线（也称为鼠标悬停提示线）。标线通常用于显示鼠标指针悬停在某个数据点时，与坐标轴之间的连接线，以便用户更好地理解数据点的位置和值。

在ECharts中，你可以使用`graphic`系列以及`line`元素来创建这种效果。具体步骤如下：

1. 首先，确保你已经在ECharts实例中添加了`graphic`系列。

series: [{
    type: 'scatter',
    data: [...], // 数据点
    itemStyle: {
        normal: {
            lineStyle: { // 设置鼠标悬停时的线条样式
                type: 'dashed', // 线型为虚线
                width: 2, // 线宽
                color: 'rgba(0,0,0,0.5)', // 颜色
            }
        },
        emphasis: {
            lineStyle: {
                show: true, // 当鼠标悬停时，显示线条
            }
        }
    },
    graphic: { // 定义图形
        type: 'line',
        data: [], // 需要根据鼠标位置动态生成的数据点
        position: 'absolute', // 将图形放置在绝对位置
        silent: true, // 阻止图形触发事件
        style: {
            fill: 'none', // 不填充颜色
            stroke: '#000', // 线条颜色
            lineWidth: 2 // 线条宽度
        }
    }
}]

2. 当鼠标移动时，监听`mousemove`或`mouseout`事件，更新`graphic`系列的`data`属性，使其跟随鼠标位置。

chart.on('mousemove', function (params) {
    const x = params.position; // 获取鼠标x坐标
    const y = params.position; // 获取鼠标y坐标
    updateGraphicLine(x, y); // 更新标线数据
});

function updateGraphicLine(x, y) {
    const graphicData = [{x: x, y: y}]; // 动态生成新的标线数据
    series.graphic.data = graphicData;
}

3. 对于mouseout事件，可以清除或隐藏标线。

chart.on('mouseout', function () {
    series[0].graphic.data = [];
});