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

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