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)等各种坐标系中。同样,一个坐标系,也能承载不同的系列。


评论区(0)

评论