阅读 1133

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

堆叠柱状图实现效果

思考&练习

  1. 如何实现基础条形图?
  2. 如何实现并列柱图?(多个数据系列的柱形组合图表)
  3. 如何实现堆叠条形图?
  4. 如何标线堆叠下的平均值?
关注下面的标签,发现更多相似文章
评论