如何使用 Echarts (JS) 为折线图的每个点显示工具提示答案

【问题标题】：How display tooltip for each point of a line chart using Echarts (JS)如何使用 Echarts (JS) 为折线图的每个点显示工具提示
【发布时间】：2018-08-22 09:14:08
【问题描述】：

我有一个关于 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',
        }]
    };

【问题讨论】：

能否提供一些代码供参考和更好的答案？
我添加了我用来画线的对象

标签： javascript echarts

【解决方案1】：

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

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

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

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

【讨论】：

感谢 Urmil Ashish Parikh 的快速响应，它解决了我的部分问题。实际上，我想为绘制的折线图而不是网格中的所有点显示工具提示，并且我希望工具提示出现在线条的点上，而不是在 x、y 轴上。
我认为 echarts 不支持这样的事情。此外，它没有任何意义，因为在折线图中，只有数据点是感兴趣的东西。该线仅用于分析是否有增长或下降。那条线上的点不应该有任何价值。
如果你想这样做，你可以创建一个函数，从 2 个点生成线方程，然后在该线上随机生成大约 100 个点。将这些点添加到选项中的数据字段。它应该可以解决您的问题。但我认为你应该按照我在答案中提到的方式来做，而不是这样。