vue中使用G2(一)
一、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
后面的所以案例,为了大家能够快速上手,我都采用第一种<script>标签引入的方式来进行讲解。
网友评论