echarts柱状图刷新页面已经获取到数据，但是不显示出来？

Question

echarts柱状图是子组件，刷新页面已经获取到父组件传来的数据，但是为什么不显示出来，要用其他按钮切换一下才会显示？

父组件代码：
<bar-x-chart v-if="msg === 1" :chart-data="barData" height="210px"/>
export default {

data() {
    return {
        barData:{
    backgroundColor: '#323361',
    show: false,
    xAxis:{
        type: 'category',
        inverse: true,
        data:['jinyan','yanwu','wupin','weilan','renyuan','cheliang','feizhengchang'],    
        axisLabel: {
            interval:0,//0表示x轴数据全部显示
            margin: 20,
            lineStyle: {
                color: '#b3d8ff',
            },
            formatter: function (value:any) {
                return '{' + value + '| }\n{value|' + value + '}';
            },
            rich: {
                value: {
                    lineHeight: 30,
                    align: 'center',
                    color: '#b3d8ff'
                },
                'jinyan': {
                    height: 30,
                    align: 'center',
                    backgroundColor: {
                        image: require('../static/images/warning-smoke.png'),
                    }
                },
                'yanwu': {
                    height: 30,
                    align: 'center',
                    backgroundColor: {
                        image: require('../static/images/warning-fire.png')
                    }
                },
                'wupin': {
                    height: 30,
                    align: 'center',
                    backgroundColor: {
                        image: require('../static/images/warning-goods.png')
                    }
                },
                'weilan': {
                    height: 30,
                    align: 'center',
                    backgroundColor: {
                        image: require('../static/images/warning-enclosure.png')
                    }
                },
                'renyuan': {
                    height: 30,
                    align: 'center',
                    backgroundColor: {
                        image: require('../static/images/warning-person.png')
                    }
                },
                'cheliang': {
                    height: 30,
                    align: 'center',
                    backgroundColor: {
                        image: require('../static/images/warning-car.png')
                    }
                },
                'feizhengchang': {
                    height: 30,
                    align: 'center',
                    backgroundColor: {
                        image: require('../static/images/warning-time.png')
                    }
                },            
            }
        },
        axisLine:{
            lineStyle:{
                color: '#323361'
            }
        }
    },
    yAxis:{
        show: false,
    },
    series: {
        type: 'bar',
        barWidth: '30%',
        data: [],
        itemStyle:{
            normal: {
                //柱形图圆角，初始化效果
                barBorderRadius:[10, 10, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0,color: "#0b9eff"},
                    {offset: 1,color: "#63caff"}
                ]),
                opacity: .8,
                label: {
                    show: true,        //开启显示
                    position: 'top',    //在上方显示
                    textStyle: {        //数值样式
                        color: '#b3d8ff',
                        fontSize: 14
                    }
                }
            }
        }
    },    
    
}
     
}

}

echarts子组件：
<template>

<!-- x轴柱状图 -->
<div ref="histogramChartRef" :style="{ height, width }"></div>

</template>

<script>
import echarts from 'echarts';
export default {

name: 'histogramChartX',
props: {
    height: {
        type: String,
        default: () => '330px'
    },
    width: {
        type: String,
        default: () => '100%'
    },
    chartData: {
        type: Object
    }
},
mounted() {
    this.$nextTick(() => {
        this.histogramCharData();
    });
},
// watch: {
//     chartData: {
//         handler(val) {
//             this.histogramCharData();
//         },
//         deep: true //深层次监听
//     }
// },


 watch: {    
    'chartData': {
        handler(val) {
            setTimeout(()=>{//弹框嵌套图表-请求数据有延迟
                this.histogramCharData();
            },100);
        },
        immediate: true, //初始化监听
        deep: true,//深层次监听    
    }
},

methods: {
    histogramCharData() {
        let series = this.chartData.series;
        console.log("刷新页面在子组件已经获取到数据但是不显示出来",this.chartData.series)
        let myChart = echarts.init(this.$refs.histogramChartRef);
        myChart.setOption({
            tooltip: {
                show: this.chartData.show === false ? false : true, //鼠标移入是否显示浮层提示框
                trigger: 'axis',
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                right: '5%',
                data: this.chartData.type,
                textStyle: {
                    fontSize: this.chartData.fontSize ? this.chartData.fontSize : 12, //字体大小
                    color: '#b3d8ff' //字体颜色
                }
            },
            xAxis: this.chartData.xAxis,
            yAxis: [
                {
                    show: this.chartData.yAxis.show === false ? false : true,
                    type: 'value',
                    name: this.chartData.yName,
                    axisLine: {
                        lineStyle: {
                            color: '#b3d8ff'
                        }
                    },
                    axisLabel: {
                        fontSize: this.chartData.fontSize ? this.chartData.fontSize : 12 //字体大小
                    }
                }
            ],
            series
        });
        //自适应大小
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }
}

};
</script>

<style scoped>
</style>

Answer 1

setOption(option,true);第二个参数给true试试。
如果还不行。在setOption之前，调用 chart.clear();就肯定能显示出来