问题:在一个父组件中同事引用多个相同的子组件,配置了自适应后只有一个组件大小进行了变化。
(组件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();
}
},
}