VISALL 双饼图 (Double Pie) 使用文档

简介

双饼图组件是VISALL数据可视化库中的一种特殊饼图类型，它包含两个同心环的饼图结构。内环饼图和外环饼图可以展示不同维度的数据分布，适合用于展示层次关系或不同分类维度的数据对比。

基本用法

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

// 创建双饼图
const chart = render(container, {
  layers: [
    {
      type: 'doublePie',
      dataIndex: 0,
      encoding: {
        x: '内环分类', // 内环饼图分类字段
        y: '内环数值', // 内环饼图数值字段
        x2: '外环分类', // 外环饼图分类字段
        y2: '外环数值'  // 外环饼图数值字段
      }
    }
  ],
  data: [
    {
      values: [
        { 内环分类: '类别A', 内环数值: 320, 外环分类: '分组1', 外环数值: 420 },
        { 内环分类: '类别B', 内环数值: 240, 外环分类: '分组2', 外环数值: 350 },
        { 内环分类: '类别C', 内环数值: 180, 外环分类: '分组3', 外环数值: 270 },
        // ...更多数据
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	内环饼图的分类字段，必须提供一个字符串类型字段
encoding.y	string	-	内环饼图的数值字段，必须是数值类型
encoding.x2	string	-	外环饼图的分类字段，必须提供一个字符串类型字段
encoding.y2	string	-	外环饼图的数值字段，必须是数值类型
dataIndex	number	0	指定使用的数据集索引

数据要求

所有分类字段(x和x2)要求为字符串类型
所有数值字段(y和y2)要求为数值类型
建议数据量控制在15条以内，过多数据会导致饼图可读性下降
至少需要2条数据才能体现分布效果

高级用法

1. 用于层次分类数据展示

双饼图非常适合展示具有层次结构的分类数据：

{
  type: 'doublePie',
  encoding: {
    x: '大类',
    y: '大类销售额',
    x2: '子类',
    y2: '子类销售额'
  }
}

2. 不同维度数据的同时展示

双饼图也可用于同时展示不同维度的数据分布：

{
  type: 'doublePie',
  encoding: {
    x: '产品类别',
    y: '销售量',
    x2: '地区',
    y2: '销售额'
  }
}

潜规则与注意事项

自适应标签显示：
- 在小尺寸布局下，内环饼图的标签显示在饼图内部，外环饼图的标签不显示。
- 在大尺寸布局下，内环饼图的标签显示在饼图内部，外环饼图的标签显示在饼图外部。
- 实现代码中的判断：const showLabel = ![util.const.LAYOUT.SMALL, util.const.LAYOUT.SMALL_1_2].includes(layout);
半径适配规则：
- 内环半径范围：小尺寸下为[0, '60%']，大尺寸下为[0, '50%']
- 外环半径范围：小尺寸下为['75%', '95%']，大尺寸下为['65%', '80%']
- A模板按常规显示，B模板时半径比例有所变化
数据处理机制：
- y和y2字段会自动转换为数值类型：+item[y]和+item[y2]
- 如果y和y2字段为数组，会自动取数组的第一个元素
- 处理代码：const y = (Array.isArray(tempY) ? tempY[0] : tempY) as string;
饼图交互机制：
- 内环饼图支持单选模式：selectedMode: 'single'
- 提示框会同时显示内外环的数据
布局自适应：
- 在小型图表布局中（'sm-11'或'sm-12'），外环标签会被隐藏以节省空间
- 在大型图表布局中，标签会完整显示

实现原理

双饼图组件内部使用了两个饼图系列来实现：

内环饼图：半径配置为[0, '50%']，标签位置为内部
外环饼图：半径配置为['65%', '80%']，标签位置为外部

组件会根据容器大小自动调整布局和标签显示方式，确保在不同尺寸下都有良好的可读性。

类型兼容性问题

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

确保编码字段中的x、y、x2、y2都是有效的数据字段名
数值字段必须能够转换为有效的数字，否则会导致渲染错误
为了保证最佳展示效果，建议数据量控制在15条以内

示例

基础双饼图

{
  type: 'doublePie',
  encoding: {
    x: '部门',
    y: '人数',
    x2: '职位',
    y2: '平均薪资'
  }
}

层次结构双饼图

{
  type: 'doublePie',
  encoding: {
    x: '一级分类',
    y: '一级销售额',
    x2: '二级分类',
    y2: '二级销售额'
  }
}

常见问题解决

标签重叠问题
- 减少数据分类数量
- 使用更大的容器尺寸
- 考虑使用其他图表类型替代，如树图或堆叠柱状图
数据展示不全
- 检查数据格式是否正确
- 确保所有必要字段都已提供
- 检查数值是否有效
与单饼图的选择
- 当只需展示单一维度数据时，使用普通饼图更合适
- 当需要展示层次关系或多维度对比时，使用双饼图更合适

简介​

基本用法​

配置参数​

数据要求​

高级用法​

1. 用于层次分类数据展示​

2. 不同维度数据的同时展示​

潜规则与注意事项​

实现原理​

类型兼容性问题​

示例​

基础双饼图​

层次结构双饼图​

常见问题解决​

简介