VISALL 分组堆叠柱状图 (Grouped Stacked Bar Chart) 使用文档

简介

分组堆叠柱状图是VISALL数据可视化库中的高级图表类型之一，能够同时展示两组堆叠柱状图，适用于多维度数据的对比分析场景。该组件支持多系列数据的分组展示，允许用户同时观察不同分组的堆叠关系，非常适合复杂的数据对比分析。

基本用法

import { render } from 'path/to/bundle.esm.min.js';

// 创建分组堆叠柱状图
const chart = render(container, {
  layers: [
    {
      type: 'groupedStackedBar',
      dataIndex: 0,
      encoding: {
        x: '季度',      // X轴字段名
        y: '销售额',    // Y轴字段名（数值）
        group: '产品线', // 第一组堆叠的分组字段
        group2: '地区'  // 第二组堆叠的分组字段
      }
    }
  ],
  data: [
    {
      values: [
        { 季度: '第一季度', 销售额: 120, 产品线: 'A系列', 地区: '华东' },
        { 季度: '第一季度', 销售额: 160, 产品线: 'B系列', 地区: '华东' },
        { 季度: '第一季度', 销售额: 180, 产品线: 'A系列', 地区: '华北' },
        { 季度: '第一季度', 销售额: 140, 产品线: 'B系列', 地区: '华北' },
        // ...更多数据
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	X轴映射字段，必须提供一个字符串或日期类型字段
encoding.y	string	-	Y轴映射字段，必须是数值类型
encoding.group	string	-	第一组堆叠的分组字段，通常为字符串类型
encoding.group2	string	-	第二组堆叠的分组字段，通常为字符串类型
dataIndex	number	0	指定使用的数据集索引

数据要求

X轴字段要求为字符串或日期类型
Y轴字段要求为数值类型
group和group2字段通常为字符串类型，用于分类
数据量至少需要大于1条
提供准确的字段名映射

高级用法

1. 多时间序列对比

当需要对比不同时间段的多维度数据时，分组堆叠柱状图能够清晰地展示数据关系：

{
  type: 'groupedStackedBar',
  encoding: {
    x: '月份',
    y: '销售额',
    group: '产品类别',   // 第一组堆叠
    group2: '销售渠道'   // 第二组堆叠
  }
}

2. 跨地区产品线对比

对于需要分析不同地区不同产品线表现的场景：

{
  type: 'groupedStackedBar',
  encoding: {
    x: '年份',
    y: '市场份额',
    group: '产品线',
    group2: '销售地区'
  }
}

潜规则与注意事项

自动排序机制：
- 分组堆叠柱状图默认会对X轴数据进行升序排序，无需手动排序。
- 实现通过transforms: [{ type: 'sort', order: 'ascending' }]实现。
柱宽自适应：
- 柱状图会根据容器宽度和数据量自动计算合适的柱宽。
- 柱宽计算公式：((chartViewRect.width - grid.left - grid.right) / series[0].data.length / 2) * 0.8
- 默认有一个最大柱宽限制，通过util.const.BAR_MAX_WIDTH定义。
DataZoom智能显示：
- 当数据量较大时，系统会自动显示滚动条。
- 默认显示最后若干个数据点，可通过dataZoomLimit配置。
空值处理：
- 对于group或group2中不存在的值，会自动进行空值处理和过滤。
- 代码中通过{ type: 'filter', cb: val => typeof val !== 'undefined' }实现。
单位显示规则：
- 如果数据中包含单位信息，会自动在坐标轴名称中显示单位。
- 单位信息通过dataMetaInfo[字段名].unit获取。
容错处理：
- 当第二组柱子内容为空时，会自动进行容错处理。
- 实现通过group2MaxNum = group2MaxNum ?? []等空值合并运算符。

实现原理

分组堆叠柱状图组件内部使用了复杂的数据处理逻辑，主要包括以下步骤：

数据预处理：对X轴数据进行去重和排序
分组处理：将数据按group和group2字段分别处理
堆叠计算：计算每个分组内的堆叠数据
自适应计算：根据容器大小计算图表元素尺寸
图表配置：生成符合ECharts规范的配置项

类型兼容性问题

使用本组件时，需要注意以下类型兼容性问题：

数据处理函数需要注意类型转换和空值检查
对象属性访问前需要进行空值检查
柱状图配置中的数据类型需要遵循特定规范

示例

基础分组堆叠柱状图

{
  type: 'groupedStackedBar',
  encoding: {
    x: '季度',
    y: '销售额',
    group: '产品线',
    group2: '地区'
  }
}

年度业绩分析

{
  type: 'groupedStackedBar',
  encoding: {
    x: '年份',
    y: '营收',
    group: '业务线',
    group2: '客户类型'
  }
}

常见问题解决

柱状图显示不全
- 检查容器大小是否足够
- 检查数据量是否过大，可能需要启用dataZoom
分组数据不显示
- 确保group和group2字段在数据中存在且有值
- 检查数据结构是否符合要求
单位显示问题
- 确保在数据元信息中正确设置了单位信息
空值处理
- 组件内部会对undefined值进行过滤，但建议提前处理数据中的空值

简介​

基本用法​

配置参数​

数据要求​

高级用法​

1. 多时间序列对比​

2. 跨地区产品线对比​

潜规则与注意事项​

实现原理​

类型兼容性问题​

示例​

基础分组堆叠柱状图​

年度业绩分析​

常见问题解决​

简介