VISALL 3D柱状图(bar3D)组件使用文档

组件概述

3D柱状图是VISALL可视化库中的一个标准图层组件，用于展示三维数据关系。它将数据映射到一个三维空间中，通过柱体的高度表示数值大小，非常适合展示多维度数据之间的关系。

基本信息

组件ID: bar3D
英文名称: 3D Bar
中文名称: 3D 柱状图

数据要求

x轴: 需要多于1个数据点
y轴: 需要多于1个数据点
数据集: 需要多于1条数据记录

编码规则

该组件使用以下字段进行数据编码:

编码字段	必需	数据类型	说明
x	是	字符串	x轴分类数据
y	是	字符串/日期	y轴分类数据，优先使用日期类型
z	是	数值	柱体高度值，必须为数值类型

基本用法

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

// 创建柱状图
const chart = render(container, {
  layers: [
    {
      type: 'bar',
      dataIndex: 0,
      encoding: {
        x: 'date', // X轴字段名
        y: 'value' // Y轴字段名
        z: 'category'
      }
    }
  ],
  data: [
    {
      values: [
        { category: '类别1', date: '2023-01', value: 150 },
        { category: '类别1', date: '2023-02', value: 230 },
        { category: '类别2', date: '2023-01', value: 120 },
        { category: '类别2', date: '2023-02', value: 210 }
        // 更多数据...
      ]
    }
  ]
});

潜规则与注意事项

数据排序规则：
- y轴数据会自动按升序排列，这是内部实现的默认行为
- 如需自定义排序，需要在传入数据前预先处理
单位显示：
- 如果数据元信息中包含单位信息，会自动在坐标轴名称和提示框中显示
- 单位格式：字段名(单位)，例如：销售额(万元)
视图控制：
- 当布局为SMALL_1_2时，视图距离会自动调整为400，其他布局默认为200
- 这会影响3D图的默认视角和展示效果
图例功能限制：
- 不支持图例的点击功能（源代码中有注释标明）
数据转换：
- 组件内部会对数据进行排序和去重处理
- z轴数据会被强制转换为数值类型(+item[z])
ECharts依赖：
- 该组件依赖ECharts的3D扩展功能，使用时需确保相关依赖已加载
提示框格式化：
- 提示框会自动格式化为包含x、y、z三个维度的信息
- 数值会根据数据元信息中的单位进行格式化
独立图层：
- 该组件被标记为独立图层(isIndependentLayer: true)，这意味着它不能与其他图层混合使用

标签展示

柱体上方标签会自动显示z轴数值，并根据数据元信息中的单位进行格式化。

组件概述​

基本信息​

数据要求​

编码规则​

基本用法​

潜规则与注意事项​

标签展示​

相关API​

组件概述

基本信息

数据要求

编码规则

基本用法

潜规则与注意事项

标签展示

相关API