vue中使用G2

前言这一章节主要讲解的是如何使用G2和G2Plot, 通过阅读你可以学习到:G2最基本的使用在vue中使用G2在vue中使用G2Plot一、G2简介G2其实就是一套基于可视化编码的图形语法，使得前端能够高效的生成各种统计图表...不做过多介绍，直接贴文档：G2文档二、最基本的使用不结合任何的前端框架来使用G21. 浏览器引入创建一个名为demo1.html的文件,想要在html中使用G2的话，需要

不正经开发者

3389人浏览 · 2021-08-27 11:21:02

不正经开发者 · 2021-08-27 11:21:02 发布

前言

这一章节主要讲解的是如何使用G2和G2Plot, 通过阅读你可以学习到:

G2最基本的使用
在vue中使用G2
在vue中使用G2Plot

一、G2简介

G2其实就是一套基于可视化编码的图形语法，使得前端能够高效的生成各种统计图表...

不做过多介绍，直接贴文档：G2文档

二、最基本的使用

不结合任何的前端框架来使用G2

1. 浏览器引入

创建一个名为demo1.html的文件,

想要在html中使用G2的话，需要先引入进来。

这一部分官网也有详细介绍，有两种引入方式：

<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>

<!-- 引入本地脚本 -->
<script src="./g2.js"></script>
<!-- 采用这种引入方式的话一般先要去官方把对应的g2脚本下载下来再放到文件的同级目录下 -->

2. 创建 `div` 图表容器

在页面的 body 部分创建一个 div，并制定必须的属性 id：

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

3. 编写图表绘制代码

<script>
    const data = [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 }
    ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
    // Step 1: 创建 Chart 对象
    const chart = new G2.Chart({
      container: 'c1', // 指定图表容器 ID
      width : 600, // 指定图表宽度
      height : 300 // 指定图表高度
    });
    // Step 2: 载入数据源
    chart.source(data);
    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart.interval().position('genre*sold').color('genre')
    // Step 4: 渲染图表
    chart.render();
</script>

先不管上面的字段你看不看得懂，咱先把效果给实现了，然后后面在去详细了解每个字段、方法的含义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>G2</title>
</head>
<!-- 引入G2在线资源 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
<body>
    <div id="c1"></div>
    <script>
        const data = [
            { genre: 'Sports', sold: 275 },
            { genre: 'Strategy', sold: 115 },
            { genre: 'Action', sold: 120 },
            { genre: 'Shooter', sold: 350 },
            { genre: 'Other', sold: 150 }
        ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
        // Step 1: 创建 Chart 对象
        const chart = new G2.Chart({
            container: 'c1', // 指定图表容器 ID
            width: 600, // 指定图表宽度
            height: 300 // 指定图表高度
        });
        // Step 2: 载入数据源
        chart.source(data);
        // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
        chart.interval().position('genre*sold').color('genre')
        // Step 4: 渲染图表
        chart.render();
    </script>
</body>
</html>

二、结合vue来使用G2

在vue中使用G2的话，分为两种场景：

直接用<script>引入
命令行工具(CLI脚手架,需要使用npm安装)

1. 直接用`<script>`引入

若你的前端项目不是使用脚手架vue-cli开发的话，也就是直接下载并用 <script> 标签引入的话，可以参考上面一节最基本的使用

例如我下面一个简单的vue例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>G2</title>
    <style>
        #app {
            margin: 50px auto;
            text-align: center;
        }
    </style>
</head>
<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
        <h2>{{ msg }}</h2>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            mounted() {
                this.msg = 'vue案例'
            }
        })
    </script>
</body>
</html>

在上面的文件中使用G2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>G2</title>
    <style>
        #app {
            margin: 50px auto;
            text-align: center;
        }
    </style>
