echarts组件的定位和布局.pptx

echarts组件的定位和布局Echarts绘图echarts 组件定位方式Echarts 布局/01echarts 组件定位方式echarts 组件的定位方式介绍echarts中大部分组件和系列会遵循两种定位方式：?left/right/top/bottom/width/height 定位方式?center/radius定位方式echarts 组件的定位方式介绍 left/right/top/bottom/width/height定位方式：?该定位方式中的六个量，每个量都可以当做?绝对值、百分比或者位置描述?绝对值的单位是浏览器像素（px），用?number?形式书写（不写单位）。例如?{left: 23, height: 400}。?百分比表示占 DOM 容器高宽的百分之多少，用?string?形式书写。例如?{right: '30%', bottom: '40%'}。?位置描述可以设置?left: 'center'，表示水平居中。可以设置?top: 'middle'，表示垂直居中。echarts 组件的定位方式介绍?这六个量的概念，和 CSS 中六个量的概念类似：?left：表示距离 DOM 容器左边界的距离。?right：表示距离 DOM 容器右边界的距离。?top：表示距离 DOM 容器上边界的距离。?bottom：表示距离 DOM 容器下边界的距离。?width：表示宽度。?height：表示高度。echarts 组件的定位方式介绍center/radius定位方式：?center?是一个数组，表示?[x, y]，其中，x、y 可以是绝对值或者百分比，含义与前面描述的相同。?radius?是一个数组，表示?[内半径, 外半径]，其中，内外半径可以是绝对值或者百分比，含义与前面描述的相同。注意：在自适应容器大小时，百分比设置是很有用的。/02Echarts布局echarts的布局介绍 echarts 中像legend、visualMap、dataZoom、timeline等狭长型的组件，大部分都有横向布局和纵向布局这两种选择。例如，在宽少长多的移动端屏幕上，使用纵向布局更为合适；而在屏幕较宽的 PC 端上，则要选择使用横向布局。echarts的布局介绍横纵向布局的设置： 一般在组件或者系列的orient或者layout配置项上，设置为'horizontal'或者 。 与 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，写成后者就不奇怪了。echarts组件的定位和布局