VISALL 3D散点图 (3D Scatter Chart) 使用文档

简介

3D散点图是VISALL数据可视化库中的高级可视化组件，能够在三维空间中展示数据点之间的关系。该组件支持自定义点的大小和颜色，通过三维空间的视角展示更为复杂的数据模式和相关性。

基本用法

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

// 创建3D散点图
const chart = render(container, {
  layers: [
    {
      type: 'scatter3D',
      dataIndex: 0,
      encoding: {
        x: '产品类别', // X轴字段名
        y: '日期',    // Y轴字段名
        z: '销售额'   // Z轴字段名（数值型）
      }
    }
  ],
  data: [
    {
      values: [
        { 产品类别: '电子', 日期: '2023-01-01', 销售额: 320 },
        { 产品类别: '服装', 日期: '2023-01-01', 销售额: 120 },
        { 产品类别: '食品', 日期: '2023-01-01', 销售额: 220 },
        // ...更多数据
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	X轴映射字段，必须提供一个字符串类型字段
encoding.y	string	-	Y轴映射字段，支持日期类型字段
encoding.z	string	-	Z轴映射字段，必须是数值类型
encoding.size	string	-	可选的散点大小映射字段，必须是数值类型
encoding.color	string	-	可选的散点颜色映射字段，必须是数值类型
dataIndex	number	0	指定使用的数据集索引

数据要求

X轴字段要求为字符串类型
Y轴字段要求为日期类型（或可转换为日期的字符串）
Z轴字段要求为数值类型
Size字段（如果提供）要求为数值类型
Color字段（如果提供）要求为数值类型
数据量至少需要大于1条
提供准确的字段名映射

高级用法

1. 添加大小映射

可以通过size字段来表示数据点的第四个维度：

{
  type: 'scatter3D',
  encoding: {
    x: '产品类别',
    y: '日期',
    z: '销售额',
    size: '利润'
  }
}

2. 添加颜色映射

使用color字段来增加第五个维度的展示：

{
  type: 'scatter3D',
  encoding: {
    x: '产品类别',
    y: '日期',
    z: '销售额',
    color: '客户满意度'
  }
}

3. 组合使用大小和颜色

同时使用size和color可以在三维空间中展示五个维度的数据：

{
  type: 'scatter3D',
  encoding: {
    x: '产品类别',
    y: '日期',
    z: '销售额',
    size: '利润',
    color: '客户满意度'
  }
}

潜规则与注意事项

视图控制自适应：
- 3D散点图会根据布局类型自动调整视图距离，纵向布局（SMALL_1_2）下距离为400，其他布局为200。
- 实现代码中的控制：viewControl: { distance: layout === util.const.LAYOUT.SMALL_1_2 ? 400 : 200 }
数据处理规则：
- X轴数据会自动去重
- Y轴数据会自动去重并按升序排序
- Size和Color数据会被转换为数值型以便正确映射
颜色映射机制：
- 当设置color字段时，会根据数据值范围自动将值域分割成若干个片段，每个片段对应一个颜色
- 颜色分片通过generateColorSlices函数实现，根据最大最小值均匀分配
大小映射规则：
- 散点大小根据布局类型自动调整范围，例如小布局下为[8, 28]，大布局下为[16, 92]
- 在不同布局下有不同的大小映射规则：sizeRangeMap[layout]
数值格式化：
- Z轴数值、tooltip中的数值都会通过formatDataNumberValue进行格式化
- 如果数据中包含单位信息，会自动显示在坐标轴和tooltip中

实现原理

3D散点图组件内部使用了ECharts的3D散点图实现，并添加了一系列数据处理和视觉映射的增强功能：

数据预处理：去重、排序和类型转换
视觉通道映射：将数据属性映射到点的大小和颜色
布局自适应：根据容器类型调整视图参数
交互增强：添加了丰富的tooltip展示

示例

基础3D散点图

{
  type: 'scatter3D',
  encoding: {
    x: '产品类别',
    y: '日期',
    z: '销售额'
  }
}

带大小映射的3D散点图

{
  type: 'scatter3D',
  encoding: {
    x: '产品类别',
    y: '日期',
    z: '销售额',
    size: '利润'
  }
}

带颜色映射的3D散点图

{
  type: 'scatter3D',
  encoding: {
    x: '产品类别',
    y: '日期',
    z: '销售额',
    color: '客户满意度'
  }
}

常见问题解决

3D视图控制问题
- 可以通过ECharts提供的交互功能旋转、缩放3D视图
- 默认视图控制参数已针对不同布局进行了优化
数据显示不全
- 检查数据格式是否正确
- 可能需要调整视图角度查看被遮挡的数据点
性能问题
- 大量数据点可能导致性能下降
- 考虑对数据进行抽样或聚合处理
单位显示问题
- 确保在数据元信息中正确设置了单位信息
- 单位信息会自动显示在轴标签和tooltip中

简介​

基本用法​

配置参数​

数据要求​

高级用法​

1. 添加大小映射​

2. 添加颜色映射​

3. 组合使用大小和颜色​

潜规则与注意事项​

实现原理​

示例​

基础3D散点图​

带大小映射的3D散点图​

带颜色映射的3D散点图​

常见问题解决​

简介