html5调用echarts,H5使用ECharts的问题

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

是我配置的不对吗 这个截图是整个图表容器的宽高

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

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

var option = {

tooltip: {

trigger: 'item',

formatter: "{a}
{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']

}

]

};