前端图表库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>

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

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

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