马赛克图

[配置项]

简介

马赛克图（Mosaic）英文学名为 Mosaic Plot，是分组显示数据百分比的一种特殊类型的堆叠柱状图，多用于统计学领域。

2 维的马赛克图是百分比堆积柱图的扩展，除了展示堆积类内部的百分比信息以外，还展示了堆积类目之间的百分比占比情况;

图表构成

马赛克图的配置和柱状图的配置基本一致，由矩形图元、坐标轴及其他组件构成。

以下为必传的一些配置：

• type: 图表类型，类型为'mosaic'

• data: 图表绘制的数据源

• xField: 分类字段，映射图元的 x 坐标 / 宽度

• yField: 数值字段，映射图元的高度 / y 坐标

• 更多组件配置见VChart MosaicChart 配置

快速上手

关键配置

• type 属性设置图表类型为'mosaic'

马赛克图的特性

数据

马赛克图用于展示 2 个维度的数据较多

• 两个离散 字段，如: product、type
• 一个数值字段，如: sales

参考示例如下:

data: [
  {
    name: 'bar',
    values: [
      {
        product: '数码产品',
        type: 'a',
        sales: 20
      },
      {
        product: '数码产品',
        type: 'b',
        sales: 20
      },
      {
        product: '日用品',
        sales: 50
      },
      {
        product: '食品',
        sales: 80
      }
    ]
  }
];

注意：和百分比堆积图类似，马赛克图中的数据一般不推荐有负数

没有分组字段的马赛克图

马赛克图在展示没有分组字段的数据的时候，默认不做百分比堆积，只做分类维度的一个百分比展示，是对基础柱图的一个扩展：

坐标轴

水平方向的马赛克图的坐标轴默认配置如下：

• x 轴默认的比例尺类型为linear，默认不展示标签，建议通过label展示标签值

{
  orient: 'bottom',
  type: 'linear',
  label: {
    visible: false
  }
} as ICartesianAxisSpec;

• y 轴默认配置如下：

return {
  orient: 'left',
  type: 'linear'
} as ICartesianAxisSpec;