在ECharts中,大部分『组件』和『系列』会遵循两种定位方式:
这六个量中,每个量都可以是『绝对值』或者『百分比』或者『位置描述』
这六个量的概念,和 CSS 中六个量的概念类似:
在横向,left、right、width 三个量中,只需两个量有值即可,因为任两个量可以决定组件的位置和大小,例如 left 和 right 或者 right 和 width 都可以决定组件的位置和大小。 纵向,top、bottom、height 三个量,和横向类同不赘述。
在自适应容器大小时,百分比设置是很有用的。
ECharts的『外观狭长』型的组件(如 legend、visualMap、dataZoom、timeline等),大多提供了『横向布局』『纵向布局』的选择。例如,在细长的移动端屏幕上,可能适合使用『纵向布局』;在PC宽屏上,可能适合使用『横向布局』。
横纵向布局的设置,一般在『组件』或者『系列』的 orient 或者 layout 配置项上,设置为 ‘horizontal’ 或者 ‘vertical’。
ECharts2 中的 x/x2/y/y2 的命名方式仍被兼容,对应于 left/right/top/bottom。但是建议写 left/right/top/bottom。
位置描述中,为兼容 ECharts2,可以支持一些看起来略奇怪的设置:left: ‘right’、left: ‘left’、top: ‘bottom’、top: ‘top’。这些语句分别等效于:right: 0、left: 0、bottom: 0、top: 0,写成后者就不奇怪了。
评论区(1)
按照规范