欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue中使用G2

程序员文章站 2022-04-21 21:11:50
...

前言

这一章节主要讲解的是如何使用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>

上一篇： 全球Top10传感器厂商盘点

下一篇： 高通收购CSR，点燃车联网芯片大战

推荐阅读