echarts tooltip cannot be displayed properly

echarts tooltip cannot be displayed properly

Technology stack: Vue3 + Echarts

When using Echarts in Vue3, the tooltip cannot be displayed normally.

Check if the options of echarts are configured

options = {
    
    
    tooltip: {
    
    
      show: true,
      trigger: "axis", // "item" || "axis"
    },
}

Configured but still not displayedtooltip

• Notice:
  • triggerIt can be displayed normally when is item
  • Cannot be displayed when is axis

Why

If the echarts instance is assigned to the ref responsive Proxy object, the tooltip will not be displayed.

solution

Look at the code:

// const myChart = ref(null); // ❎
// const myChart = null; // ✅
const myChart = shallowRef(null); // ✅
myChart.value = echarts.init(/* */);

echarts instance cannot be used ref reactive object, use shallowRef

shallowRef

viewingvue 网设讍

ref()shallow form of action.

• type

  function shallowRef<T>(value: T): ShallowRef<T>
  
  interface ShallowRef<T> {
         
         
    value: T
  }
  

• details

  Unlike and ref(), the internal value of the shallow ref will be stored and exposed as is, and will not be converted to reactivity by deep recursion. Only access to .value is responsive.

  shallowRef()Often used for performance optimization of large data structures or integration with external state management systems.

• Example

  const state = shallowRef({
         
          count: 1 })
  
  // 不会触发更改
  state.value.count = 2
  
  // 会触发更改
  state.value = {
         
          count: 2 }
  

• reference

  • Guide - Reducing the responsiveness overhead of large immutable structures
  • Guide - Integrating with other status systems