ECharts – ECharts基础概念
简要介绍下ECharts中的基础概念：
1、echarts 实例:
- 一个网页中可以创建多个 echarts 实例。
- 每个 echarts 实例中可以创建多个图表和坐标系等。
- dom节点作为echarts的渲染容器，每一个echart独占一个dom节点。
2、系列（series）
系列：一组数值以及他们映射成的图.
一个系列包含的要素：一组数值、图表类型、以及其他的关于这些数据如何映射成图的参数等。
图表类型 （series.type）包括：
- line（折线图）
- bar（柱状图）
- pie（饼图）
- scatter（散点图）
- graph（关系图）
- tree（树图）等
数据（series.data）：
导入的数值。
- ECharts 4 以前，数据只能声明在各个“系列（series）”中
- ECharts 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。
- 关于数据我们会在后面进行学习，这里不展开详细叙述。
通用的样式（series.itemStyle）：
包括阴影、透明度、颜色、边框颜色、边框宽度等。
3、组件（component）：
legend图例组件，用于点击对应的图例是否显示，例如：
- xAxis（直角坐标系 X 轴）、
- yAxis（直角坐标系 Y 轴）、
- grid（直角坐标系底板）、
- angleAxis（极坐标系角度轴）、
- radiusAxis（极坐标系半径轴）、
- polar（极坐标系底板）、
- geo（地理坐标系）、
- dataZoom（数据区缩放组件）、
- visualMap（视觉映射组件）、
- tooltip（提示框组件）、
- toolbox（工具栏组件）、
- series（系列）等。
*组件的详解见后续教程，这里我们不展开叙述。
4、option 描述图表
option表述了：数据、数据如何映射成图形、交互行为。
例如：使用option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。
option是个大的 JavaScript 对象，他的内部有大量的属性，每个属性是一类组件。而多个同类组件，可以组成数组。
5：组件的定位
不同的组件、系列，常有不同的定位方式：
1）类 CSS 的绝对定位：
多数组件和系列，都能够基于 top/right/down/left/width/height绝对定位。这种绝对定位的方式，类似于 CSS 的绝对定位。
其中，他们每个值都可以是：
- 绝对数值（例如 bottom: 54 表示：距离 echarts 容器底边界 54 像素）。
- 基于 echarts 容器高宽的百分比（例如 right: ‘20%’ 表示：距离 echarts 容器右边界的距离是 echarts 容器宽度的 20%）。
2）中心半径定位：
少数圆形的组件或系列，可以使用“中心半径定位”，例如，pie（饼图）、sunburst（旭日图）、polar（极坐标系）。
中心半径定位，往往依据 center（中心）、radius（半径）来决定位置。
3）其他定位：
少数组件和系列可能有自己的特殊的定位方式。在他们的文档中会有说明。
6、坐标系
- 很多系列需要运行在 “坐标系” 上。
例如 line（折线图）、bar（柱状图）等，需要在 “坐标系” 上才能运行。
- 一个坐标系，可能由多个组件协作而成。
我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。
- 一个系列，往往能运行在不同的坐标系中。
例如，一个scatter（散点图）能运行在直角坐标系、极坐标系、地理坐标系（GEO）等各种坐标系中。同样，一个坐标系，也能承载不同的系列。