Echarts 5 瞎入门指南（5）：轻松玩转提示框（Tooltip）

2023-12-09 04:04:29

前言

欢迎来到Echarts 5瞎入门指南系列的第五章。本节我们将一起学习提示框（Tooltip）的使用方法。提示框是一种最常用的可视化组件，可以帮助您快速查看图表数据，提升图表交互体验。Echarts 5提供了丰富的提示框配置项，您可以根据需要灵活定制提示框的外观和交互行为。

提示框基础配置

要为图表添加提示框，您需要在图表配置项中设置tooltip属性。tooltip属性是一个对象，包含了提示框的各种配置项。下面列出了一些常用的配置项：

trigger : 触发提示框的条件，可以是'item'、'axis'或'none'。
show : 是否显示提示框，默认值为true。
formatter : 提示框内容的格式化函数，可以返回一个字符串或HTML元素。
position : 提示框的位置，可以是'top'、'bottom'、'left'、'right'或'inside'。
backgroundColor : 提示框的背景色。
borderColor : 提示框的边框色。
borderWidth : 提示框的边框宽度。
borderRadius : 提示框的边框圆角。

提示框高级配置

除了上述基础配置项外，Echarts 5还提供了一些高级配置项，您可以根据需要进行配置。下面列出了一些常用的高级配置项：

axisPointer : 提示框的坐标轴指示器，可以是'line'、'shadow'或'none'。
snap : 提示框是否吸附到数据点上，默认值为false。
alwaysShowContent : 提示框是否始终显示内容，默认值为false。
showDelay : 提示框显示延迟时间，单位为毫秒。
hideDelay : 提示框隐藏延迟时间，单位为毫秒。
enterable : 提示框是否可以进入，默认值为false。
confine : 提示框是否限制在图表区域内，默认值为true。

提示框实例

为了更好地理解提示框的使用方法，我们来看一个简单的例子。下面的代码演示了一个带有提示框的折线图：

var myChart = echarts.init(document.getElementById('main'));

var option = {
  tooltip: {
    trigger: 'axis',
    show: true,
    formatter: '{b}<br>{a}: {c}'
  },
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line'
    }
  ]
};

myChart.setOption(option);