В родительском шаблоне я вызываю компонент и передаю данные 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 с сервера ...
Заранее спасибо.