移动端自适应

ECharts组件的定位和布局

大部分[组件]和[系列]会遵循两种定位方式：

left/right/top/bottom/width/height定位方式:

这六个量中，每个量都可以是[绝对值]或者[百分比]或者[位置描述]。

 

• 绝对值

单位是浏览器像素（px），用number形容书写(不写单位)。例如{left：23，height:400}。

• 百分比

表示占DOM容器高度的百分之多少，用string形式书写。例如{right:'30%',bottom:'40%'}。

• 位置描述

可以设置left：‘center’，表示水平居中。

可以设置top:'middle',表示垂直居中。

这六个量的概念，和CSS中六个量的概念类似:

• left：距离DOM容器左边界的距离
• right：距离DOM容器右边界的距离
• top：距离DOM容器上边界的距离
• bottom：距离DOM容器下边界的距离
• width:宽度
• height:高度

在横向，left、right、width三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如left和right或者right和width都可以决定组件的位置和大小。纵向，top、bottom、height三个量，和横向类同理。

Center/Radius定位方式:

• center

是一个数组，表示[x,y],其中，x、y可以是[绝对值]或者[百分比]，含义和前述相同。

• radius

是一个数组，表示[内半径，外半径]，其中，内外半径可以是[绝对值]或者[百分比]，含义和前述相同。

在自适应容器大小时，百分比设置是很有用的。

横向(horizontal)和纵向(vertical)

横纵向布局的设置，一般在[组件]或者[系列]的orient或则layout配置项上，设置为'horizontal'或则'vertical'.