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基础概念概览