深圳网站制作大运软件小镇/网站建设推广公司

最近接手一个同事之前做的网页，发现里面使用echarts来绘制各类图表；有2个问题一个是提示框显示不全，另一个就是绘制总是有部分数据显示不全。后者就是div宽度问题。。。无语，说下前面一个问题吧，记录一下。

tooltip组件介绍

一般都是直接用echarts的tooltip组件：

tooltip: {
show: true,//是否显示提示框
showContent: true,
enterable: true,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
trigger: ‘item’,//可选，饼图、散点图用item，柱状图、折线图用axis，none什么都不触发
confine: true,//是否将 tooltip 框限制在图表的区域内。当图表外层的 dom 被设置为 ‘overflow: hidden’，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
formatter: ‘{a}
{b}:{c} {d}%’,//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
textStyle: {//提示框内文字样式的设置
color:‘red’, //颜色
fontSize:‘18’ //字体大小
}
},

问题现象

大概如上图，提示框在边缘只显示了一半。

解决方案

开始想着去算什么位置之类的，后来看文档发现，其实挺简单的
设置tooltip的confine属性即可，官网的介绍：confine:是否将 tooltip 框限制在图表的区域内。
增加后大概这样

这下边缘的数据点的提示框显示就始终在canvas内了：