前端图表库G2快速上手

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

安装：

pnpm i @antv/g2

在vue3中使用：

<script setup>
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();
})
</script>
<template><div id="container"></div>
</template>

此时的渲染效果：
在这里插入图片描述

上面的代码在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

代码如下：

<script setup>
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', // 指定图表容器 IDwidth : 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>
<template><div id="c1"></div>
</template>