Echarts如何为折线图的每个点显示tooltip（JS）

Question

我有一个关于Echarts库的问题https://ecomfe.github.io/echarts-doc/public/en/index.html。

我正在使用Echarts从一系列点（x，y）绘制折线图，我想在用户悬停时显示绘制的折线图中每个点的坐标（x，y）鼠标在点上作为工具提示我发现的问题是我只能显示输入中给定的点而不是整条线，也就是说我无法显示输入中给定的两个连续点之间的点的坐标.

如何将图表中每个点的工具提示显示为工具提示？

我已将此 JSON 对象用作选项对象，将其作为参数传递给 setOption 方法。

       {
        tooltip: {
            type: 'item'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
            show: true,
            backgroundColor: "#fff",

        },
        toolbox: {
            feature: {
                dataZoom: {
                    title: {
                        zoom: "zoom by rectangle",
                        back: "undo zooming"
                    }
                }
            }
        },
        xAxis: {
            type: 'value',
        },
        yAxis: {
            type: 'value',
            triggerEvent: true
        },
        dataZoom: [{
                type: 'inside',
                xAxisIndex: [0],
                moveOnMouseMove: true,
            },
            {
                type: 'inside',
                yAxisIndex: [0],
                moveOnMouseMove: true,
            }
        ],
        series: [{
            name: "line1",
            data: [
                [1.5, 10],
                [5, 7],
                [8, 8],
                [12, 6],
                [11, 12],
                [16, 9],
                [14, 6],
                [17, 4],
                [19, 9]
            ],
            type: 'line',
        }]
    };

Answer 1

您的问题的解决方案是更改工具提示选项以将类型设置为 cross。它看起来像这样 -

tooltip: {
        axisPointer: {
                type: 'cross'
            }
    }

当您使用正轴时，这种类型的显示特别有用，因为它显示了鼠标的位置。

工具提示的 Echarts 文档：https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.axisPointer.type

Echarts如何为折线图的每个点显示tooltip（JS）

How display tooltip for each point of a line chart using Echarts (JS)

javascript

echarts