echarts第二次渲染不出來的原因

場景描述

echarts主要用於數據可視化展示
有些時候，我們可能會根據不同的條件，在頁面上進行顯示和隱藏。
比如說：頁面最初展示了數據，當我點擊不同的按鈕的時候。
echarts會對應的展示或者隱藏。
下面當我點擊單個機構的時候。
echarts會隱藏，點擊多個機構的時候，echarts會展示出來。

使用v-show在本地沒有問題但是上線后第二次不能夠正確顯示

<template>
    <div>
        <el-button type="primary" @click="handerDemo(1)">單個機構</el-button>
        <el-button type="primary" @click="handerDemo(2)">多個機構</el-button>
        <div id="demo" v-if="showFlag"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
    export default {
        data() {
            return {
                showFlag:true
            }
        },
        created(){
            // 我的請求，模擬的數據，大家不同管它
            this.$api.get("http://127.0.0.1:666/newlist", {
                params: {
                    id: '213'
                }
            }).then(res=>{
               //調用echarts
               console.log(res )
               this.initEcharts()
            })
        },
        mounted() {
           
        },
        methods: {
            initEcharts() {
                let demo = echarts.init(document.getElementById("demo"))
                var option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {
                                        pixelRatio: 2
                                    }
                                }
                            },
                            series: [
                                {
                                    name: '訪問來源',
                                    type: 'pie',
                                    radius: ['50%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    //餅圖每個板塊之間有間隔
                                    itemStyle: {
                                        borderWidth: 2, //設置border的寬度有多大
                                        borderColor: '#fff',//間隙顏色
                                    },
                                    data: [
                                        {value: 335, name: '直接訪問'},
                                        {value: 310, name: '郵件營銷'},
                                        {value: 234, name: '聯盟廣告'},
                                        {value: 135, name: '視頻廣告'},
                                        {value: 1548, name: '搜索引擎'}
                                    ]
                                }
                            ]
                };
                demo.setOption(option);
            },

            // 用於展示和隱藏哈
            handerDemo(type){
                if(type==1){
                    this.showFlag=false;
                    console.log(1)
                }else{
                    console.log(1)
                    this.showFlag=true;
                }
            }

        },
    }
</script>

<style lang="scss" scoped>
#demo{
    width: 600px;
    height: 400px;
    background: pink;
}
</style>

為什么第二次顯示不出來

大家看見了剛剛的圖片，我們發現當我點【單個機構】這個按鈕的時候。
ecgarts正確隱藏了。
但是當我點擊多個機構的時候。echarts卻沒有正確的顯示出來。
大家不覺得很奇怪嗎？？？
為啥會有這樣的想象？？？？

經過本人的大量實踐，發現問題的原因，也找到了解決的辦法。
如果裝echarts的容器div上使用v-show，或者沒有使用v-show
那么echarts第二次就不能夠正確的顯示出來
即使A頁面顯示echarts;然后去B頁面；在返回A頁面；
A頁面的echrts的不能夠正確的顯示出來（這種情況會發生在打包后，在開發環境ok的）

解決辦法的地址：https://www.cnblogs.com/IwishIcould/p/15354587.html