Recently, I took over a webpage made by a colleague, and found that echarts was used to draw various charts; there are two problems, one is that the prompt box is not fully displayed, and the other is that some data are always incompletely displayed when drawing. The latter is the div width problem. . . Speechless, let’s talk about the previous question and record it.
Tooltip component introduction
Generally, the tooltip component of echarts is used directly:
tooltip: { show: true,//whether to display the prompt box showContent: true, enterable: true,//whether the mouse can enter the floating layer of the prompt box, the default is false, if you need to interact in the details, such as adding links and buttons, you can set to true. trigger: 'item', //optional, use item for pie charts and scatter charts, use axis for histograms and line charts, none triggers anything confine: true, //whether to limit the tooltip box to the area of the chart. This configuration is more useful when the dom of the outer layer of the chart is set to 'overflow: hidden', or the narrow screen of the mobile terminal causes the tooltip to be truncated beyond the outside world. formatter: '{a} {b}:{c} {d}%',//Prompt box floating layer content formatter, supports two forms of string template and callback function. textStyle: {//Set the text style in the prompt box color:'red', //color fontSize:'18' //font size } },
problem phenomenon
As shown above, the tooltip is only half displayed on the edge.
solution
I started to think about what position to calculate. Later, I read the document and found that it is actually quite simple to
set the confine attribute of the tooltip. The introduction on the official website: confine: whether to limit the tooltip frame to the area of the chart.
After the increase, it is probably like this.
The prompt box display of the data points on the edge is always in the canvas:
