vue apexcharts：组件中的图表在从 props 获取 axios 数据后直接渲染而没有动画

Question

在父模板中，我调用了一个组件并传递了axios数据：

// template
<myChart
 :pdata="axiosData"
/>

// script
export default {
  data() {
    return {
      axiosData,
    }
  }
  created() {
    axios.get('some-url')
      .then(response => {
        this.axiosData = response.data
      })
  }
}

因为子组件“myChart”在接收到道具数据之前渲染了一个空图表，所以我更新了手表中的图表系列：

// below code is implemented in component
// template
<vue-apex-charts
  type="donut"
  height="200"
  :series="mySeries"
  :options="myOptions"
/>

// script
export default {
  props: {
    pdata: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
       mySeries: [],
       myOptions: ...
    }
  },
  watch: {
    pdata(val) {
      this.mySeries= val
    },
  }
}

图表中的数据呈现时没有任何动画 - 如果我在 data() 中设置静态系列，则图表会呈现动画。

我尝试了一些API，比如ApexCharts.render()、ApexCharts.updateOptions(..)、ApexCharts.updateSeries(..)，但它们都无法触发道具数据更新后的数据动画 watch.

那么在这种情况下的最佳做法是什么？从服务器获取axios数据后如何触发动画...

提前致谢。

Answer 1

终于找到解决办法了...

添加v-if="pdata && pdata.length"可以触发道具数据接收后的动画

vue apexcharts：组件中的图表在从 props 获取 axios 数据后直接渲染而没有动画

vue apexcharts: charts in component rendered directly without animation after get axios data from props

vue.js

axios

apexcharts