Question

我对Echarts库https://ecomfe.github.io/echarts-doc/public/en/index.html有疑问。

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

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

我已将此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'
            }
    }

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

用于工具提示的“图表文档”：https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.axisPointer.type

如何使用Echarts（JS）为折线图的每个点显示工具提示

1 个答案: