时间戳

首页 > 解决方案 > vue apexcharts：从props获取axios数据后，组件中的图表直接渲染，没有动画

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

问题描述

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

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

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

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

// 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中更新 props 数据后触发数据动画。

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

提前致谢。

标签： vue.jsaxiosapexcharts

解决方案

终于想出了解决办法...

添加v-if="pdata && pdata.length"可以在收到 props 数据后触发动画。

推荐阅读