ANTV代码运行

2021-01-16 16:59:05 作者：互联网

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();
});

3.13 同时我们需要再次执行npm run dev，生成打包文件，按道理来说没有问题，但是的确再次报错了，放弃好吧。

标签：npm,index,文件,代码,ANTV,js,代码运行,json
来源： https://blog.csdn.net/qq_43144059/article/details/112714815