Antv | G2-Plot图表在vue项目中的使用
什么是G2-Plot
G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。（详情可查看g2官网。）
G2图表 、 Echarts图表都是我们在vue项目中视图化很好表现的形式，因此利用好图表对视图和模型数据进行连接，能够很好的进行数据分析和数据表达。
G2的特性：
开箱即用、默认好用的高质量统计图表
提炼自企业级产品的视觉语言和设计规范
响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
图层化设计方法：在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性
G2在常规html中的引用和使用：
1.引入g2**
**
第一种方法：
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js">script>
<script>
const { Line } = G2Plot;
script>
第二种方法：
<script src="./g2plot.min.js">script>
<script>
const { Line } = G2Plot;
script>
2. 设置父容器
<div id="root">div>
3. 引入数据
const data = [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
];
4渲染并创建图表
const line = new Line('container', {
data,
xField: 'year',
yField: 'value',
});
完整代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>g2/plottitle>
<script src='./g2plot.min.js'>script>
head>
<body>
<div id="container" style="height:500px">div>
body>
<script>
// 3.使用g2/plot
//1.引入Line
const {Column} = G2Plot; // <= var Line = G2Plot.Line
//2.创建数据
const data = [
{ 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 }
];
//3.实例化对象
const line = new Column('container', {
data,
xField: 'year',
yField: 'value',
});
//4.渲染
line.render()
script>
html>
在vue项目中引用G2plot
需要用npm安装g2plot的组件，若是Npm安装慢，相关使用yarn安装依赖的文章在前两章中有所设计，请移步至：
[https://blog.csdn.net/qq_52403971/article/details/120354926]
安装好依赖后使用npm命令安装g2：
npm install @antv/g2plot
在vue项目引用即可。
1 在vue的template中给g2图表创建父容器
<template>
<div ref="root">
div>
template>
此处使用的是ref而不是id选择器，因为ref是相对于vue项目中，ref属性定义在一个组件上，那么它返回的是这个组件的实例引用，这样可以获取到组件里面定义的数据，甚至其他的方法，图表中的数据每一项都在相关于项目中的数据。
2 在script中引用g2
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
ref是组件的引用，onMounted是图表中方法的引用。
下面是vue项目中对于饼图的使用：
<template>
<div ref="root" style="height: 95%">div>
template>
<script>
//引入g2plot
import { Column, Pie } from "@antv/g2plot";
import { ref, onMounted } from "vue";
export default {
setup() {
//获取dom元素
const root = ref(null);
let piePlot = null;
let initChart = () => {
piePlot = new Pie(root.value, { //在创建的实例中所用的传的值得参数
appendPadding: 10,
data: [
{ type: "分类一", value: 27 },
{ type: "分类二", value: 25 },
{ type: "分类三", value: 18 },
{ type: "分类四", value: 15 },
{ type: "分类五", value: 10 },
{ type: "其他", value: 5 },
],
angleField: "value",
colorField: "type",
radius: 0.9,
label: {
type: "inner",
offset: "-30%",
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
style: {
fontSize: 14,
textAlign: "center",
},
},
interactions: [{ type: "element-active" }],
});
piePlot.render();//render渲染函数渲染图表
};
onMounted(initChart);//？？相关文章等了解vue3详情后再解读
return {
root,
};
},
};
script>
更新一下,上次有antv-g2图表中的另外的方法没说到。
以上的方法使用与所有常规的antv-g2图表中，还有一种fetch用法。
使用fetch用法与前面所写的方法一样，只需要把前文中的饼图的pie的实例创建改为相应的fetch方法即可。同时需要注意改的是方法中的参数与前文的root,value相对，再在底下的调用方法中 onMounted(initChart)改为onMounted(fetch)即可
这样一来，一个通过vue项目使用antv图表的页面就渲染成功了。