echarts怎么配置 tooltip

在 ECharts 中，tooltip 用于配置鼠标悬浮时的提示框。下面是常见配置方式和示例。

一、基本用法

option = {
  tooltip: {
    show: true,
    trigger: 'item' // 或 'axis'
  },
  series: [...]
};

二、trigger 类型（最重要）

1️⃣ trigger: 'item'

适用于：饼图、散点图、地图 等

tooltip: {
  trigger: 'item'
}

2️⃣ trigger: 'axis'

适用于：折线图、柱状图

tooltip: {
  trigger: 'axis'
}

三、格式化内容（formatter）

1️⃣ 字符串模板

tooltip: {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c}'
}

常用变量：

• {a}：系列名
• {b}：数据名
• {c}：数值
• {d}：百分比（饼图）

2️⃣ 函数形式（最灵活 ✅）

tooltip: {
  trigger: 'axis',
  formatter: function (params) {
    let str = params[0].axisValue + '<br/>';
    params.forEach(p => {
      str += p.marker + p.seriesName + '：' + p.value + '<br/>';
    });
    return str;
  }
}

四、样式配置

tooltip: {
  backgroundColor: 'rgba(0,0,0,0.7)',
  borderColor: '#333',
  borderWidth: 1,
  textStyle: {
    color: '#fff',
    fontSize: 12
  },
  padding: 10
}

五、位置控制

tooltip: {
  position: function (point, params, dom, rect, size) {
    return [point[0] + 10, point[1] + 10];
  }
}

常用内置值：

• 'top'
• 'left'
• 'right'
• 'bottom'

六、完整示例（柱状图）

option = {
  tooltip: {
    trigger: 'axis',
    formatter: '{b} <br/> 销量：{c}'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: [120, 200, 150]
  }]
};

如果你有 具体图表类型（饼图 / 地图 / 双轴等） 或 想要的效果（自定义 HTML、表格、图片），可以告诉我，我可以直接给你对应配置。