如何在Nuxt Vue JS中实现图表加载/变更时执行函数？

核心问题 #

你用的Vue生命周期钩子没生效，本质是图表的DOM元素（比如.tick）渲染/更新时机比钩子晚，钩子执行时这些元素还没生成，自然找不到节点。

具体解决办法 #

1. 监听数据变化 + $nextTick

如果图表是基于响应式数据渲染的，先监听数据变化，再用$nextTick确保DOM更新完成后执行方法：

watch: {
  // 假设驱动图表的响应式数据是chartData，开启深度监听
  chartData: {
    deep: true,
    handler() {
      this.$nextTick(() => {
        this.removePMFromXAxis()
      })
    }
  }
},
mounted() {
  // 首次加载同样等待DOM更新
  this.$nextTick(() => {
    this.removePMFromXAxis()
  })
}

2. 用MutationObserver监听DOM变化

如果图表是第三方组件或异步渲染的，直接监听目标容器的DOM变化，一旦目标元素出现就执行方法：

mounted() {
  const target = document.querySelector('.d3-grouped-area .axis--x')
  if (!target) return

  const observer = new MutationObserver(() => {
    const ticks = document.querySelectorAll(".d3-grouped-area .axis--x .tick")
    if (ticks.length > 0) {
      this.removePMFromXAxis()
      // 若只需要执行一次，可添加 observer.disconnect() 断开监听
    }
  })

  // 配置监听规则：监听子节点、文本内容变化
  observer.observe(target, {
    childList: true,
    subtree: true,
    characterData: true
  })

  // 组件销毁时断开监听，避免内存泄漏
  this.$once('hook:beforeDestroy', () => {
    observer.disconnect()
  })
}

3. 直接在D3渲染逻辑中处理（最稳定）

既然用的是D3，完全可以在生成X轴刻度时直接修改文本，不用事后操作DOM：

// 假设你生成X轴的代码如下，直接在tickFormat里处理
d3.select('.axis--x')
  .call(d3.axisBottom(xScale)
    .tickFormat((text) => {
      // 在这里直接去掉末尾的AM/PM
      return text.replace(/\s[APMapm]{2}\s*$/, '')
    })
  )

这种方式从根源解决问题，比事后修改DOM更可靠。

额外提示 #

• 可以在removePMFromXAxis开头加console.log(ticks.length)，确认是元素未生成还是选择器写错。
• 如果用的是封装好的图表库，优先查文档有没有「渲染完成」的回调事件，直接绑定更省心。

内容的提问来源于stack exchange，提问作者M Waqar Anwar