</head>
<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入G2在线资源 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
<body>
    <div id="app">
        <h2>{{ msg }}</h2>
        <div id="c1"></div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '',
                chart: null, // 创建一个chart变量
                data: [
                    { genre: 'Sports', sold: 275 },
                    { genre: 'Strategy', sold: 115 },
                    { genre: 'Action', sold: 120 },
                    { genre: 'Shooter', sold: 350 },
                    { genre: 'Other', sold: 150 }
                ]
            },
            mounted() {
                this.msg = 'vue案例'
                // 初始化chart
                const chart = new G2.Chart({
                    container: 'c1',
                    width: 600,
                    height: 300
                })
                chart.source(this.data)
                chart
                    .interval()
                    .position('genre*sold')
                    .color('genre')
                this.chart = chart // 将chart变量赋值为vue中的chart, 后面可以直接使用this.chart调用图表对象
                this.chart.render()
            }
        })
    </script>
</body>
</html>

打开demo2.html文件同样可以看到效果。

2. `npm`安装

若你的前端项目是使用脚手架vue-cli开发的话,那么想要使用G2的话可以采用npm的安装方式，安装到项目中。

(1) 安装

打开项目文件目录，在终端输入：

npm install @antv/g2 --save

安装成功之后在你的node_modules文件夹下应该会多出@antv/g2文件夹。

(2) 引入

需要在main.js文件下引入G2

// main.js
import Vue from 'vue'
import G2 from '@antv/g2'
Vue.use(G2)
...

此时,你就可以在项目的任何vue文件下直接使用所有的G2功能了。

例如，我在项目中创建了一个g2Demo.vue文件

<template>
    ...
</template>
<script>
export default {
    ...
    mounted() {
        const chart = new G2.Chart({
            ...
        })
    }
}
</script>

案例完整代码地址: g2Demo.vue

三、在vue中使用G2Plot

g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。具体可以查看《G2Plot官方文档》

而如果你要在vue中使用npm安装它并且使用是有一定区别的.

(1) 安装G2Plot

第一步安装它都没有什么区别:

npm i --save-dev @antv/g2plot

(2) 全局使用G2Plot

还记得g2里我们在vue项目是如何使用的吗?

我们在main.js中引用并使用它:

// main.js
import Vue from 'vue'
import G2 from '@antv/g2'
Vue.use(G2)
...

之所以可以这样用是因为g2的源码也就是@antv/g2向外暴露了一个对象, 这个对象携带了所有的图表组件.

而在G2Plot中它并没有暴露一个这个对象, 因此如果你也想用相同的方式引用它的话, 控制台会给你抛出一个警告:

 warning  in ./src/main.js

"export 'default' (imported as 'G2Plot') was not found in '@antv/g2plot'

其实这时候我们只需要换一种引入方式, 用CommonJS的引入方式就可以了:

// main.js
const g2plot = require('@antv/g2plot') // 1. 引入g2plot
Vue.prototype.$g2plot = g2plot // 2. 将g2plot挂载到vue中

new Vue({
    render: h => h(App),
}).$mount('#app')

在页面上使用:
例如在一个叫做demo.vue的文件中:

<template>
  <div id="canvas"></div>
</template>
<script>
export default {
  data () {
    return {
      mockData: [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 }
      ]
    }
  },
  mounted() {
    const linePlot = new this.$g2Plot.Line('canvas', {
      data: this.mockData,
      xField: 'year',
      yField: 'value'
    })
    linePlot.render()
  }
}
</script>

(3) 按需使用

上面👆那种方式是将整个g2plot都挂载到了全局的vue对象中, 有时候我们可能不需要所有的组件, 这时候你可以按需引用它, 而不必全部引用:

<template>
  <div id="canvas"></div>
</template>
<script>
+ import { Line } from '@antv/g2plot'
export default {
  data () {
    return {
      mockData: [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 }
      ]
    }
  },
  mounted() {
-    const linePlot = new this.$g2Plot.Line('canvas', {
+    const linePlot = new Line('canvas', {
      data: this.mockData,
      xField: 'year',
      yField: 'value'
    })
    linePlot.render()
  }
}
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^