echarts tooltip%

### ECharts Tooltip 配置与使用教程 ECharts 是一款强大的可视化库，提供了丰富的图表类型和自定义选项。其中 `tooltip` 组件是一个非常重要的部分，它允许用户通过鼠标悬停来查看更详细的数据显示[^3]。 #### 1. 基本配置项说明 `tooltip` 可以在全局范围内设置，并且可以针对不同的图表类型（如折线图、柱状图等）进行个性化调整。以下是几个常用的属性： - **trigger**: 设置触发方式，默认为 `'item'` 表示按数据项图形触发；也可以设为 `'axis'` 按坐标轴触发。 - **showContent**: 是否显示提示框内容，默认 true 显示。 - **formatter**: 自定义浮层格式化函数或字符串模板，支持 HTML 片段。 ```javascript option = { tooltip: { trigger: 'axis', showContent: true, formatter: function (params) { let res = ''; params.forEach(function(item){ res += item.seriesName + ': ' + item.value + '<br/>'; }); return res; } }, }; ``` #### 2. 处理复杂场景下的问题 当遇到某些特殊情况下 `tooltip` 不显示的问题时，比如将 ECharts 实例赋值给了 Vue 中的响应式代理对象，则可能会导致此现象发生。解决办法之一是在初始化完成后立即调用 `.dispose()` 方法销毁实例再重新创建新的实例[^2]。 #### 3. 定制化的 Formatter 函数 对于更加复杂的业务需求来说，可以通过编写定制化的 `formatter` 来实现特定的功能逻辑。下面的例子展示了如何利用 JavaScript 动态生成带有样式的悬浮窗体文字[^1]: ```html <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ xAxis: {}, yAxis: {}, series: [{ name:'销量', type:'bar', data:[5, 20, 36, 10, 10, 20], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } }] }); // 使用富文本样式 myChart.setOption({ tooltip: { formatter: '{b}<br/>销售量: {c} ({d}%)<hr size=1>' } }) </script> ```