跳到主要内容

VISALL 饼图 (Pie Chart) 使用文档

简介​

饼图组件是VISALL数据可视化库中的重要图表类型之一，用于展示数据各部分占整体的比例关系。该组件支持普通饼图、玫瑰图及环形图等多种展现形式，能够有效呈现占比数据。

基本用法​

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

// 创建饼图
const chart = render(container, {
  layers: [
    {
      type: 'pie',
      dataIndex: 0,
      encoding: {
        x: '类别', // 分类字段名
        y: '数值'  // 数值字段名
      }
    }
  ],
  data: [
    {
      values: [
        { 类别: '类别A', 数值: 320 },
        { 类别: '类别B', 数值: 120 },
        { 类别: '类别C', 数值: 220 },
        // ...更多数据
      ]
    }
  ]
});

配置参数​

参数类型默认值说明
encoding.xstring-分类映射字段，必须提供一个字符串类型字段
encoding.ystring-数值映射字段，必须是数值类型
dataIndexnumber0指定使用的数据集索引
roseTypeboolean/stringfalse是否启用玫瑰图模式，可选值为 true, false, 'radius', 'area'
radiusstring/string[]-饼图半径，可以是具体数值或百分比，如 '50%' 或 ['40%', '70%']（环形图）

数据要求​

  • X轴字段要求为字符串类型，表示分类
  • Y轴字段要求为数值类型，表示数量或比例
  • 数据量建议介于2-10条之间，过多会导致可读性下降
  • 数据中不应有重复的分类值

高级用法​

1. 环形图​

通过设置半径范围，可以创建环形图：

{
  type: 'pie',
  encoding: {
    x: '类别',
    y: '数值'
  },
  radius: ['40%', '70%']
}

2. 玫瑰图​

当需要同时比较各类别的绝对数值与比例时，可以使用玫瑰图：

{
  type: 'pie',
  encoding: {
    x: '类别',
    y: '数值'
  },
  roseType: true // 或 'radius'/'area'
}

潜规则与注意事项​

  1. 数据去重机制：

    • 饼图会自动对X轴（分类）字段进行去重处理，确保每个类别只出现一次。
    • 实现代码：util.dataTransform.transform(data.values.slice(), [{ type: 'deDuplication', field: x }])

  2. 数值处理：

    • Y轴字段值会自动转换为数值类型，确保数据计算的准确性。
    • 转换代码：value: +item[y]

  3. 多Y降级：

    • 饼图默认不支持Y字段为数组形式，如果传入Y字段为数组，会自动取第一个值作为有效字段。
    • 降级处理：const y = (Array.isArray(tempY) ? tempY[0] : tempY) as string

  4. 图例生成规则：

    • 图例会根据数据自动生成，每个分类项对应一个图例项。
    • 所有图例项默认均为选中状态。

  5. 提示框格式化：

    • 提示框会显示类别名称、数值及单位信息。
    • 如果数据中包含单位信息，会自动在提示框中显示单位。

实现原理​

饼图组件内部使用了数据去重和转换逻辑，主要包括以下步骤：

  1. 数据预处理：去重和类型转换
  2. 数据编码：将原始数据映射到视觉通道（扇形大小和颜色）
  3. 图例和提示框配置：根据数据动态生成
  4. 配置选项应用：根据用户设置应用特定样式（如玫瑰图、环形图等）

类型兼容性问题​

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

  1. Y轴字段必须能够转换为有效的数值，否则可能导致图表显示异常
  2. 玫瑰图模式(roseType)的值应为布尔值或特定字符串('radius'/'area')
  3. 半径设置(radius)的值可以是具体数值或百分比字符串

示例​

基础饼图​

{
  type: 'pie',
  encoding: {
    x: '产品类别',
    y: '销售额'
  }
}

环形图​

{
  type: 'pie',
  encoding: {
    x: '产品类别',
    y: '销售额'
  },
  radius: ['40%', '70%']
}

玫瑰图​

{
  type: 'pie',
  encoding: {
    x: '产品类别',
    y: '销售额'
  },
  roseType: 'radius'
}

常见问题解决​

  1. 图例显示不全

    • 检查数据量是否过大，建议限制在10条以内
    • 考虑使用其他图表类型（如条形图）展示大量分类数据

  2. 数值显示异常

    • 确保Y轴字段能正确转换为数值类型
    • 检查数据中是否有异常值或负值

  3. 饼图扇区太小难以辨识

    • 过滤或合并小比例数据
    • 考虑使用环形图增加标签可读性
    • 将小比例数据合并为"其他"类别

  4. 数据单位显示问题

    • 确保在数据元信息中正确设置了单位信息
编辑此页
最后由 gongyuzhouchang 于 更新