echarts图形中各部件的移动

由于实际生产中，我们的数据会与示例数据有很大不同，导致图表中各组件出现堆叠的情况，这个时候就需要对图表中的组件位置进行调整。

基本上每个参数中都有left，right，bottom，top来控制对应组件的移动。

下面是各组件的移动方式：

在grid参数中进行设置

left参数：控制左边距离 ，如果设置为center则为居中（left:'center'）

right参数：控制右边距离，如果设置为center则为居中（right:'center'）

bottom参数：控制底部距离

top参数：控制顶部距离

containLabel参数：指的是grid 区域是否包含坐标轴的刻度标签,默认不包含

如下是containLabel参数true与false的对比：

在title参数中进行设置

在toolbox参数中进行设置

在legend参数中进行设置

如果x轴的文字如果太长会受到遮挡，这个时候可以用grid属性解决。

设置grid属性定义图的大小来释放空间，使得axislabel有足够的空间

当文字不是特别长的情况下可设置文字自动换行，调用formatter回调函数实现。

试一下两个字换行。如下：

一个网页中可以创建多个 echarts 实例。

每个 echarts 实例中可以创建多个图表和坐标系等等（用 option 来描述）。

准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。

在 echarts 里， 系列 （series）是指：一组数值以及他们映射成的图。

一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

说人话就是， 系列 这个东西就是 用来描述图表的 ，包含了图表的数据、图表是什么类型：line（折线图）、bar（柱状图）、pie（饼图）... 、以及其它的构成参数。

也可以有另一种配置方式，系列的数据从 dataset 中取：

在系列之上，echarts 中各种内容，被抽象为“组件”。

例如，echarts 中至少有这些组件： xAxis （直角坐标系 X 轴）、 yAxis （直角坐标系 Y 轴）、 grid （直角坐标系底板）、 angleAxis （极坐标系角度轴）、 radiusAxis （极坐标系半径轴）、 polar （极坐标系底板）、 geo （地理坐标系）、 dataZoom （数据区缩放组件）、 visualMap （视觉映射组件）、 tooltip （提示框组件）、 toolbox （工具栏组件）、 series （系列）、...

我们注意到，其实 系列 （series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。

如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。

echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能 *** 作什么事情等等。简而言之， option 描述了： 数据 、 数据如何映射成图形 、 交互行为 。

系列里的 series.data 是本系列的数据。也可以使用另一种方式，系列数据从 dataset 中取：

多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。

这种绝对定位的方式，类似于 CSS 的绝对定位（ position: absolute ）。绝对定位基于的是 echarts 容器 DOM 节点。

它们的值可以是

如下图的例子，对 grid 组件（也就是直角坐标系的底板）设置 left、right、height、bottom 达到的效果。

我们可以注意到， left right width 是一组（横向）、 top bottom height 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了 left 和 right 就可以了， width 会被自动算出。

坐标系用于布局，以及显示数据的刻度等等。一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis （直角坐标系 X 轴）、 yAxis （直角坐标系 Y 轴）、 grid （直角坐标系底板）三种组件。 xAxis 、 yAxis 被 grid 自动引用并组织起来，共同工作。

下图，只声明了 xAxis 、 yAxis 和一个 scatter （散点图系列），echarts 暗自为他们创建了 grid 并关联起他们：

再来看两个 yAxis ，共享了一个 xAxis 的例子。两个 series ，也共享了这个 xAxis ，但是分别使用不同的 yAxis ，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis ：

还存在一个 echarts 实例中，有多个 grid 的情况，每个 grid 分别有 xAxis 、 yAxis ，他们使用 xAxisIndex 、 yAxisIndex 、 gridIndex 来指定引用关系：

另外，一个系列，往往能运行在不同的坐标系中。例如，一个 scatter （散点图）能运行在 直角坐标系、极坐标系 、地理坐标系（GEO） 等各种坐标系中。同样，一个坐标系，也能承载不同的系列，如上面出现的各种例子，直角坐标系里承载了 line （折线图）、 bar （柱状图）等等。

---