堆叠柱状图基本柱图分析为什么维度与度量的配置项不同？

堆积柱形图基本柱形图分析

假设我们需要在白纸上画一个直方图。 首先我们绘制坐标轴，然后绘制相应的列。 这也和我们大多数情况下画图的流程是一致的。 直方图使用直角坐标系，包括X轴和Y轴。 直方图的X轴一般表示文本类型值，Y轴表示定量类型值。为了方便我们后续理解，将文本类型称为维度； 数值类型称为度量。

条形图绘制顺序

所以我们现在的基本直方图的绘制顺序可以理解为

中，基本直方图绘制单元对应的配置项关系表如下

条形图绘制单元配置表绘制单元配置项

X轴

x轴

X轴对应尺寸

x轴数据

Y轴

y轴

Y轴对应测量

[i].数据

条形图绘制单元配置表分析

为什么维度和度量的配置项不一样呢？我们结合提供的配置项手册和基础直方图代码来分析一下。

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

属性名称含义说明

类型

轴型

：尺寸轴值：测量轴

数据

尺寸数据

仅在尺寸轴上有效

设置 x、y 轴和 x 轴尺寸后。 基本轴将出现在图表上。 然后需要设置y轴的测量数据。

柱形图/条形图通过柱的高度/条的宽度表示数据的大小。 当设置尺寸轴时，另一个轴对应于测量轴。 这里需要设置测量轴的数据，代表数据系列数组。 数组中的每个元素代表一组度量数据。 示例代码对应的属性及说明如下：

属性名称含义说明

类型

数据系列类型

bar：柱形图/条形图

数据

指标数据

仅在公制轴上有效

条形图示例代码分析

那么现在我们就根据基本直方图的代码来分析一下。 代码如下

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的类型为，表示x轴为尺寸轴。 xAxis的数据指的是维度轴的数据

Y轴：yAxis的类型为value，表示y轴为测量轴。 测量轴的数据需要在配置中设置。

当[i]的类型为bar时，表示该系列图表为柱形图/条形图，数据对应指标数据。

条形图实现效果

堆积柱形图分析

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

堆积柱形图绘制顺序 堆积柱形图绘制单位配置表 绘制单位配置项

提示框

传奇

网格

网格

X轴

x轴

X轴对应尺寸

x轴数据

Y轴

y轴

堆

[i].堆栈

图表刻度

条形宽度

堆积柱形图单位配置表分析

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

属性名称含义说明

提示触发类型

item：数据项图形触发； axis：坐标轴触发； 无：不触发

轴指标配置项

在轴指标中生效

。类型

指标类型

线路：直线型； ：阴影类型； 无：无； 十字：十字型

()组件用于有多个数据系列的场景。 您可以单击图例来控制该系列数据的显示。 示例代码对应的属性及说明如下：

属性名称含义说明

数据

数据数组

每个项目代表一个系列的名称。 如果不指定，会自动从当前系列中获取。

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

属性名称含义说明

左、右、、上

与集装箱各方向的距离

可以是具体的像素值、百分比、居中格式（左、右）

网格是否包含轴刻度标签

可用于防止标签溢出

当应用于条形图时，堆栈会堆叠条形的高度。 示例代码对应的属性及说明如下：

属性名称含义说明

没有任何

设置列堆叠

同一维度轴上具有相同堆叠值的列将被堆叠。

Chart line() 可用于在图表上绘制直线。 示例代码对应的属性及说明如下：

属性名称含义说明

标线样式

标记线颜色、宽度、类型等属性可设置

。类型

十字线类型

实线：实线； ：虚线; ：观点

数据

十字线的数据数组

每个数组项可以是包含两个值的数组，表示线的终点。

堆积柱形图示例代码分析

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]
        }
    ]
};
复制代码

提示框：全局下设置，（触发类型）为轴触发。当鼠标悬停在坐标轴上时，会出现阴影类型提示信息，因为type值为，表示指标类型为阴影类型。

图例：data是一个数组，表示这个图表包含这些数据系列：'直接访问'，'电子邮件营销'，'联属广告'，'视频广告'，'搜索引擎'，'百度'，'谷歌'，'必须应该','其他'

Grid：位置信息表示网格在容器内，左边距偏移量为3%，右边距偏移量为4%，底部偏移量为3%。值为true表示网格包含轴标签

X、Y轴分析与基本直方图一致

数据系列：数组中，每个数组项对应图例()中的每一项。 其中，电子邮件营销、联盟广告、视频广告活动对应的堆栈（堆栈属性）都是广告，百度、、Bing等系列对应的堆栈都是搜索引擎，所以有两个堆栈列在图表中。

图表网格：搜索引擎系列中的配置项设置网格的样式。type表示标记线的格式为虚线。 数据数组中的类型是特殊注释类型的最小值和最大值，因此起点是搜索引擎系列的最小值，终点是最大值。