组件定位及布局


ECharts组件的定位

概述

在ECharts中,大部分『组件』和『系列』会遵循两种定位方式:

  • left/right/top/bottom/width/height 定位方式
  • center / radius 定位方式

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
    • 是一个数组,表示 [内半径, 外半径],其中,内外半径可以是『绝对值』或者『百分比』,含义和前述相同。

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

ECharts组件的布局

横向(horizontal)和纵向(vertical)

概述

ECharts的『外观狭长』型的组件(如 legend、visualMap、dataZoom、timeline等),大多提供了『横向布局』『纵向布局』的选择。例如,在细长的移动端屏幕上,可能适合使用『纵向布局』;在PC宽屏上,可能适合使用『横向布局』。

横纵向布局的设置,一般在『组件』或者『系列』的 orient 或者 layout 配置项上,设置为 ‘horizontal’ 或者 ‘vertical’。

ECharts3与 ECharts2 的兼容

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)

  • qw

    按照规范

    2021年12月10日 11:08 回复

评论