在vue中封装G2图表

<template>
    <div id="id"></div>
</template>

<script>
import G2 from '@antv/g2'
import { DataSet } from '@antv/data-set'
export default {
    name: 'pie',
    data () {
        return {
            chart: null
        };
    },
    props:{
        gtwopiedata:{
            type: Array
        },
        // gtwopiecolor:{
        //     type: Array
        // },
    },
    methods:{
        g2pie(){
            if(this.chart){     // 如果存在的话就删除图表再重新生成
                this.chart.destroy()
            }
            var startAngle = - Math.PI / 2 - Math.PI / 4;
            var data = this.gtwopiedata.data;
            var ds = new DataSet();
            var dv = ds.createView().source(data);
            dv.transform({
                type: 'percent',
                field: 'value',
                dimension: 'type',
                as: 'percent'
            });
            this.chart = new G2.Chart({
                container: 'id',
                forceFit: true,
                height: this.gtwopiedata.height,
                padding: 'auto'
            });
            this.chart.source(dv);
            this.chart.legend(false);
            this.chart.coord('theta', {
                radius: 0.75,
                innerRadius: 0.5,
                startAngle: startAngle,
                endAngle: startAngle + Math.PI * 2
            });
            this.chart.intervalStack().position('value').color('type', this.gtwopiedata.color).opacity(1).label('percent', {
                offset: -20,
                textStyle: {
                    fill: 'white',
                    fontSize: 12,
                    shadowBlur: 2,
                    shadowColor: 'rgba(0, 0, 0, .45)'
                },
                formatter: function formatter(val) {
                    return parseInt(val * 100) + '%';
                }
            });
            this.chart.guide().html({
                position: ['50%', '50%'],
                html: '<div class="g2-guide-html"><p class="title">'+this.gtwopiedata.title+'</p></div>'
            });
            this.chart.render();