如何引入G2

官网里有两种引入方式

  • 从浏览器直接引入 
    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
  • 通过npm安装 
    npm install @antv/g2 --save

虽然这看起来都很简单，但是当你真正用的时候就会发现，浏览器引入在没有网的情况下会很难受，而通过官方的import引入又不知道咋个搞，至少我不会。

官方是这样写的：

import G2 from '@antv/g2';

我不知道这句话放在哪里，所以我引用了npm文件安装后的文件夹下的这个js文件：

<script src="/G2-pack/node_modules/@antv/g2/dist/g2.min.js"></script>
注意：G2-pack是我自己创建的一个文件夹用来安装node_modules文件夹，可以替换为任何名字

下面是一个完整的例子

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>柱状图</title>
 6     <!-- 引入 G2 文件 -->
 7     <script src="/G2-pack/node_modules/@antv/g2/dist/g2.min.js"></script>
 8     <!-- <script src="{{ url.g2 }}"></script> -->
 9   </head>
10   <body>
11     <!-- 创建图表容器 -->
12     <div id="c1"></div>
13     <script>
14       const data = [
15         { genre: 'Sports', sold: 275 },
16         { genre: 'Strategy', sold: 115 },
17         { genre: 'Action', sold: 120 },
18         { genre: 'Shooter', sold: 350 },
19         { genre: 'Other', sold: 150 }
20       ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
21       // Step 1: 创建 Chart 对象
22       const chart = new G2.Chart({
23         container: 'c1', // 指定图表容器 ID
24         width : 600, // 指定图表宽度
25         height : 300 // 指定图表高度
26       });
27       // Step 2: 载入数据源
28       chart.source(data);
29       // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
30       chart.interval().position('genre*sold').color('genre')
31       // Step 4: 渲染图表
32       chart.render();
33     </script>
34   </body>
35 </html>

官网地址：https://www.yuque.com/antv/g2-docs/get-started

posted @ 2021-04-10 15:36  好丽友派出所  阅读(365)  评论(0)    收藏  举报