vue中使用G2(一)

前言

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

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

一、G2简介

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

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

二、最基本的使用

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

1. 浏览器引入

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

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

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

2. 创建 `div` 图表容器

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

3. 编写图表绘制代码

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

完成上述步骤后，用浏览器打开demo1.html，可以看到以下效果：

demo1.html

完整代码地址 demo1

G2

二、结合vue来使用G2

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

直接用



    
        {{ msg }}

在上面的文件中使用G2:

打开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文件

案例完整代码地址: 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的文件中:

(3) 按需使用

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

无论是哪种方式, 都是可以实现的:

image.png