Vue项目中通过v-show控制echarts图显示隐藏 但宽度只有100px(resize不管用)

Question

这是代码

<!--HTML-->
<el-container>
    <el-header>
        <el-row type="flex" justify="center">
            <el-button autofocus plain type="primary" @click="radarShow = true,
                barShow = false">雷达图</el-button>
            <el-button plain type="primary" @click="radarShow = false,
                barShow = true">柱状图</el-button>
            <el-button plain type="primary" @click="backClick">返回</el-button>
        </el-row>
    </el-header>
    <div class="radar" v-show="radarShow">
         <!-- 雷达图挂载节点 -->
         <div id="radarChart" style="width: 100%;height: 700px;"></div>
    </div>
    <div class="bar" v-show="barShow">
         <!-- 柱状图挂载节点 -->
         <div id="barChart" style="width: 100%;height: 700px;"></div>
    </div>
</el-container>

<!--JS-->
data() {
     return {
          proId: '',  //本企业数据proId
          radarShow: true,  //雷达图显示隐藏
          barShow: false,  //柱状图显示隐藏    
      };
},
mounted() {
    this.initRadar()
    this.initBar()
},
methods: {
            //返回按钮点击事件
            backClick() {
                this.$router.go(-1)
            },
            //雷达图初始化方法
            initRadar() {
                let myRadar = echarts.init(document.getElementById('radarChart'))
                let option = {
                    color: ["#409EFF", "#E6A23C"],
                    legend: {
                        align: 'left',
                        orient: 'vertical',
                        x: 'right',      //可设定图例在左、右、居中
                        y: 'top',     //可设定图例在上、下、居中
                        padding: [20, 50, 0, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
                    },
                    radar: {
                        shape: 'circle',
                        indicator: [
                            { name: '销售（Sales）', max: 6500 },
                            { name: '管理（Administration）', max: 16000 },
                            { name: '信息技术（Information Technology）', max: 30000 },
                            { name: '客服（Customer Support）', max: 38000 },
                            { name: '研发（Development）', max: 52000 },
                            { name: '市场（Marketing）', max: 25000 }
                        ]
                    },
                    series: [{
                        name: '预算 vs 开销（Budget vs spending）',
                        type: 'radar',
                        data: [
                            {
                                value: [4200, 3000, 20000, 35000, 50000, 18000],
                                name: '预算分配（Allocated Budget）'
                            },
                            {
                                value: [5000, 14000, 28000, 26000, 42000, 21000],
                                name: '实际开销（Actual Spending）'
                            }
                        ]
                    }]
                }
                myRadar.setOption(option)

            },
      }
}

Answer 1

这个https://blog.csdn.net/weixin_43606158/article/details/96457167