AntV | 蚂蚁数据可视化 G2Plot 快速入门

最新推荐文章于 2024-05-17 20:07:07 发布

一个平凡de人

最新推荐文章于 2024-05-17 20:07:07 发布

阅读量1w

点赞数 8

分类专栏： web开发文章标签：前端

本文链接：https://blog.csdn.net/weixin_46703850/article/details/121261054

版权

AntV | G2Plot API
AntV | G2Plot 教程

1、开始

<1> 简介

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。

特性:

📦 开箱即用、默认好用的高质量统计图表
🎨 提炼自企业级产品的视觉语言和设计规范
📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
🔳 图层化设计方法：在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性

<2> npm安装

$ npm install @antv/g2plot

在这里插入图片描述

<3> 使用

在这里插入图片描述
index.html

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

index.js

import {
    Bar } from '@antv/g2plot';

const data = [
  {
    year: '1951 年', value: 38 },
  {
    year: '1952 年', value: 52 },
  {
    year: '1956 年', value: 61 },
  {
    year: '1957 年', value: 45 },
  {
    year: '1958 年', value: 48 },
];

const bar = new Bar('container', {
   
  data,
  xField: 'value',
  yField: 'year',
  seriesField: 'year',
  legend: {
   
    position: 'top-left',
  },
});

bar.render();

package.json

{
   
  "name": "b4zgu5--run",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
   
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "@antv/g2plot": "2.3.39"
  },
  "scripts": {
   
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
   
    "react-scripts": "latest"
  },
  "browserslist": {
   
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<4> 开发

# 安装依赖性
$ npm install

# 运行测试用例
$ npm run test

# 建立和运行网站，观察文件变化
$ npm run start

在这里插入图片描述

<5> 浏览器引入

<!-- 引入在线资源 -->
<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、折线图

import {
    Line } from '@antv/g2plot';

<1> 快速上手

import {
    Line } from '@antv/g2plot';

const data = [
  {
    year: '2016 年', value: 1770 },
  {
    year: '2017 年', value: 2540 },
  {
    year: '2018 年', value: 1850 },
  {
    year: '2019 年', value: 4101 },
  {
    year: '2020 年', value: 3333 },
];

const line = new Line('container', {
   
	data,
	xField: 'year',
	yField: 'value',
});

line.render();

在这里插入图片描述

<2>.浏览器引入

在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container" />
		<!-- 下载到本地 引入本地脚本 -->
		<script src="g2plot.min.js"></script>
		<!-- 引入在线资源 -->
		<!-- <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script> -->

		<script src="test5.js"></script>
	</body>
</html>

test1.js

 const {
    Line } = G2Plot;

const data = [
  {
    year: '2016 年', value: 1770 },
  {
    year: '2017 年', value: 2540 },
  {
    year: '2018 年', value: 1850 },
  {
    year: '2019 年', value: 4101 },
  {
    year: '2020 年', value: 3333 },
];

const line = new Line('container', {
   
	data,
	xField: 'year',
	yField: 'value',
});

line.render();

<3> 引入json数据

【1】外部引入json数据:

// index.js
import {
    Line } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
  .then((res) => res.json())
  .then((data) => {
   
    const line = new Line('container', {
   
      data,
      xField: 'Date',
      yField: 'scales',
    });

    line.render();
  });