在系统学习eacharts之前，先了解下echarts的基本概念。
- Echarts 实例: 根据不同的dom可创建多个不同的echarts实例
- Options: 通过options来设置图表
- 系列（series）
Echarts实例
我们可以创建很多个Echarts实例，根据参数的不同，可以返回不同的实例。就像我们在html文件中使用vue一样, 我们可以创建出很多个app, 挂载到很多个dom元素上。
option 描述图表
echarts的基本使用方式就是创建一个实例，然后为其设置option渲染出图表，伪代码如下：
// 创建一个echarts的示例
const instance = echarts.init(dom);
// 设置图表
const option = {...};
instance.setOption(option);
echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。
option 每个属性是一类组件
var option = {
// option 每个属性是一类组件。
legend: {...},
grid: {...},
tooltip: {...},
toolbox: {...},
dataZoom: {...},
visualMap: {...},
// 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
xAxis: [
// 数组每项表示一个组件实例，用 type 描述“子类型”。
{type: 'category', ...},
{type: 'category', ...},
{type: 'value', ...}
],
yAxis: [{...}, {...}],
// 这里有多个系列，也是构成一个数组。
series: [
// 每个系列，也有 type 描述“子类型”，即“图表类型”。
{type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
{type: 'line', data: [2231, 1234, 552, ... ]},
{type: 'line', data: [[4, 51], [8, 12], ... ]}
}]
};
组件
option 每个属性是一类组件
- xAxis（直角坐标系 X 轴）
- yAxis（直角坐标系 Y 轴）
- grid（直角坐标系底板）
- angleAxis（极坐标系角度轴）
- radiusAxis（极坐标系半径轴）
- polar（极坐标系底板）
- geo（地理坐标系）
- dataZoom（数据区缩放组件）
- visualMap（视觉映射组件）
- tooltip（提示框组件）
- toolbox（工具栏组件）
-
series（系列）
...
组件 - 系列（series）
image.png
定义： 一组数值以及他们映射成的图。至少包含一组数值，图表类型（series.type）,以及其他的关于这些数据如何映射成图的参数。
series.type: 图表类型
- line(折线图)
- bar (柱状图)
- pie（饼图）
- scatter(散点图)
- graph(关系图)
- tree（树图）
...
series.data: 数据
- 对象
- 数组
- dataset
组件 - 定位
不同的组件、系列，常有不同的定位方式。
多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。 这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。
其中，他们每个值都可以是：
绝对数值（例如 bottom: 54 表示：距离 echarts 容器底边界 54 像素）。
或者基于 echarts 容器高宽的百分比（例如 right: '20%' 表示：距离 echarts 容器右边界的距离是 echarts 容器宽度的 20%）。
