邂逅Echarts

　　我们在使用Echarts的时候是需要构建一个dom节点，这个节点是需要有宽高的，方便Echarts向内部添加canvas等内容（ps:官网原话——一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。）

　　Echarts中的配置选项：

　　1.系列（series)

　　在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。在 echarts 中series，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

　　example：

　　我们可以这样配置数据：

　　我们也可以这样配置数据：

　　2.组件（component）

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

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

　　example：

 

 

 　　3.组件的定位

　　多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。 这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。

 

 

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

　　[中心半径定位]

　　少数圆形的组件或系列，可以使用“中心半径定位”，例如，pie（饼图）、sunburst（旭日图）、polar（极坐标系）。

　　中心半径定位，往往依据 center（中心）、radius（半径）来决定位置。

　　[其他定位]

 　　少数组件和系列可能有自己的特殊的定位方式。在他们的文档中会有说明。

　　4.坐标系

　　

 

　　在series中，每个图的横坐标xAxisIndex: num指的是在xAxis中数组中的第几个下标值对应的属性。（ps：也可以使用两个不同的纵坐标，一个横坐标）