跳到主要内容

VISALL 对比柱中柱状图 (Contrast Double Bar Chart) 使用文档

简介​

对比柱中柱状图是VISALL数据可视化库中的特殊柱状图变体，专为对比分析设计。该图表通过在一个柱中嵌入另一个柱的方式，直观地展示两组数据间的对比关系，特别适合同类指标在不同分类维度下的比较分析。

基本用法​

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

// 创建对比柱中柱状图
const chart = render(container, {
  layers: [
    {
      type: 'contrastDoubleBar',
      dataIndex: 0,
      encoding: {
        x: '年份', // X轴分类字段
        y: '销售额', // Y轴数值字段
        z: '区域'  // 对比维度字段
      }
    }
  ],
  data: [
    {
      values: [
        { 区域: '北区', 年份: '2023年', 销售额: 320 },
        { 区域: '北区', 年份: '2022年', 销售额: 280 },
        { 区域: '南区', 年份: '2023年', 销售额: 220 },
        { 区域: '南区', 年份: '2022年', 销售额: 180 },
        // ...更多数据
      ]
    }
  ]
});

配置参数​

参数类型默认值说明
encoding.xstring-X轴映射字段，必须提供一个字符串类型或日期类型字段
encoding.ystring-Y轴映射字段，必须是数值类型
encoding.zstring-对比维度字段，必须是字符串类型，且仅支持两个唯一值
dataIndexnumber0指定使用的数据集索引

数据要求​

  • X轴字段要求为字符串类型或日期类型
  • Y轴字段要求为数值类型
  • Z轴字段要求为字符串类型
  • Z轴维度值必须恰好有两个（用于对比）
  • 数据量至少需要大于1条
  • 提供准确的字段名映射

高级用法​

对比分析​

最典型的使用场景是年度同比或环比数据的对比：

{
  type: 'contrastDoubleBar',
  encoding: {
    x: '月份',
    y: '销售额',
    z: '年份'  // z轴包含"2022年"和"2023年"两个值
  }
}

不同指标对比​

也可用于对比不同类别的数据：

{
  type: 'contrastDoubleBar',
  encoding: {
    x: '产品类别',
    y: '数量',
    z: '类型'  // z轴包含"计划"和"实际"两个值
  }
}

潜规则与注意事项​

  1. 对比维度限制：

    • 该图表要求Z维度恰好有且仅有两个不同的值，用于形成对比关系。
    • 第一个Z值对应的数据将显示为外部柱形，第二个Z值对应的数据将显示为内部柱形。

  2. 数据排序机制：

    • 图表默认会对X轴数据进行升序排序，无需手动排序。
    • 排序通过utils.dataTransform.transform(data, [{ type: 'sort', field: x, order: 'ascending' }])实现。

  3. 颜色设置：

    • 外部柱形默认使用蓝色系（#4D5999）
    • 内部柱形默认使用青色系（#3DB4CC）
    • 颜色配置通过color: ['#4D5999', '#3DB4CC']设定。

  4. 柱宽比例：

    • 内部柱形的宽度为外部柱形的50%（通过halfWidth * 0.5实现）。
    • 这一比例固定，无法通过配置修改。

  5. 数据完整性要求：

    • 每个X轴类别下都必须同时包含两个Z值对应的数据，否则可能导致显示不完整。

实现原理​

对比柱中柱状图组件内部使用了复杂的绘制逻辑：

  1. 外部柱形：使用常规柱状图方式绘制
  2. 内部柱形：使用ECharts的自定义图形（custom series）功能绘制
  3. 数据处理：先进行排序和去重，然后按Z轴值分组处理

内部柱形的绘制利用了ECharts的renderItem函数，通过如下步骤实现：

  1. 计算柱形的位置和高度
  2. 设置内部柱形的样式和颜色
  3. 创建矩形图形并添加到图表中

示例​

年度销售对比​

{
  type: 'contrastDoubleBar',
  encoding: {
    x: '季度',
    y: '销售额',
    z: '年份'  // 包含"2022年"和"2023年"
  }
}

计划与实际对比​

{
  type: 'contrastDoubleBar',
  encoding: {
    x: '部门',
    y: '预算金额',
    z: '类型'  // 包含"计划"和"实际"
  }
}

常见问题解决​

  1. 内部柱形不显示

    • 检查Z轴维度是否正好有两个不同值
    • 确认Y轴数据类型为数值类型

  2. 图表排序不符合预期

    • 图表默认按X轴字段升序排列，如需自定义排序，请预先对数据进行处理

  3. 柱形颜色自定义

    • 目前内外柱形的颜色固定为默认配色，无法通过配置修改
    • 如有自定义需求，需修改图表组件源码

  4. 数据格式化

    • 图表会自动处理数据格式，无需额外格式化
    • 可通过ECharts的tooltip配置自定义提示框格式
编辑此页
最后由 gongyuzhouchang 于 更新