创建图表

    实例化 Chart 对象时，绑定 dom 容器的方式有两种：

    1. 传入 dom 容器的 id

    1. const chart = new G2.Chart({
    2.   container: 'c1',
    3.   width: 1000,
    4.   height: 500
    5. });

    2. 传入 dom 容器的 html 节点对象

    1. 图表的宽高

    1. const chart = new G2.Chart({
    2.   width: 1000,
    3.   height: 500
    4. });

    2. 图表的样式

    图表样式包括画布背景、绘图区域背景以及内边框，分别对应如下属性：

    • background：用于设置整个 chart 的图表背景样式，包括边框，背景色，透明度，圆角等；
    • plotBackground：用于设置 chart 绘图区域的背景样式，包括边框，背景色，透明度，圆角等；
    • padding：用于设置边距，用法同 CSS 中的 padding 属性相同, [上，右，下，左]；
      用法如下，具体详见 api:

    下图展示了 G2 的图表布局：

    默认情况下，G2 图表的宽度需要用户手动设置 参数，当需要图表跟随图表容器宽度变化时，则需要开启 forceFit 属性，默认其值为 false，开启方式如下：

    1. const chart = new G2.Chart({
    2.   container: 'c1',
    3.   forceFit: true,
    4.   height : 400
    5. });

    另外还可以手动得调用自适应函数 chart.forceFit() 来响应页面变化。

    ：

    • 仅当浏览器的窗口变化时，图表会重新计算宽度，其他情况下不进行宽度的计算和自适应。

      图表动画

    默认情况下，G2 的图表动画处于开启状态，可以通过如下两种方式关闭图表动画：

    1. // 方式一： 设置 animate 属性
    2. const chart = new G2.Chart({
    3.   container: 'c1',
    4.   width: 800,
    5.   height : 400,
    6.   animate: false // 关闭图表动画
    7. });
    8.  
    9. // 方式二： 手动调用 animate 函数
    10. chart.animate(false); // 关闭动画

    单个几何标记（折线、面积图）的动画可以在 Geom 上设置

    原文: