【ECharts.js图表】在手机上树形图很大空白处，图表看起来很小，怎么让图片填充满呢？

Question

代码如图：

option设置：

option = {
            series: [{
                type: 'tree',
                data: treeData(listData),
                left: 'center',
                right: '0',
                top: 'middle',
                bottom: '0',
                layout: 'radial',
                symbol: 'circle',
                symbolSize: 12,
                roam:true,
                initialTreeDepth: 3,
                animationDurationUpdate: 750,
                itemStyle: {
                    borderWidth: 0
                },
                label:{
                    position: 'bottom',
                    rotate: 100,
                    verticalAlign: 'middle',
                    align: 'left',
                    fontSize: 9,
                    formatter: ['{value|{c}}','{name|{b}}'].join('\t'),
                    rich: {
                        value: {
                            fontSize:'12'
                        },
                        name: {
                            color: '#333',
                            fontSize:'8'
                        }
                    }
                }

            }]
}

效果如图：

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

<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: '#666',
                    align: 'center' //水平对齐方式
                }
            },
            //            color: '#014aa9',
            color: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                offset: 0,
                color: '#014aa9'
            }, {
                offset: 1,
                color: '#5a93ec'
            }]),
            labelLine: { //标示线
                show: true
            }
        }
    };
    //百分比设置
    var labelFromatter = {
        normal: {
            label: {
                formatter: function(params) {
                    return params.value + '/' + '100'
                    //                    return params.value
                },
                textStyle: {
                    baseline: 'middle', //垂直对齐方式
                    fontSize: "12",
                    color: '#666',
                    align: 'center' //水平对齐方式
                }
            },
            color: '#fe8f3d',
        }
    };
    //数据位置
    var labelBottom = {
        normal: {
            //            color: '#fe8f3d',
            color: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                offset: 0,
                color: '#fe8f3d'
            }, {
                offset: 1,
                color: '#fed008'
            }]),
            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: '#666',
                fontSize: 14,
                fontWeight: 'normal'
            },
            subtextStyle: {
                color: '#666',
                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);

})()