Vue中使用Echarts时在一个父组件中引用相同的子组件自适应问题

问题：在一个父组件中同事引用多个相同的子组件，配置了自适应后只有一个组件大小进行了变化。

（组件1）

 （组件2）

原因：原因是因为两个组件没有分别设置idName，所以只有最后一个组件进行了变化。

解决方法：

①父组件中：引用子组件时分别设置不同的idName

 <PieChart :chartOption="chartOption1" :chartData="chartData1" idName='chart1'></PieChart>
 <PieChart :chartOption="chartOption2" :chartData="chartData2" idName='chart2'></PieChart>

②子组件中：使用传进来的idName去创建Echarts即可

<template>
    <div :id="idName" style='width:100%;height:100%;'>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props:['chartOption','chartData','idName'],//接收idName
    data(){
        return{
            myChart:null,
            clickTab:''
        }
    },
    mounted(){
        var that = this;
        this.setChart();
        this.$nextTick(function() {
            this.$on('changeOption', function() {
                    that.setChart();
            });
        });
    },
    methods:{
        setChart(){
            var chartDom = document.getElementById(this.idName);//使用传进来的idName
            this.myChart = echarts.init(chartDom);
            var option;
            option = this.chartOption;
            option.series[0].data = this.chartData;
            option && this.myChart.setOption(option,true);
            
            // 监听窗口变化 - 多个图表同时刷新
            window.addEventListener('resize', ()=> {
                this.myChart.resize();
            })
        },
        
    },
    watch:{
        chartData:function(){
            this.setChart();
        },
        chartOption:function(val,old){
            this.setChart();
        }
    },
}