vue.js - 无法在 vue 组件中多次渲染同一个 amchart3 图

问题描述

我使用 amcharts3 生成图表，样式使用 Bootstrap 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（Vue 项目中已经加载了 amcharts3 库）

<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>

我做错了什么？

标签： vue.jsvuejs2vue-componentamcharts

vue.js - 无法在 vue 组件中多次渲染同一个 amchart3 图

问题描述

解决方案

推荐阅读