跳到主要内容

VISALL 影子柱状图 (Shadow Bar Chart) 使用文档

简介​

影子柱状图是VISALL数据可视化库中的特殊柱状图变体，通过使用透明和实体柱体的组合展示数据对比关系。该组件通常用于展示目标值与实际值的对比，或者突出显示特定系列的数据值，提供直观的数据对比效果。

基本用法​

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

// 创建影子柱状图
const chart = render(container, {
  layers: [
    {
      type: 'shadowBar',
      dataIndex: 0,
      encoding: {
        x: '月份', // X轴字段名
        y: '销售额', // Y轴字段名
        z: '类型'  // 分类字段名，用于区分实体柱和影子柱
      }
    }
  ],
  data: [
    {
      values: [
        { 月份: '1月', 销售额: 320, 类型: '实际值' },
        { 月份: '1月', 销售额: 400, 类型: '目标值' },
        { 月份: '2月', 销售额: 120, 类型: '实际值' },
        { 月份: '2月', 销售额: 200, 类型: '目标值' },
        // ...更多数据
      ]
    }
  ]
});

配置参数​

参数类型默认值说明
encoding.xstring-X轴映射字段，必须提供一个字符串或日期类型字段
encoding.ystring-Y轴映射字段，必须是数值类型
encoding.zstring-必须提供的分类字段，用于区分实体柱和影子柱
dataIndexnumber0指定使用的数据集索引

数据要求​

  • X轴字段要求为字符串或日期类型
  • Y轴字段要求为数值类型
  • Z轴字段要求为字符串类型，用于区分实体柱和影子柱
  • 数据量至少需要大于1条
  • 同一个X轴值应该有两条对应的数据记录，分别代表实体柱和影子柱
  • 提供准确的字段名映射

潜规则与注意事项​

  1. 数据排序机制：

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

  2. 柱体间隔设置：

    • 影子柱状图使用barGap: '-50%'设置，使影子柱与实体柱部分重叠。
    • 这种重叠效果是通过ECharts的barGap负值设置实现的。

  3. 数据顺序要求：

    • 建议在数据中先提供实体柱数据，再提供影子柱数据，以保证正确的渲染顺序。
    • 系统会根据Z轴字段的值自动划分系列。

  4. 鼠标交互效果：

    • 默认配置了轴指针交互效果，hover时会显示阴影。
    • 阴影样式为shadowStyle: { color: 'rgba(172,198,251)', opacity: 0.3 }。

  5. 必选字段Z的作用：

    • Z字段用于区分实体柱和影子柱，必须提供。
    • Z字段通常应该只有两个不同的值，分别对应实体系列和影子系列。

实现原理​

影子柱状图组件内部使用了以下数据处理和渲染逻辑：

  1. 数据预处理：对X轴数据进行升序排序
  2. 数据分组：根据Z字段值将数据分为两个系列
  3. 样式设置：为两个系列设置不同的透明度和颜色
  4. 柱体重叠：通过设置负的barGap值实现柱体部分重叠效果

示例​

销售目标对比​

{
  type: 'shadowBar',
  encoding: {
    x: '月份',
    y: '金额',
    z: '类型'
  }
}

数据示例：

[
  { 月份: '1月', 金额: 320, 类型: '实际销售' },
  { 月份: '1月', 金额: 400, 类型: '销售目标' },
  { 月份: '2月', 金额: 120, 类型: '实际销售' },
  { 月份: '2月', 金额: 200, 类型: '销售目标' },
  ...
]

历史对比分析​

{
  type: 'shadowBar',
  encoding: {
    x: '产品',
    y: '利润率',
    z: '年份'
  }
}

数据示例：

[
  { 产品: '产品A', 利润率: 0.25, 年份: '2023年' },
  { 产品: '产品A', 利润率: 0.18, 年份: '2022年' },
  { 产品: '产品B', 利润率: 0.32, 年份: '2023年' },
  { 产品: '产品B', 利润率: 0.29, 年份: '2022年' },
  ...
]

常见问题解决​

  1. 影子柱显示不正确

    • 检查Z字段是否正确设置
    • 确保数据中包含了成对的记录

  2. 颜色区分不明显

    • 目前颜色不支持自定义

  3. 数据顺序问题

    • 尽管系统会自动排序，但建议提供有序数据
    • 确保X轴字段值的一致性
编辑此页
最后由 gongyuzhouchang 于 更新