<template>
    <div>
        <canvas ref="chart" style="margin: auto" ></canvas>
    </div>
</template>
<script>
import VueCharts from 'vue-chartjs'
import { bubble} from 'vue-chartjs'
export default {
    name: 'bubble',
    props: ['chartData', 'options', 'width', 'height'],
    watch: {
        chartData() {
            if (this.myChart) {
                this.myChart.update()
            }
            else {
                this.myChart = new Chart(this.$refs.chart.getContext('2d'), { type: 'bubble', data: this.chartData, options: this.options })
            }
        }
    },
    data() {
        return {
            myChart: null
        }
    },
    mounted() {
        if (this.chartData) {
            this.myChart = new Chart(this.$refs.chart.getContext('2d'), { type: 'bubble', data: this.chartData, options: this.options })
        }

    },
    methods: {
        updateChart() {
            this.myChart.update()
        }
    }
}
</script>
<style lang="less" scoped>
</style>
