一个坐标系,可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中,包括有 xAxis(直角坐标系 X 轴)、yAxis(直角坐标系 Y 轴)、grid(直角坐标系底板)三种组件。
xAxis
、yAxis
被grid
自动引用并组织起来,共同工作。
系列(series)
系列
(series)是很常见的名词。在 echarts 里,系列
(series)是指:一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”,而在 echarts 中取其扩展的概念,不仅表示数据,也表示数据映射成为的图。所以,一个系列
包含的要素至少有:一组数值、图表类型(series.type
)、以及其他的关于这些数据如何映射成图的参数。echarts 里系列类型(
series.type
)就是图表类型。系列类型(series.type
)至少有:
line | 折线图是用折线将各个数据点标志连接起来的图表,用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。 |
bar | 柱状图(或称条形图)是一种通过柱形的高度(横向的情况下则是宽度)来表现数据大小的一种常用图表类型。 |
pie | 饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。 |
scatter | 散点(气泡)图。直角坐标系上的散点图可以用来展现数据的 |
effectScatter | 带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。 |
radar | 雷达图主要用于表现多变量的数据,例如球员的各个属性分析。依赖 radar 组件。 |
tree | 树图主要用来可视化树形数据结构,是一种特殊的层次类型,具有唯一的根节点,左子树,和右子树。 注意:目前不支持在单个 series 中直接绘制森林,可以通过在一个 option 中配置多个 series 实现森林 |
treemap | Treemap 是一种常见的表达『层级数据』『树状数据』的可视化形式。它主要用面积的方式,便于突出展现出『树』的各层级中重要的节点。 |
sunburst | 旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。 |
boxplot | Boxplot 中文可以称为『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』,是一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。 |
candlestick | Candlestick 即我们常说的 在 ECharts3 中,同时支持 |
heatmap | 热力图 热力图主要通过颜色去表现数值的大小,必须要配合 visualMap 组件使用。 |
map | 地图。 地图主要用于地理区域数据的可视化,配合 visualMap 组件用于展示不同区域的人口分布密度等数据。 多个地图类型相同的系列会在同一地图上显示,这时候使用第一个系列的配置项作为地图绘制的配置。 Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 |
parallel | 平行坐标系的系列。平行坐标系(Parallel Coordinates) 是一种常用的可视化高维数据的图表。 |
lines | 路径图 用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化。 ECharts 2.x 里会用地图上的 |
graph | 关系图 用于展现节点以及节点之间的关系数据。 |
series-sankey | 桑基图 是一种特殊的流图(可以看作是有向无环图)。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。 |
funnel | 漏斗图 |
gauge | 仪表盘 |
pictorialBar | 象形柱图 象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。 |
themeRiver | 主题河流 是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。 |
custom | 自定义系列 自定义系列可以自定义系列中的图形元素渲染。从而能扩展出不同的图表。 同时,echarts 会统一管理图形的创建删除、动画、与其他组件(如 dataZoom、visualMap)的联动,使开发者不必纠结这些细节。 |
组件(component)
在系列之上,echarts 中各种内容,被抽象为“组件”。
我们注意到,其实系列(series)也是一种组件,可以理解为:系列是专门绘制“图”的组件。
注:因为系列是一种特殊的组件,所以有时候也会出现 “组件和系列” 这样的描述,这种语境下的 “组件” 是指:除了 “系列” 以外的其他组件。
如下图,右侧的 option
中声明了各个组件(包括系列),各个组件就出现在图中。
xAxis | 直角坐标系 X 轴 |
yAxis | 直角坐标系 Y 轴 |
grid | 直角坐标系底板 |
angleAxis | 极坐标系角度轴 |
radiusAxis | 极坐标系半径轴 |
polar | 极坐标系底板 |
geo | 地理坐标系 |
dataZoom | 数据区缩放组件 |
visualMap | 视觉映射组件 |
tooltip | 提示框组件 |
toolbox | 工具栏组件 |
series | 系列 |
legend | 图例组件 |
title | 标题组件 |
timeline | 时间线组件 |