跳到主要内容

蜂群图

蜂群图是力导向图的变种，所以在实现上仅对 ECharts 原有的关系图中进行了布局扩展。

ECharts 的关系图中有多种布局，每个布局都有自己的 key，通过在配置项中申明layout:${key}来选择布局，通过配置项下的${key}:{...layoutConfig}来配置制定布局的配置项。比如力导向图，需要先指定layout的值为'force'，然后在layout同级的force对象中进行更细粒度的布局配置。

可以参考官方配置项：ECharts 关系图配置项

蜂群图也如此，在layout中新增了'beeswarm'选项，用于申明布局。并在layout同级新增beeswarm对象用于蜂群图的布局控制。从而实现使用上的无差异感。

但是由于力导向图本身并不支持与坐标轴一起使用，所以要实现蜂群图，还需要设置外部的一些配置项。详细的步骤和依赖的参数，在下文说明

自定义配置项​

以下配置项只在 series.type: 'graph' 且series.layout:'beeswarm'时有效

series.beeswarm.axisIndex​

提示

如上所述，蜂群图本身不支持坐标轴，所以 Y 轴（数值轴）需要通过布局中的axisIndex来手动指定

  • 类型number

  • 默认值0

数值轴索引

蜂群图配置步骤​

处理数据​

ECharts 的数据可以是一个value数组,也可以是一个包含value属性的复杂对象

详见 ECharts 关系图配置项 ECharts 关系图 data 配置项

蜂群图最少仅需要提供一个数值，表明在 Y 轴（数值轴）上的位置即可，故最后需要使用者，拍平所有的 series，提供一个一维数组，包含所有小球在 Y 轴上的值

获取轴线极值​

使用beeswarmHelper.getAxisRange获取取整后的极值，使用者也可按照自己的策略自己处理

调用示例

const chart = standardChart.init(domId);
const beeswarmHelper = standardChart.helper.beeswarmHelper;
const [min, max] = beeswarmHelper.getAxisRange(flatData);

获取计算小球大小的比例尺​

使用beeswarmHelper.getSymbolSizeScale获取比例尺函数，使用者也可以自己提供比例尺函数

getSymbolSizeScale的第一个参数为拍平的一维数组，第二个参数为小球尺寸范围

调用示例

// flatData 类似 [1,2,3,4,5...]
const symbolSizeScale = beeswarmHelper.getSymbolSizeScale(flatData, [5, 12]);

根据比例尺函数处理数据​

将每个系列中的数据处理为以下 ECharts 的 data 对象，要求至少包含value和symbolSize属性

类型申明

{
    value:number,
    symbolSize:number,
    [key:string]:any
}[]

symbolSize 可以使用上述的比例尺函数获得，也可以由业务方自己指定

根据轴线极值和计算好尺寸的额数据，计算每个 series 的宽度​

循环每个 series（不包含其他类型）

使用beeswarmHelper.getSeriesWidth获取每个 series 的宽度

第一个参数传入上面已经处理好的，单个系列的，包含value和symbolSize属性的对象数组

第二个参数传入上面计算好的轴线极值

调用示例

// seriesItem类似[{value:12, symbolSize:12},...]
const seriesWidth = beeswarmHelper.getSeriesWidth(seriesItem, [fixMin, fixMax]);

从每个 series 中取最大值，确定为 maxSeriesWidth​

从而保证每个 series 中的小球都放的下

计算画布总宽度，设定边距​

option = {
  grid: {
    height: domHeight,
    width: seriesCount * maxSeriesWidth,
    top: 30,
    left: 40,
  },
  // ...
};

计算每个 series 的大小和位置​

option = {
  series: [
    {
      top: grid.top,
      left: grid.left + maxSeriesWidth * index,
      width: maxSeriesWidth,
      height: grid.height,
    },
    //...
  ],
};

经过上述步骤，即可得到一个蜂群图

主要的工作量还是由于 ECharts 的关系图本身不支持坐标系，所以需要手动计算位置来实现布局。

由于这部分有一定的自主选择性，比如使用者可能不希望蜂群图的每个系列都是等宽的，常见于一些数据差异较大的场景（某一个 series 数据特别多，其他的 series 数据很少，如果等宽，空间利用率很低），所以仅提供基础的思路和辅助函数，并没有全流程的配置在 helper 函数中。

编辑此页
最后由 RypAsuka-Akira 于 更新