简要介绍下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)等各种坐标系中。同样,一个坐标系,也能承载不同的系列。
原文转自:https://www.xyhtml5.com/23873.html