无法在vue组件中多次呈现相同的amchart3图

Question

我使用amcharts3生成图形，引导4表示样式，Vue2生成组件。我有一个父组件，它显示一个甜甜圈图，它本身就是一个组件，我想根据需要多次呈现这些图表。

父组件

<template>
    <div class="w-100 container-fluid">
        <div class="row">
            <!-- Here it goes the Donut Charts -->
        </div>
    </div>
</template>

<script>
import donutChart from './donutChart';
export default {
    components:{
        'donut-chart': donutChart
    },
    data(){
        return{
            graficos: [
                {id: 'grafico', valor:100, valor2: 0},
                {id: 'dona', valor:75, valor2: 25},
                {id: 'homero', valor:50, valor2:50},
            ]
        }
    }
}
</script>

<style></style>

donutChart.vue ( amcharts3库已经加载到Vue项目中)

<template>
    <div class="col">
        <div :id="this.dato.id"></div>
    </div>
</template>

<script>
export default {
    props:{
        dato: {
            type: Object,
            default: {id: 'chartdiv', valor:50, valor2:50}
        }
    },
    data() {
        return {
            
        }
    },
    created: function(){
        console.log(this.dato)
        AmCharts.makeChart( this.dato.id, {
            "type": "pie",
            "theme": "none",            
            "responsive": {
                "enabled": true
            },
            "minWidth": 200,
            "maxWidth": 400,
            "dataProvider": [ {
                "title": "et0",
                "value": this.dato.valor
            },
            {
                "title": "Restante",
                "value": this.dato.valor2
            } ],
            "startDuration": 0,
            "titleField": "title",
            "valueField": "value",
            "labelRadius": 5,
            "radius": "40%",
            "innerRadius": "80%",
            "allLabels": [{
                "y": "46%",
                "align": "center",
                "size": 14,
                "text": "50%",
                "color": "#555"
            }]
        });
    },
    mounted: function(){
    },
    methods:{

    }
}
</script>

<style></style>

问题是donutChart.vue组件在父组件中呈现，并显示了图表。

<donut-chart></donut-chart>

但是，当我尝试多次呈现相同的组件和/或通过道具传递数据时，图表根本不会呈现。

<donut-chart :dato="{id: 'grafico', valor: 100, valor2: 0}"></donut-chart>
<donut-chart :dato="{id: 'dona', valor: 75, valor2: 25}"></donut-chart>
<donut-chart :dato="{id: 'homero', valor: 50, valor2 :50}"></donut-chart>

我做错什么了吗？

Answer 1

井。我已经看清楚了发生了什么，看起来很愚蠢。在donutChart.vue中，有一种只适用于#chartdiv元素的样式，我没有在这个问题中发表文章，因为直到现在我才意识到这段代码。现在，我对每个组件都应用了相同的样式，现在图表被渲染了