vue中使用百度echart图表大小问题

       在项目中需要通过百度echarts的仪表盘来展示测试的成功率，自己封装了个gauge的vue组件，展示出来的时候发现大小不对，整个图像被限制在了一个很矮的区间内，如下图所示：

 组件文件如下：

<template>
    <!--单独生成id，避免实例化时使用同一个div-->
    <div style="height:100%;width:100%;" :id="gaugeId"></div>
</template>

<script>
    import echarts from 'echarts';
    import util from '@/libs/util';

    export default {
        name: 'successRateGauge',
        props: ['title', 'rate'],
        data(){
            return {
                gaugeInstance: null,
                gaugeId:util.uuid(),
                gaugeTitle: this.title, // 避免直接使用prop属性导致改变父组件内容
                gaugeRate: this.rate,
                option: {
                    backgroundColor: '#1b1b1b',
                    tooltip: {
                        formatter: "{a} <br/>{c} {b}"
                    },
                    series: [
                        {
                            name: 'xxx',
                            type: 'gauge',
                            radius: "90%", //仪表大小
                            axisLine : {
                                show : true,
                                lineStyle : { // 属性lineStyle控制线条样式
                                    color : [ //表盘颜色
                                        [ 0.5, "#DA462C" ],//0-50%处的颜色
                                        [ 0.7, "#FF9618" ],//51%-70%处的颜色
                                        [ 0.9, "#FFED44" ],//70%-90%处的颜色
                                        [ 1,"#20AE51" ]//90%-100%处的颜色
                                    ]
                                }
                            },
                            detail: {formatter:'{value}%'},
                            data: [{value: 0, name: '%'}]
                        }
                    ]
                }
            }
        },
        methods: {
            getChartInstance(){ // 获取图表实例
                this.gaugeInstance = echarts.init(document.getElementById(this.gaugeId));
            },
            drawGauge(){ // 画图
                this.option.series[0].data[0].value = this.gaugeRate;
                this.option.series[0].name = this.gaugeTitle;
                this.gaugeInstance.setOption(this.option);
                let _this = this;
                window.addEventListener('resize', function () {
                    _this.gaugeInstance.resize();
                });
            }
        },
        mounted(){
            this.getChartInstance();
            this.drawGauge();
        },
        watch: {
            rate(){
                // 这里没有直接监控gaugeRate，因为rate只在初始化的时候赋值给了gaugeRate,
                // 之后rate的改变无法更新到gaugeRate。所以只能直接监听rate。
                this.gaugeRate = this.rate;
                this.drawGauge();
            }
        }
    };
</script>

组件没有什么特殊的，就是把官网的例子改造成了vue组件，方便复用。之前以为是radiu参数设置不对，于是调大了radius，从90%调到了200%，效果就是仪表盘变大了，但是还是被限制在很矮的区间里。后来网上搜了得知，容器大小不能设置百分比，要设置具体的数值，于是将容器大小做了修改：

<template>
    <!--单独生成id，避免实例化时使用同一个div-->
    <div style="height:246px;width:347px;" :id="gaugeId"></div>
</template>

之后就好了，显示正常了。