echart 中 tooltip 基本设置


tooptip.position

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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];
          },
    }
}

矩形树图 treemap 可以单独设置tooltip

treemap中的tooltip
效果相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let opt ={<!-- -->
   tooltip:{<!-- -->
      borderWidth:0, // 提示框边线
      backgroundColor:"rgba(51,51,51, 0.9)",  // 提示框 背景颜色
      extraCssText: "box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.16)", // 提示框 阴影
      fomatter:(params)=>{<!-- -->
      // 自定义提示框内容
         let str = `<div style='width:100px;'>
                    ${<!-- -->params.name} : ${<!-- -->paranms.value}
                   </div>`
          return  str
      },
     ...
   },
   series：{<!-- -->
      type:"treemap",
      tooltip:{<!-- -->
         show: true,
          trigger: "item",
          ...
      },
    }
}