H5使用ECharts的问题

Question

最近在移动端使用echarts感觉不太好弄 遇到了一些问题 我想让这个饼图剧中显示 我设置了left: 'center'可以水平居中 但是设置了top: 'middle' 不能垂直居中 它好像显示是容器的最下面 怎么也移不上去
是我配置的不对吗 这个截图是整个图表容器的宽高

还有就是到底是怎么在移动端自适应的 我看官网介绍的 就是改变left right top等等一些值 没看出是怎么适配移动端的 我只有一个页面用了图表 有没有好的方式可以做到适配移动端呢

还有就是因为我的数据是后台返回的 有可能没有那么多数据展示 可以动态的控制legend和series里的data数组的长度吗

var option = {

    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'horizontal',
        //left: "70%",
        padding: [300, 30],
        data: ['1月标', '2月标', '3月标', '6月标', '12月标']
    },
    series: [{
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            center: ["120px", "100px"],
            left: 'center',
            top: 'middle',
            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            }
        },
        {
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
                normal: {
                    formatter: '{per|{d}%}  ',
                    rich: {
                        a: {
                            color: '#999',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#aaa',
                            width: '100%',
                            borderWidth: 0.5,
                            height: 0
                        },
                        b: {
                            fontSize: 16,
                            lineHeight: 33
                        },
                        per: {
                            color: '#eee',
                            backgroundColor: '#334455',
                            padding: [2, 4],
                            borderRadius: 2
                        }
                    }
                }
            },
            data: [
                { value: 50000, name: '1月标' },
                { value: 10000, name: '2月标' },
                { value: 800, name: '3月标' },
                { value: 700, name: '6月标' },
                { value: 900, name: '12月标' },
            ],
            color: ['#8db9fe', '#feae57', '#5b6afb', '#7fccff', '#fd8c60']
        }
    ]
};