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

项目地址

介绍

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

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

基本柱图分析

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

柱状图绘图顺序

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

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

柱状图示例代码分析

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

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. 设置提示框
1. 设置图例
1. 设置网格
1. 设置X轴及维度数据
1. 设置Y轴
1. 设置数据系列度量数据
- 1. 设置堆叠
- 1. 设置标记线
- 1. 设置柱条宽度

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

绘图单元	配置项
提示框	tooltip
图例	legend
网格	grid
X轴	xAxis
X轴对应维度	xAxis.data
Y轴	yAxis
堆叠	series[i].stack
图表标线	markLine
柱条宽度	barWidth

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

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

属性名称	含义	说明
trigger	提示触发类型	item：数据项图形触发； axis：坐标轴触发；none：不触发
axisPointer	坐标轴指示器配置项	在坐标轴指示器中生效
axisPointer.type	指示器类型	line:直线型; shadow:阴影型; none:无; cross:十字准星型

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

属性名称	含义	说明
data	数据数组	每一项代表一个系列的name，如果没有指定会从当前系列中自动获取

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

属性名称	含义	说明
left、right、bottom、top	离容器各方向距离	可以为具体像素值、百分比、居中格式（left、center、right）
containLabel	网格是否包含坐标轴的刻度标签	可用于防止标签溢出

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

属性名称	含义	说明
无	设置柱形堆叠	相同维度轴拥有相同stack值的柱形会进行堆叠摆放

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

属性名称	含义	说明
lineStyle	标线的样式	可设置标线颜色、宽度、类型等属性
lineStyle.type	标线类型	solid：实线；dashed：虚线；dotted：点
data	标线的数据数组	每个数组项可以是两个值的数组，代表线的、终点

堆叠柱状图示例代码分析

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分别为特殊标注类型的最小值和最大值，所以起点为搜索引擎系列的最小值，终点为最大值

堆叠柱状图实现效果

思考&练习

如何实现基础条形图？
如何实现并列柱图？（多个数据系列的柱形组合图表）
如何实现堆叠条形图？
如何标线堆叠下的平均值？