VUE3+Echarts 图表toolTip无法正常显示

### Vue3 中 ECharts Tooltip 不显示的解决方案 在 Vue3 项目中使用 ECharts 时，如果遇到 `tooltip` 提示框不显示的问题，通常是由以下几个原因引起的： #### 1. **ECharts 实例不应作为响应式对象** 当将 ECharts 实例赋值给 `ref()` 或其他深层次响应式对象时，可能会导致 `tooltip` 功能失效。这是因为 ECharts 的实例本身并不需要成为响应式对象，而将其转换为响应式对象可能会影响其内部逻辑[^2]。 解决方法是使用 `shallowRef()` 来替代 `ref()`，或者直接将 ECharts 实例保存在一个普通的 JavaScript 变量中。以下是推荐的做法： ```javascript import { shallowRef, onMounted } from 'vue'; import * as echarts from 'echarts'; export default { setup() { const myChart = shallowRef(null); onMounted(() => { const chartDom = document.getElementById('chart-demo'); if (chartDom) { myChart.value = echarts.init(chartDom); myChart.value.setOption({ tooltip: { trigger: 'axis', show: true, }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', }, ], }); } }); return {}; }, }; ``` #### 2. **Tooltip 配置项检查** 即使解决了响应式问题，仍需确认 `tooltip` 的配置是否正确。默认情况下，`tooltip.show` 属性为 `true`，但如果显式设置了 `false`，则会导致提示框不显示[^3]。 确保 `tooltip` 的配置如下所示： ```javascript { tooltip: { trigger: 'axis', // 设置为 'axis' 或 'item' show: true, // 显式启用 tooltip }, } ``` #### 3. **MarkRaw 方法的应用** 另一种方式是通过 `markRaw` 将 ECharts 实例标记为不可被转为代理的对象。这同样可以避免因响应式机制引发的问题[^3]。 ```javascript import { markRaw, onMounted } from 'vue'; import * as echarts from 'echarts'; export default { setup() { let echartInstance; onMounted(() => { const chartDom = document.getElementById('chart-demo'); if (chartDom) { echartInstance = markRaw(echarts.init(chartDom)); echartInstance.setOption({ tooltip: { trigger: 'axis', show: true, }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', }, ], }); } }); return {}; }, }; ``` #### 4. **DOM 初始化顺序** 还需注意 DOM 节点初始化的时间点。如果在调用 `echarts.init()` 之前目标节点尚未渲染完成，则可能导致图表无法正常工作。因此建议始终在 `onMounted` 生命周期钩子中执行相关操作[^4]。 --- ### 总结 综上所述，在 Vue3 中使用 ECharts 时，为了避免 `tooltip` 不显示的问题，需要注意以下几点： - 使用 `shallowRef` 替代 `ref` 处理 ECharts 实例； - 确认 `tooltip` 配置无误； - 利用 `markRaw` 标记 ECharts 实例为非响应式对象； - 正确管理 DOM 渲染时机。 ---