echart 中 tooltip 基本设置

tooptip.position

chart配置文档
将提示框限制在 图形范围内
方法一：

let  opt ={
   tooltip:{
        position: function (point, params, dom, rect, size) {
            // 提示框 限制在chart 图中
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            var pointX = point[0];
            var pointY = point[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 25;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }
            dom.style.transform = 'translateZ(0)'  // 提示框被遮挡时可以设置
            return [x, y];
          },
          formatter:(param)=>{
          // 自定义 弹窗里面的 内容
            let  str = `<div>
                <span> ${param.name} :</span>
                 <span style='color:${param.data.color}'> ${param.value} </span>
             </div>`
             
            return str
          },
    }
}
 

方法二 :

let chartopt = {
   tooltip:{
      confine: true ,
      ...
   }
}