antv G2 新手示例

公司之前用echarts做图标，后来产品大哥让改用G2，没办法上吧。
两种方式使用G2
1，引入JS，版本不要太低，因为有的char中有的属性低版本没有容易报错（比如：chart.data is not a function）。我就踩了这个坑，后来用的版本是4.0.15

<script src="http://gw.alipayobjects.com/os/lib/antv/g2/4.0.15/dist/g2.min.js"></script>

2.官方示例安装： npm install @antv/g2

代码示例，我用的第一种直接引入JS

    <div id="c1"></div>

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// Step 1: 创建 Chart 对象
const chart = new Chart({
  container: 'c1', // 指定图表容器 ID
  width: 600, // 指定图表宽度
  height: 300, // 指定图表高度
});

// Step 2: 载入数据源
chart.data(data);

// Step 3: 创建图形语法，绘制柱状图
chart.interval().position('genre*sold');

// Step 4: 渲染图表
chart.render();

官方简介：https://g2.antv.vision/zh/docs/manual/about-g2