前端图表库G2快速上手

news2024/9/20 22:57:05

文档地址：
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', // 指定图表容器 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>
<template>
  <div id="c1"></div>
</template>