按需加载

[pearmini]

按需加载

通过打包工具 Tree shaking 实现按需加载。

思路

提供不同的 lib 给 runtime。

开始使用

使用 G2 所有的能力：包含高级统计 mark（Sankey），地理，关系和智能可视化（除了 3d）。

import { Chart } from '@antv/g2';

const chart = new Chart();

// Options
chart.options({
  type: 'interval',
});

// API
chart.interval();

chart.render();

按需使用 G2 某个 Mark：

import { Runtime, Interval, corelib } from '@antv/g2';

const chart = new Runtime({
  lib: corelib // 必须要指定 lib
});

// Options
chart.options({
  type: Interval,
});

// API
chart.mark(Interval);

chart.render();

Chart 和 Runtime(名字可以商量）区别主要是：Chart 可以不指定 lib，默认使用 stdlib，但是 Runtime 必须要指定 lib。所以对于 ChartLite 来说，绘制任何的图都需要显示地 import 对应的 Mark。当然，也可以批量使用某个合集的能力。

按需使用某个系列的 mark：

import { Runtime, geolib } from '@antv/g2';

const chart = new Runtime({
  lib: geolib,
})

chart.geoPath();

chart.render();

按需使用多个系列的 Mark：

import { Runtime, geolib, plotLib } from '@antv/g2';

const chart = new Runtime({
  lib: Object.assign({}, geolib, plotlib)
})

chart.geoPath();

chart.interval();

chart.render();

UMD

上面是在有包管理器的时候使用方式，下面是针对 legacy browser 的 umd 方案。

• g2.min.js: 包含除 3D 之外的能力

<script src="g2.min.js"></script>
<script>
  const chart = G2.Chart(); // 上面的 Chart 对象
</script>

• g2-lite.min.js：不包含任何任何 Mark

<script src="g2-lite.min.js"></script>
<script src="g2-plot.min.js"></script>
<script>
  // 第一种方式
  const chart = G2.Chart();

  chart.options({
    type: G2Core.Interval,
  });

  // 第二种方式
   chart chart = G2.Chart({
     libs: G2Plot.lib
   });
</script>

• g2-plot.min.js：只包含复合统计 Mark
• g2-geo.min.js：只包含地理能力
• g2-graph.min.js：只包含图能力
• g2-auto.min.js：只包含智能能力
• g2-3d.min.js：只包含 3d 能力

目录结构

不同的 lib：

stdlib = corelib + marklib + plotlib + geolib + graphlib + autolib
3dlib

• stdlib：全量的 mark 和能力，不包含 3dlib
• corelib：不包含 mark
• plotlib
• geolib
• graphlib
• autolib
• 3dlib

TODO

• lib 包含渲染引擎，并且可以指定默认的渲染引擎。
• 确定 types 和 chart api 的扩展机制。
• shap 应该和 mark 绑定在一起，这样才可以只注册 mark 就实现效果。
• 打包 UMD。（可以后续做）