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',
}]
};
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