对于图表部件的位置问题，有一些是配置项通用的：

  1. left, right, top, bottom ( 该部件距离容器左右上下的距离)
  2. z（图层顺序）
  3. gird （直角坐标系内绘图网格

定位

一定程度上，用top, bottom, left, right 就可以很快的解决各个部件的布局问题
这个配置适用于一些单独出来的部件：title, legend, zoomData, toolbox, grid。
不适用于互相之间有紧密依赖的部件：xAxis, yAxis, serier.item
例如：

  1. options ={
  2.     title:{
  3.       top: '20%', //title 组件离容器上侧的距离 20%
  4.     right: 5,
  5.     bottom: 5,
  6.     left:'12%'
  7.   }
  8. }

图层顺序

有两个属性：z 和 zlevel。
zlevel : 用于Canvas分层，不同的zlevel值的图形会放置在不同的Canvas中。zlevel大的canvas会放在zlevel小的canvas上面。 但是这个很少用，因为过多的canvas会引起过多的内存开销。

z ： 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel的优先级更低，而且不会创建新的Canvas

gird

主要是用于指导series的绘画位置。
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。

设置图表的位置通过option.grid的x,y属性设置图形x轴，y轴方向距离左上角的位置。
x、y、x2、y2的含义如下图
image.png
同时grid也可以用top, bottom, left, right来控制位置（同上）。

grid.containLabel

grid 区域是否包含坐标轴的刻度标签。
用于防止标签溢出的场景，因为当刻度标签长度动态变化时，可能会溢出容器或者覆盖其他组件。

grid的样式

一些grid的样式配置：
grid.backgroundColor : 网格背景颜色，默认透明

边框
gird.borderColor
gird.borderWidth
**
阴影
gird.shadowBlur : 图形阴影的模糊大小 //number
gird.shadowColor
gird.shadowOffsetX : 阴影水平方向上的偏移距离 // number
gird.shadowOffsetY

**