2020-05-27 Echarts学习

学习网站：https://echarts.apache.org/zh/tutorial.html#ECharts%20%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E6%A6%82%E8%A7%88

一、实例

一个网页中可以创建多个 echarts 实例，每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。如下图所示。

二、系列（series）

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

三、组件

在系列之上，echarts 中各种内容，被抽象为“组件”，系列是专门绘制“图”的组件。echarts 中各组件如下图所示。

四、组件的定位

类似CSS的绝对定位：基于 top / right / down / left / width / height 进行绝对定位，绝对定位基于的是 echarts 容器 DOM 节点。组件定位如下图所示。

五、坐标系

坐标系用于布局这些图，以及显示数据的刻度等等，直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件，如下图所示。

六、异步数据加载

在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

七、loading动画

数据加载过程中，可调用showLoading方法显示加载动画。

八、支持数据的动态更新

九、交互组件

图里组件legend、数据区域缩放组件dataZoom、拖拽功能grahic组件等。

十、移动端自适应

针对一个图表需要同时在PC、移动端上展现的场景，ECharts 内部组件具备随着容器尺寸变化而变化的能力。

十一、数据的视觉映射

数据可视化是 数据 到 视觉元素 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。ECharts 的每种图表本身就内置了这种映射过程（如折线图把数据映射到“线”，柱状图把数据映射到“长度”），此外，ECharts 还提供了 visualMap 组件来提供通用的视觉映射。

十二、ECharts 中的事件和行为

在 ECharts 的图表中用户的操作将会触发相应的事件，开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。

ECharts 中事件分为两种类型，一种是用户鼠标操作点击，另一种是使用可以交互的组件后触发的行为事件（如切换图例开关）。

十三、渲染器选择

览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。

十四、三维可视化

ECharts GL为 ECharts 补充了丰富的三维可视化组件。