前言
这一章节主要讲解的是如何使用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>
先不管上面的字段你看不看得懂，咱先把效果给实现了，然后后面在去详细了解每个字段、方法的含义。
完成上述步骤后，用浏览器打开demo1.html，可以看到以下效果：
demo1.html
完整代码地址 demo1
<!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>
无论是哪种方式, 都是可以实现的:
image.png
