ECharts中常见的基本概念

本部分主要介绍ECharts中最基本的名词和概念。

①ECharts实例

一个网页中可以创建多个ECharts实例。每个ECharts实例中可以创建多个图表和坐标系等内容（一般情况下这些内容写在option中）。在绘制图表之前需要准备一个DOM节点，作为ECharts的渲染容器（具体操作方法详见“1.可视化图表大小.docx”文档中的内容），就可以在上面创建一个ECharts实例。每个ECharts实例独占一个DOM节点。

如图0.1所示，“instance1”中代码展示的是在一个ECharts实例中绘制多个图表与坐标系的情况，“instance1”代码箭头指向为显示效果；“instance2”中代码展示的是在一个ECharts实例中绘制1个图表与坐标系的情况，“instance2”代码箭头指向为显示效果。

图0.1 ECharts实例举例

②系列（series）

系列（series）是很常见的名词。在ECharts里，系列（series）是指：一组数值以及它们映射成的图。

“系列”一词在ECharts中不仅表示数据，也表示数据映射成为的图。所以，一个系列包含的三类要素：数据、图表类型（series.type）、相关配置参数。

ECharts里系列类型（series.type）就是图表类型。系列类型（series.type）有很多，常见的有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）。

如图0.2所示，右侧的option中声明了三个系列（series）：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的数据（series.data）。

图0.2 系列类型举例

③数据集合（dataset）

当数据量比较大或者图表要求展示的维度较多时，可以使用数据集合组件完成数据的存储，如图0.3所示。图中展示了dataset中数据与系列对应的其中一种关系，dataset中source用于存放数据数组，图0.3中所示的数据第一列维度为0，第二列维度为1，以此类推。

图0.3中series0中使用encode属性与dataset中的维度为3和4的数据相对应，“itemName：3”对应“XX”、“YY”、“ZZ”，用于展示饼图中的每部分名称，“value：4”的含义为，饼图中每部分的值为维度4中的数据。

图0.3中series1中encode使用“x”、“y”对应不同的维度，来确定坐标轴中绘制的数据值。如series1的“x”轴、“y”轴分别对应维度0和维度1。series2中以此类推。

数据集合组件的使用非常灵活多变，适合于多个图表共用一组多维数据的情况，它的更多具体用法，会在“数据集合”中详细进行介绍。

图0.3 数据集合举例

④组件（component）

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

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

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

图0.4 各部分组件举例

常见描述：因为系列是一种特殊的组件，所以有时候也会出现“组件和系列”这样的描述，这种语境下的“组件”是指：除了“系列”以外的其他组件。

⑤用option描述图表

图0.5 配置项代码示意图

ECharts中使用option来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等。简而言之，option表述了：数据、数据如何映射成图形、交互行为，如图0.5所示为配置项的代码示意图，系列里的series.data是本系列的数据，数据除了放置在本系列中还可以像dataset中介绍的一样，放置在数据集合之中。

⑥组件的定位

在网页开发相关的课程中我们已经学习了网页可以通过CSS的position属性来设置定位。在ECharts中的组件定位使用的方式与CSS中的使用方法非常类似。

[类CSS的绝对定位]

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

CSS知识点回忆：

在CSS中位置属性的值可以是“10px”或“100%”两种形式，ECharts中也支持这两种值，但代码书写形式有所不同。

①在ECharts中，绝对定位的属性值默认为像素，因此不需要写明“px”这个单位，直接写数值即可，例如bottom:54表示：距离ECharts容器底边界54像素。

②在使用百分比的值是，ECharts有默认的含义，即百分比的含义为基于ECharts容器高宽的百分比（例如right:'20%'表示：距离ECharts容器右边界的距离是ECharts容器宽度的20%）。

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

图0.6 绝对定位举例

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

[中心半径定位]

在可视化中某些图标是圆形的，在他们的定位中需要圆心、半径的参与。例如，pie（饼图）如图0.7所示、sunburst（旭日图）如图0.8所示、polar（极坐标系）如图0.9所示。

图0.7 饼图示意

图0.8 旭日图示意

图0.9 极坐标图示意

在这些图表类型的编码过程中，需要依靠使用“中心半径定位”，中心半径定位，往往依据center（中心）、radius（半径）来决定位置。

[其他定位]

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

⑦坐标系

可视化图表中存在直角坐标系、极坐标系等多种坐标系，例如line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等图表均需要绘制在“坐标系”上。坐标系用于布局这些图以及显示数据的刻度等等。

例如ECharts中支持的常见坐标系有：

●直角坐标系；

●极坐标系；

●地理坐标系（GEO）；

●单轴坐标系；

●日历坐标系。

也有一些图表，不依赖坐标系，就可以绘制。例如pie（饼图）、tree（树图）等，并不依赖坐标系，能独立存在。

还有一些图，例如graph（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。

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

例1：如图0.10所示是最简单的使用直角坐标系的方式：只声明了xAxis、yAxis和一个scatter（散点图系列），ECharts暗自为他们创建了grid并关联起它们。

