echarts--提示框组件（tooltip）

个人工作记录

1.工作中遇到的问题描述：饼状图鼠标悬浮时，提示文字超出画布，如图：

 

通过tooltip的confine属性解决，官网的介绍：

confine:是否将 tooltip 框限制在图表的区域内。

当图表外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。

    tooltip: {
      confine: true
    },

 

 

2.tooptip其他常用功能

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