前端图表库G2快速上手

文档地址：https://g2-v3.antv.vision/zh/docs/manual/getting-started/https://g2.antv.antgroup.com/

安装：

pnpm i @antv/g2

在vue3中使用：

import {Chart} from '@antv/g2';

import {onMounted} from "vue";

// 准备数据

const data = [

{genre: 'Sports', sold: 275},

{genre: 'Strategy', sold: 115},

{genre: 'Action', sold: 120},

{genre: 'Shooter', sold: 350},

{genre: 'Other', sold: 150},

];

onMounted(() => {

// 初始化图表实例

const chart = new Chart({

container: 'container',

});

// 声明可视化

chart

.interval() // 创建一个 Interval 标记

.data(data) // 绑定数据

.encode('x', 'genre') // 编码 x 通道

.encode('y', 'sold'); // 编码 y 通道

// 渲染可视化

chart.render();

})

<div id="container"></div>

此时的渲染效果：

上面的代码在Chrome83上会报如下错误：

考虑将antv的版本切换到3.x文档地址：https://g2-v3.antv.vision/zh/docs/manual/getting-started

在npm上找到3.x较新的版本地址如下：https://www.npmjs.com/package/@antv/g2/v/3.5.19

在这里插入图片描述

安装方式：

pnpm i @antv/g2@3.5.19

通过控制台可以看出，这个命令会自动把原来的5.x版本移除掉，然后再安装3.x版本：

通过package.json也可以确认，安装3.x版本成功了：

按照官方教程，但是遇到了如下错误：

决定换个版本：https://g2-v4.antv.vision/zh

pnpm i @antv/g2@4.2.10

代码如下：

import {Chart} from '@antv/g2';

import {onMounted} from "vue";

onMounted(() => {

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 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();

})

<div id="c1"></div>

在这里插入图片描述

后续主要使用的antv文档：https://g2-v4.antv.vision/zh/docs/manual/getting-started

主要需要兼容的浏览器版本：83

谷歌浏览器个版本的下载地址：https://vikyd.github.io/download-chromium-history-version/#/