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

Question

I have a question about the Echarts library https://ecomfe.github.io/echarts-doc/public/en/index.html .

I'm using Echarts to draw a line chart from a series of points (x,y) and I want to display the coordinates (x,y) of each point in the drawn line chart when the user hovers over the mouse on the point as tooltip the problem that I found is that I can display only for the points given in entered and not for the totality of line that is to say I cannot display the coordinates of a point between two successive points given in input.

how can I display the tooltip for each point of the graph as tooltip?

I have used this JSON object as an option object to pass it as a parameter to the setOption method.

       {
        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

A solution to your problem would be to change the tooltip option to set the type to cross . It would look something like this -

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

This type of display is particularly helpful when you are using orthometric axis as it displays the location of the mouse.

Echarts Docs for tooltip: https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.axisPointer.type