【Echarts】Tooltip属性设置

最新推荐文章于 2024-09-20 15:52:37 发布

Oyynice

最新推荐文章于 2024-09-20 15:52:37 发布

阅读量4.9k

点赞数 2

分类专栏： Echarts 文章标签： echarts

本文链接：https://blog.csdn.net/m0_57874866/article/details/126639694

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客详细解析了 Echarts 图表库中 Tooltip 的配置选项，包括显示、触发类型、坐标轴指示器、提示框浮层样式等多个方面。通过实例展示了如何自定义提示信息的格式，以及如何控制提示框的显示、交互和限制。对于希望深入理解和定制 Echarts 提示信息的开发者具有很高的参考价值。

摘要由CSDN通过智能技术生成

tooltip: {
  show: true, // 是否显示
  trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
  axisPointer: { // 坐标轴指示器配置项。
      type: 'shadow', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
      axis: 'auto', // 指示器的坐标轴。 
      snap: true, // 坐标轴指示器是否自动吸附到点上
  },
  showContent: true, //是否显示提示框浮层，默认显示。
  triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
  enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
  renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
  backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
  borderColor: '#333', // 提示框浮层的边框颜色。
  borderWidth: 0, // 提示框浮层的边框宽。
  padding: 5, // 提示框浮层内边距，
  textStyle: { // 提示框浮层的文本样式。
      color: '#fff',
      fontStyle: 'normal',
      fontWeight: 'normal',
      fontFamily: 'sans-serif',
      fontSize: 14,
  },
  extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
  confine: false, // 是否将 tooltip 框限制在图表的区域内。
  formatter: '{b} 的成绩是 {c}'
  formatter: function(arg) {
      return arg[0].name + '的分数是:' + arg[0].data
  }
}