项目地址
介绍
柱状图作为最常见的可视化图表,用于展示一些比较基础的数据,其中分为基本柱状图、堆叠柱状图。通过实现这两种图表,我们将学习到以下内容
- 基本柱图
- 坐标轴X、Y轴绘制
- 维度、度量设置
- 堆叠柱状图
- 坐标轴指示器
- 图例切换
- 堆叠定义
- 标记线
基本柱图分析
假设我们需要在白纸上画出一个柱状图,首先我们会绘制坐标轴,然后再去绘制对应的柱子。这也符合大多数情况下我们使用Echarts绘制图表的流程。柱状图使用的是直角坐标系,包含X、Y轴,柱状图的X轴一般表示的文字类型的值,Y轴则是数量类型的值。为了方便我们之后的理解,文字类型的称为 维度 ;数值类型的称为 度量
柱状图绘图顺序
所以我们现在的基本柱状图的绘图顺序可以理解为
-
- 设置X轴及其对应的维度
-
- 设置Y轴及其对应的度量
在Echarts中,基本柱状图的绘图单元对应的配置项关系表如下
柱状图绘图单元配置表
绘图单元 | 配置项 |
---|---|
X轴 | xAxis |
X轴对应维度 | xAxis.data |
Y轴 | yAxis |
Y轴对应度量 | series[i].data |
柱状图绘图单元配置表分析
为什么维度与度量的配置项不同?我们来结合Echarts提供的配置项手册以及基本柱状图的代码来分析一下
在Echarts配置项手册中,xAxis与yAxis除了配置名称不一样,其余都是一样的。示例代码对应属性及说明如下:
属性名称 | 含义 | 说明 |
---|---|---|
type | 坐标轴类型 | category:维度轴 value:度量轴 |
data | 维度数据 | 只有在维度轴才有效 |
在设置了x、y轴及x轴的维度后。图表会出现基本的坐标轴。然后需要设置y轴的度量数据。
柱状图/条形图 通过柱形的高度/条形的宽度来表现数据的大小。当设置了维度轴后,另外一个轴对应的就是度量轴。度量轴的数据需要在series里进行设置,series代表的是数据系列数组。数组里的每个元素都代表了一组度量数据。示例代码对应属性及说明如下:
属性名称 | 含义 | 说明 |
---|---|---|
type | 数据系列类型 | bar:柱状/条形图 |
data | 度量数据 | 只有在度量轴才有效 |