组合图

简介

组合图是一种数据可视化图表类型，是通过将相互依赖的数据集合并在一个图表中进行展示，以便更好地进行数据分析和比较的方法。组合图通常使用多个数据系列和多个视觉元素，如折线系列、柱状系列、面积系列、散点系列、饼系列等，以呈现各种类型的数据。在组合图中，每个数据系列通常有自己的图示和坐标轴，每个坐标轴可以使用不同的刻度范围和标签，以便更清晰地呈现不同的数据。

组合图的优势在于可以同时呈现来自多个数据集的信息，从而更全面地展示整体趋势和方向。通过将不同的数据类型、单位和度量组合在一起，可以为复杂的数据提供更深入和全面的洞察力。组合图广泛用于商业、科学、医疗等各种领域，以有效地分析和比较各种复杂数据。

图表构成

如字面含义，组合图由不同图表系列、坐标轴、提示信息等不同组件组合而成。理论上而言，VChart 支持所有图表系列的排列组合，但在此之前需要通过部分配置确定不同系列的数据、布局等关系，从而让不同系列在合理摆放的同时都能够通过数据映射得到正确的图元属性。

commonChart.type: 'common': 图表类型，组合图的类型为'common'
commonChart.layout: 确定组合图布局
- commonChart.layout.type: 布局类型, grid为行列布局
- commonChart.layout.col: 列数（注意: 所有图表中的独立元素都需要独占一列, 比如数据轴或其他组件和图表系列需要各占一列）
- commonChart.layout.row: 行数（注意: 同上）
- commonChart.layout.col: 指定列宽, 支持以{ index: xx, size: xx }的方式指定, index表示列所在的索引, size指列宽
- commonChart.layout.row: 指定行高, 支持以{ index: xx, size: xx }的方式指定, index表示行所在的索引, size指行高
- commonChart.layout.elements: 布局单元的 ID 以便数据系列与布局单位绑定. 以{modelId: xx, row: xx, col: xx}的方式声明, 其中modelId表示布局单元的 ID 名, row和col分别表示布局单元所在行和列的索引
commonChart.region: 确定数据区域以便后续绑定, 使用相同数据的布局单元需要绑定相同的regionId, 如坐标轴和其对应的图表系列所在的布局单元. 声明方式为id: xx, 其中id表示数据区域 ID
commonChart.series: 声明不同的图表系列, 在系列配置中regionIndex用于绑定图表系列所在的数据区域. id用于绑定轴所在的布局单元, 与layout.elements中的modelId一一对应。（由于数据区域与layout.elements中的modelId存在对应关系, 所以此处不需要声明id）
commonChart.axes: 声明不同的坐标轴组件, regionIndex和id属性同上

使用说明

因为组合图不限制坐标系，所以内部不能确定应该创建什么类型的坐标轴，所以在配置组合图时，必须声明 axes 属性，来声明使用什么类型的坐标轴。

对于直角坐标系，我们需要声明对应方向的坐标轴以及类型，举例如下：

axes: [
  { orient: 'left', type: 'linear' }, // 声明左轴为线性轴
  { orient: 'bottom', type: 'band' } // 声明下轴为离散轴
];

对于极坐标系，我们需要声明对应方向的坐标轴以及类型，举例如下：

axes: [
  { orient: 'angle', type: 'band' }, // 声明圆弧轴为离散轴
  { orient: 'radius', type: 'linear' } // 声明半径轴为线性轴
];

组合图特性

双轴图（柱状图 + 折线图）

关键配置

type: 'common' 声明为组合图类型
axes 的 seriesIndex 属性配置为轴需要关联的 series 序号
axes 的 seriesId 属性配置为轴需要关联的 series 的 id 的数组

线饼组合图（饼图 + 线图）

关键配置

type: 'common' 声明为组合图类型
layout 属性中配置多个 region 的布局

极坐标系下的组合图（雷达图 + 玫瑰图）

关键配置

type: 'common' 声明为组合图
series 中配置对应的系列
axes 声明角度轴和半径轴，注意，坐标轴信息必须声明，否则无法绘制

缓动函数可视化

关键配置

type: 'common' 声明为组合图类型
layout 属性中配置多个 region 的布局
animationAppear 出场动画配置
- animationAppear.easing 出场动画缓动函数配置

多 region 饼图（饼图 + 饼图）

关键配置

type: 'common' 声明为组合图类型
layout 属性中配置多个 region 的布局