Echarts中series、option、component究竟是啥？

Echarts创建

一个网页中可以创建多个echarts图例。一个DOM节点可作为echarts的渲染容器。每个DOM节点只能放一个echarts实例。

series 系列

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

图表类型

echarts中的图表类型主要为：line-折线，bar-柱状图，pie-饼图，scatter-散点图，graph-关系图，tree-树图，等等

类同地，系列的数据从dataset中获取的另一种配置方式。

component 组件

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

组件类型
series-系列，
legend-图例组件
tooltip-提示框组件，
toolbox-工具栏组件，
xAxis-直角坐标系x轴，
yAxis-直角坐标系y轴，
grid-直角坐标系底板，
angleAxis-极坐标轴角度轴，
radiusAxis-极坐标系半径轴，
polar-极坐标系底板，
geo-地理坐标系，
dataZoom-数据区缩放组件
visualMap-视觉映射组件，

option 描述图表

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

// 创建 echarts 实例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
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], ... ]}}]
};// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
chart.setOption(option);

系列里的 series.data 是本系列的数据。而另一种描述方式，系列数据从 dataset 中取：

var option = {dataset: {source: [[121, 'XX', 442, 43.11],[663, 'ZZ', 311, 91.14],[913, 'ZZ', 312, 92.12],...]},xAxis: {},yAxis: {},series: [// 数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）{type: 'bar', encode: {x: 1, y: 0}},{type: 'bar', encode: {x: 1, y: 2}},{type: 'scatter', encode: {x: 1, y: 3}},...]
};

组件的定位

【类css的绝对定位】

多数组件和系列，都能够基于top、right、down、left、width、height绝对定位，这种类似于css的绝对定位（position：absolute）。绝对定位是基于echarts容器的DOM节点。
其中，他们每一个值都可以是：
① 绝对数值：如bottom：54 ，距离echarts容器底边界54px
② 基于echarts容器高宽的百分比：如right：‘20%’

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

【中心半径定位】

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

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

坐标系

直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系等。其他一些系列，
pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 graph（关系图）等，既能独立存在，也能布局在坐标系中。

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

再来看下图，一个 echarts 实例中，有多个 grid，每个 grid 分别有 xAxis、yAxis，他们使用 xAxisIndex、yAxisIndex、gridIndex 来指定引用关系：

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

感谢

以上内容均来自echarts官网文档
Echarts基础概念概览