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

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

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

基本柱图分析

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

柱状图绘图顺序

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

• 1. 设置X轴及其对应的维度
• 2. 设置Y轴及其对应的度量

在Echarts中，基本柱状图的绘图单元对应的配置项关系表如下

柱状图绘图单元配置表

柱状图绘图单元配置表分析

为什么维度与度量的配置项不同？我们来结合Echarts提供的配置项手册以及基本柱状图的代码来分析一下

在Echarts配置项手册中，xAxis与yAxis除了配置名称不一样，其余都是一样的。示例代码对应属性及说明如下：

在设置了x、y轴及x轴的维度后。图表会出现基本的坐标轴。然后需要设置y轴的度量数据。

柱状图/条形图 通过柱形的高度/条形的宽度来表现数据的大小。当设置了维度轴后，另外一个轴对应的就是度量轴。度量轴的数据需要在series里进行设置，series代表的是数据系列数组。数组里的每个元素都代表了一组度量数据。示例代码对应属性及说明如下：

柱状图示例代码分析

那么现在结合基本柱状图的代码再来分析一下，代码如下

let chart = this.$refs.chart;
echarts.init(chart).setOption({
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
});
复制代码

X轴：xAxis的type为category，说明x轴为维度轴。xAxis的data就是指的维度轴的数据

Y轴：yAxis的type为value，说明y轴为度量轴。而度量轴的数据需要在series配置中进行设置。

series[i]的type为bar时，代表此系列图表为柱状/条形图，而data则对应着度量数据

柱状图实现效果

堆叠柱状图分析

堆叠柱状图指的是同一个柱形上，可能有多个细分子类的数据。我们在柱状图的基础上，继续配置提示框、图例、网格、标记线。生成可配置性更高的堆叠柱状图。

堆叠柱状图绘图顺序

• 1. 设置提示框
• 2. 设置图例
• 3. 设置网格
• 4. 设置X轴及维度数据
• 5. 设置Y轴
• 6. 设置数据系列度量数据
  • 1. 设置堆叠
  • 2. 设置标记线
  • 3. 设置柱条宽度

堆叠柱状图绘图单元配置表

堆叠柱状图单元配置表分析

提示框（tooltip）作为图表辅助组件，也称为指示器，可以展示数据的更多指标信息。有不同类型：分别为全局、坐标系、系列、数据项。示例代码对应属性及说明如下：

图例（legend）组件使用在存在多个数据系列的场景下，可以点击图例控制该系列数据的显示情况，示例代码对应属性及说明如下：

网格（grid）在图表容器内的组件，用于设置图表网格的位置、样式等状态，示例代码对应属性及说明如下：

堆叠（stack）应用于柱状图的图表时，会使柱形的高度进行堆叠。示例代码对应属性及说明如下：

图表标线（markLine）可以在图表上进行绘制直线。示例代码对应属性及说明如下：

堆叠柱状图示例代码分析

let option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            
            type : 'shadow'        
        }
    },
    legend: {
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'邮件营销',
            type:'bar',
            stack: '广告',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '广告',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'bar',
            stack: '广告',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'搜索引擎',
            type:'bar',
            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine : {
                lineStyle: {
                    type: 'dashed'
                },
                data : [
                    [{type : 'min'}, {type : 'max'}]
                ]
            }
        },
        {
            name:'百度',
            type:'bar',
            stack: '搜索引擎',
            data:[620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name:'谷歌',
            type:'bar',
            stack: '搜索引擎',
            data:[120, 132, 101, 134, 290, 230, 220]
        },
        {
            name:'必应',
            type:'bar',
            stack: '搜索引擎',
            data:[60, 72, 71, 74, 190, 130, 110]
        },
        {
            name:'其他',
            type:'bar',
            stack: '搜索引擎',
            data:[62, 82, 91, 84, 109, 110, 120]
        }
    ]
};
复制代码

提示框：tooltip设置在全局option下，且trigger（触发类型）为坐标轴触发。当悬浮到坐标轴上时，会出现阴影型的提示信息，因为axisPointer的type值为shadow，代表指示器类型为阴影型

图例：legend的data为数组，表示此图表包含这些数据系列：'直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'

网格：位置信息说明网格在容器中，左边距偏移3%，右边距偏移4%，底部偏移3%。containLabel值为true说明网格包含了坐标轴的标签

X、Y轴分析与基本柱状图一致

数据系列：series数组中，每一个数组项对应着图例（legend）中的每一项。其中，邮件营销、联盟广告、视频广告系列对应的stack（堆叠属性）均为广告，百度、谷歌、必应、其他系列对应的stack均为搜索引擎，所以图表存在两种堆叠柱形。

图表标线：搜索引擎系列中的markLine配置项设置了标线的样式。lineStyle的type为dashed说明标线的格式为虚线，data数组中type分别为特殊标注类型的最小值和最大值，所以起点为搜索引擎系列的最小值，终点为最大值