Мне нужно добавить переход к диаграмме Vue C3 при загрузке. Как мне этого добиться? Найдите код ниже. Мне нужно добавить переходный блок, который будет вызываться при начальной загрузке графика. Я смотрю на плавную анимацию при загрузке формы. Используемая диаграмма - кольцевая диаграмма. Любые предложения приветствуются.
<template>
<div>
<b-container fluid style="background-color: #FFFFFF">
<br>
<hr>
<template v-if="chartData.length > 0">
<vue-c3 :handler="handler"></vue-c3>
</template>
<template v-else>
No Data
</template>
</b-container>
</div>
</template>
<script>
import Vue from 'vue'
import VueC3 from 'vue-c3'
export default {
name: 'MyChart',
components: {
VueC3
},
props: {
chartData: {
type: Array
},
title: {
type: String,
required: false
}
},
data() {
return {
handler: new Vue()
}
},
mounted () {
const options = {
data: {
columns: this.chartData,
type : 'donut',
colors: {
High: '#d11d55',
Medium: '#ff9c2c',
Low: '#008b8f',
Info: '#1d1e52'
},
},
donut: {
label: {
format: function () {
}
},
width: 50
},
}
this.handler.$emit('init', options)
},
watch:{
chartData(){
this.handler = {
series: [{
data: this.chartData,
}]
}
},
},
}
</script>
С уважением, Я sh