学习网站: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 补充了丰富的三维可视化组件。