AntvG2Plot的一些基础用法

一.折线图

官网代码

import { Line } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
  .then((res) => res.json())
  .then((data) => {
    const line = new Line('container', {
      data,
      padding: 'auto',
      xField: 'Date',
      yField: 'scales',
      xAxis: {
        // type: 'timeCat',
        tickCount: 5,
      },
    });

    line.render();
  });

效果图

1.1创建图表实例

const line = new Line(container, options);

创建好的图表实例，都具有两个公开属性：

container HTMLElement: 图表渲染的 DOM 容器。

options PlotOptions: 图表当前的所有全量配置项 options，是有用户传入，以及图表内置的默认配置项合并之后结果。

1.2配置项