关于#Echarts##Vue#的问题，如何解决？

Question

Echarts && Vue3 图表初始化，要在OnMounted 获取dom节点，但如果如此做，节点可以获取到，图表可以渲染
但有一个问题，每次保存代码，OnMounted渲染的代码都是不显示的，只有刷新一下页面，才会渲染出来
模块化可以显示，我这个是先统一初始化图标，就不显示，每次都要刷新一下
👇dom结构

👇js结构，写了一个hook，获取dom，使用forEach将子节点 .chart 传入ChartOperate.AxisChart 对图表初始化

👇hook 只是给图表设置了个标题

👇保存代码时

👇刷新页面

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
从您提供的信息来看，可能是因为每次保存代码后，页面没有重新渲染，导致图表没有重新初始化。您可以尝试在保存代码后手动刷新页面，或者在Vue中使用watch来监听数据的变化，并在变化时重新初始化图表。

具体实现方法如下：

1.在Vue组件中使用watch监听数据的变化：

watch: {
  // 监听数据变化
  data () {
    // 数据变化时重新初始化图表
    this.initChart()
  }
},

2.在mounted生命周期钩子函数中初始化图表，并将初始化后的图表实例存储在Vue实例的数据中：

mounted () {
  // 初始化图表
  this.initChart()

  // 存储图表实例
  this.chartInstance = echarts.getInstanceByDom(this.$refs.chart)
},

methods: {
  initChart () {
    // 获取图表DOM节点
    const chartDom = this.$refs.chart

    // 初始化图表
    const myChart = echarts.init(chartDom)

    // 设置图表配置项
    const option = {
      // ...
    }

    // 渲染图表
    myChart.setOption(option)
  }
},

3.在保存代码后，手动刷新页面，或者更新Vue组件的数据以触发watch的回调函数重新初始化图表。

希望这能够解决您的问题。