ANTV代码运行
方法一(直接HTML,通过Script标签,引入相应的js代码)
1.本次的例子是以下折线图。
2.可以看到impot导入一个JS文件，去网上找到相应的CDN即可，将下面JavaScript代码改成HTML代码。
JavaScript
import { Line } from '@antv/g2plot';
HTML
<!-- 引入在线资源 -->
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
const { Line } = G2Plot;
</script>
3.下面fetch是发生请求获得json数据，最后将数据渲染到一个div标签即可，标签的id=“container”，上面图片代码第6行。
4.完整的HTML代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折线图</title>
<!-- 引入在线资源 -->
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
const { Line } = G2Plot;
</script>
</head>
<body>
<div id="container"></div>
<script>
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();
});
</script>
</body>
</html>
方法二(重构项目)
1.点击下面这个按钮
2. 点击下载按钮。
3.打开项目
3.输入命令 npm install
4.发现Src下面是jsx脚本，通过https://babeljs.io/repl/这个网站进行jsx到js的转化。（如果是ts脚本，那么先将ts转成js即可）
5.将生成的js重新放在src下面，并且命名index.js
6.将package.json进行修改
7.运行npm start server即可。
方法三（通过Webpack进行打包，消除浏览器兼容性问题）
1.本次的例子还是以下折线图，只不过这次直接用ANTV给出JavaScript的代码，然后通过html引入这个JavaScript文件即可。
2.先说说问题，通过HTML导入JavaScript是可以的，但是浏览器对ES6支持不是很好，就是如果你JavaScript中有Import，就会报错，下面我给几张图片，自己看看。
3.解决办法：浏览器不支持ES6语法，但是支持ES5语法，所以我们可以通过Webpack将上面的index.js打包成ES5，然后就没有兼容性问题了，下面我将给出做法，其中一些包的版本最好和我一直，不然很容易出问题，因为Webpack不同版本，会有一些小的改变。
3.1 首先到官方网站https://nodejs.org/en/download/下载node.js的安装包，比如我的是Windows版本。
下载安装完成之后，在命令行输入node --version检查是否安装成功。
3.2 新建一个目录，输入npm init -y,对项目进行初始化，生成一个package.json文件。
3.3 接下来就是安装一些包了，大家按照我的版本来就没事了,直接在命令行输入就行了，下面图片是安装后的结果。
npm install webpack@4.43.0 webpack-cli@3.1.2 -D
3.4 接下来就是安装一些antv的包了，安装import里面导入包即可。
npm install @antv/g2plot
3.5 接下来在根目录下新建一个src目录，将index.js和index.html文件放在下面即可。新建一个build的目录，用来存放打包后的js文件
3.6 接下来在根目录新建一个webpack.config.js文件，里面写配置项。
const { resolve } = require('path')
let path = require('path')
module.exports = {
entry: "./src/index.js",
output: {
// 输出文件名称
filename: "bundle.js",
// 输出的路径
path: path.resolve(__dirname, 'build')
},
mode: 'development'
}
3.7修改package.json文件，如下图所示。
3.8输入npm run dev,生成打包文件，打包文件在build目录下面。
3.9 在index.html引入生成的文件即可，下面是index.html代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../build/bundle.js"></script>
</head>
<body>
<div id="cotainer"></div>
</body>
</html>
3.10 打开index.html文件,卧槽图片报错了，尴尬。我写到这里突然发现好像antv提供不是Js代码，而是ts代码，问题来了怎么将ts代码转js代码。
3.11 输入命令行 npm install -g typescript
3.12 输入命令行tsc index.ts,自动生成index.js代码。
"use strict";
exports.__esModule = true;
var g2plot_1 = require("@antv/g2plot");
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
.then(function (res) { return res.json(); })
.then(function (data) {
var line = new g2plot_1.Line('container', {
data: data,
padding: 'auto',
xField: 'Date',
yField: 'scales',
xAxis: {
type: 'timeCat',
tickCount: 5
}
});
line.render();
});