vue apexcharts: диаграммы в компоненте, визуализируемые напрямую без анимации после получения данных axios из реквизита

В родительском шаблоне я вызываю компонент и передаю данные 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 (..), но все они не могут запускать анимацию данных после обновления данных реквизита в часах .

Так что же лучше всего делать в таком сценарии? Как запустить анимацию после получения данных axios с сервера ...

Заранее спасибо.


person Heiyoo    schedule 27.01.2021    source источник


Ответы (1)


Наконец-то разобрался с решением ...

Добавление v-if = pdata && pdata.length может запускать анимацию после получения данных реквизита.

person Heiyoo    schedule 30.01.2021