图0.10 直角坐标系示意图

图0.11 双Y轴直角坐标系

例2：下面这个例子比0.10更加复杂，如图0.11所示代码中编写了两个yAxis，共享了一个xAxis。两个series，也共享了这个xAxis，但是分别使用不同的yAxis，使用yAxisIndex来指定它自己使用的是哪个yAxis。

例3：如图0.12所示，一个ECharts实例中，有多个grid，每个grid分别有xAxis、yAxis，他们使用xAxisIndex、yAxisIndex、gridIndex来指定引用关系：

图0.12 多grid示意图

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

⑧详情提示框（tooltip）

详情提示框组件的默认出发形式为鼠标悬停，当鼠标悬停到对应的组件或者数据上时，会出现对应的内容详细提示。

tooltip组件常用的配置项位置如下：

·可以设置在全局，即 tooltip。

·可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip。

·可以设置在系列中，即 series.tooltip。

·可以设置在系列的每个数据项中，即 series.data.tooltip。

tooltip组件包含的属性较多读者可以在配置项手册中自行查看对应的属性，由于详情提示框中也会出现文字内容，因此包含通用的“textStyle”属性。tooltip组件常用的属性配置项有“show”“trigger”“axisPointer”“position”“formatter”等。下面通过一些案例简介tooltip组件的常见用法。

设置tooltip中的trigger属性，trigger属性主要用来相应鼠标悬停的显示效果的，名为“触发类型”，即悬停事件触发时图表中相应的展示类型。trigger属性主要有三个取值，具体使用效果请查看“0-tooltip-trigger-柱状图.html”与“0-tooltip-trigger-饼图.html”。

·'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

·'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

·'none'：什么都不触发。

在tooltip中trigger属性使用的是默认的一些效果，一般想要达到比较优化的可视效果经常会使用“axisPointer”属性与其搭配。“axisPointer”属性用于设置坐标轴指示器，主要是用来辅助用户快速定位坐标值的。tooltip.axisPointer是配置坐标轴指示器的快捷方式，实际上坐标轴指示器的全部功能，都可以通过轴上的axisPointer配置项完成（例如 xAxis.axisPointer 或 angleAxis.axisPointer）。但是使用 tooltip.axisPointer 在简单场景下会更方便一些。

tooltip.axisPointer可以设置坐标轴指示的形式（使用type属性设置直线、阴影、十字交叉线），经常与“type”属性配合的是“tooltip.axisPointer. axis”属性，它用于明确的指出指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的axisPointer（默认取类目轴或者时间轴），“tooltip.axisPointer. axis”属性的取值也可以是 'x', 'y', 'radius', 'angle'，详见“0-tooltip-axisPointer.html”。

可以通过snap属性设置鼠标悬停时是否自动吸附至数据点上，这是一个布尔类型的属性，默认的是true，这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。

tooltip.axisPointer中有一个比较特殊的属性“label”属性，这个属性用于设置鼠标在图标上悬停时坐标轴中显示的信息。它需要配合tooltip.axisPointer.type属性来显示效果，如果 tooltip.axisPointer.type 设置为 'cross' 则默认显示标签，否则默认不显示。效果详见“0-tooltip-axisPointer.html”。“label”中的其他属性均为设置文字样式等内容，此处省略。

提示：因为tooltip.axisPointer.type的取值有三种，因此tooltip.axisPointer配置项下提供了“LineStyle”“shadowStyle”“crossStyle”样式。

⑨直角坐标网格组件（grid）

本组件主要用于直角坐标系内绘图网格，网格中支持折线图，柱状图，散点图（气泡图）。

一个ECharts实例可以绘制多个grid组件，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。“grid”属性主要用户进行图表布局，因此这一配置项之中支持的属性主要为与位置相关的属性。一个grid可以理解为一个单独的图表实例，因此在grid中可以单独设置tooltip属性，具体设置内容与⑧之中一致。“grid”中“containLabel”属性相对来说比较常见，它主要适用于设置“grid”区域是否包含坐标轴的刻度标签。

containLabel为false的时候：

grid.left/grid.right/grid.top/grid.bottom/grid.width/grid.height决定的是由坐标轴形成的矩形的尺寸和位置。

这比较适用于多个grid进行对齐的场景，因为往往多个grid对齐的时候，是依据坐标轴来对齐的。

containLabel为 true的时候：

grid.left/grid.right/grid.top/grid.bottom/grid.width/grid.height决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置，如图0.13所示展示了grid的用法。

图0.13 多grid用法

这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。

⑩直角坐标轴

ECharts中支持各类坐标轴的内容的设置，不同的坐标轴类型不同，本部分仅介绍直角坐标系系的常用操作。直角坐标系中支持X、Y轴坐标的央视设置，其中包含很多内容，为了方便理解，可以将直角坐标轴的设置分为几大部分：坐标轴（axisLine）、坐标刻度（axisTick）、刻度标签（axisLabel）、分割线（splitLine）、分割区域（splitArea）、坐标轴指示（axisPointer）。