In the project, we need to show the success rate of the test through the dashboard of Baidu echarts. We encapsulate a gauge vue component. When we show it, we find that the size is wrong, and the whole image is limited to a very short range, as shown in the following figure:

The component files are as follows:

<template>
    <!--Separate generation id，Avoid using the same when instantiating 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, // Avoid changing the content of the parent component by using the prop attribute directly
                gaugeRate: this.rate,
                option: {
                    backgroundColor: '#1b1b1b',
                    tooltip: {
                        formatter: "{a} <br/>{c} {b}"
                    },
                    series: [
                        {
                            name: 'xxx',
                            type: 'gauge',
                            radius: "90%", //Instrument size
                            axisLine : {
                                show : true,
                                lineStyle : { // Property lineStyle controls line style
                                    color : [ //Dial Color
                                        [ 0.5, "#Da462c "], / / color at 0-50%
                                        [ 0.7, "#Ff9618 "], / / color at 51% - 70%
                                        [ 0.9, "#Ffed44 "], / / color at 70% - 90%
                                        [ 1,"#20ae51 "] / / color at 90% - 100%
                                    ]
                                }
                            },
                            detail: {formatter:'{value}%'},
                            data: [{value: 0, name: '%'}]
                        }
                    ]
                }
            }
        },
        methods: {
            getChartInstance(){ // Get chart instance
                this.gaugeInstance = echarts.init(document.getElementById(this.gaugeId));
            },
            drawGauge(){ // Drawing
                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(){
                // There is no direct monitoring of the gauge rate, because rate is only assigned to the gauge rate during initialization,
                // After that, the change of rate cannot be updated to gauge rate. So we can only monitor rate directly.
                this.gaugeRate = this.rate;
                this.drawGauge();
            }
        }
    };
</script>

There is nothing special about the component, that is, the example of the official website is transformed into a vue component, which is convenient for reuse. I thought that it was the wrong setting of the radius parameter, so I increased the radius from 90% to 200%. The effect is that the dashboard has become larger, but it is still limited to a very short range. Later, after searching the Internet, we learned that the container size cannot be set as a percentage, so we need to set a specific value, so we modified the container size:

<template>
    <! -- generate id separately to avoid using the same div when instantiating -- >
    <div style="height:246px;width:347px;" :id="gaugeId"></div>
</template>

After that, the display is normal.