Echarts数据可视化：图表篇（1）—— 基本柱状图、堆叠柱状图

项目地址

介绍

柱状图作为最常见的可视化图表，用于展示一些比较基础的数据，其中分为基本柱状图、堆叠柱状图。通过实现这两种图表，我们将学习到以下内容

• 基本柱图
  • 坐标轴X、Y轴绘制
  • 维度、度量设置
• 堆叠柱状图
  • 坐标轴指示器
  • 图例切换
  • 堆叠定义
  • 标记线

基本柱图分析

假设我们需要在白纸上画出一个柱状图，首先我们会绘制坐标轴，然后再去绘制对应的柱子。这也符合大多数情况下我们使用Echarts绘制图表的流程。柱状图使用的是直角坐标系，包含X、Y轴，柱状图的X轴一般表示的文字类型的值，Y轴则是数量类型的值。为了方便我们之后的理解，文字类型的称为 维度 ；数值类型的称为 度量

柱状图绘图顺序

所以我们现在的基本柱状图的绘图顺序可以理解为

• 1. 设置X轴及其对应的维度
• 2. 设置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	度量数据	只有在度量轴才有效

柱状图