[ECharts.js Chart] in the big blank space of the tree on the mobile phone, the chart looks very small, how to fill the picture?

Code is shown in figure:

option:


:

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Jul.07,2021

clipboard.png

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
(function() {
    var myChart = echarts.init(document.getElementById('chartShow'));

    //
    var labelTop = {
        normal: {
            label: {
                show: true,
                position: 'center',
                formatter: '{b}',
                textStyle: {
                    baseline: 'bottom', //
                    fontSize: 12,
                    color: '-sharp666',
                    align: 'center' //
                }
            },
            //            color: '-sharp014aa9',
            color: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                offset: 0,
                color: '-sharp014aa9'
            }, {
                offset: 1,
                color: '-sharp5a93ec'
            }]),
            labelLine: { //
                show: true
            }
        }
    };
    //
    var labelFromatter = {
        normal: {
            label: {
                formatter: function(params) {
                    return params.value + '/' + '100'
                    //                    return params.value
                },
                textStyle: {
                    baseline: 'middle', //
                    fontSize: "12",
                    color: '-sharp666',
                    align: 'center' //
                }
            },
            color: '-sharpfe8f3d',
        }
    };
    //
    var labelBottom = {
        normal: {
            //            color: '-sharpfe8f3d',
            color: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                offset: 0,
                color: '-sharpfe8f3d'
            }, {
                offset: 1,
                color: '-sharpfed008'
            }]),
            label: {
                show: true,
                position: 'center'
            },
            labelLine: {
                show: false
            }
        },
        emphasis: {
            color: 'rgba(0,0,0,0)'
        }
    };
    //
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            bottom: 0,
            padding:8,
            left: 'center',
            data: ['', '']
        },
        title: {
            text: '',
            subtext:"30%",
            x: 'center',
            y: '70',
//            itemGap: 50,
            textStyle: {
                color: '-sharp666',
                fontSize: 14,
                fontWeight: 'normal'
            },
            subtextStyle: {
                color: '-sharp666',
                fontSize: 12
            }
        },
        series: [{
            name: "",
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['50%', '62%'],
            // x: '0%', // for funnel
            itemStyle: labelFromatter,
            data: [{
                    name: '',
                    value: 10,
                    itemStyle: labelBottom,
                },
                {
                    name: '',
                    value: 50,
                    itemStyle: labelTop
                }
            ]
        }]
    };
    myChart.setOption(option);

})()
Menu