AntV | G2Plot

本文档详细介绍了如何在 Vue 项目中搭建 AntV G2Plot 的环境并创建一个简单的折线图。首先,通过 Node.js 安装 vue-cli 创建项目,并启动服务。接着,引入 Ant Design Vue 和 G2Plot 库,创建 LineChart.vue 文件绘制折线图。最后,在 App.vue 文件中注册并使用 LineChart 组件,启动项目后在浏览器中预览图表。
摘要由CSDN通过智能技术生成

g2plot简介

g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics),同时也致敬了 ggplot2。

官方文档:简介 | G2Plot

参考链接:antv g2plot可视化图表在vue中的使用之一:环境搭建_砥砺前行的博客-CSDN博客_g2plot vue

一、环境搭建

前提:已经安装好了nodejs

下载地址:Download | Node.js

1.新建目录

用于存放ant项目,项目路径:D:\Users\01397470\AntV

2.安装脚手架工具

D:\Users\01397470\AntV> npm i -g @vue/cli

3.创建项目

D:\Users\01397470\AntV> vue create antv-g2-admin

4.启动项目

$ npm run serve

5.测试

在浏览器中输入: http://localhost:8080/   即可访问vue主页

二、AntV图表的使用

参考链接:antv g2plot可视化图表在vue中的使用之二:绘制折线图条形图柱状图_砥砺前行的博客-CSDN博客

1.安装Antd和g2plot

$ npm i ant-design-vue --save

$ npm i @antv/g2plot --save

2.导入antd

在 src/main.js 中:

// 导入antd
import Antd from 'ant-design-vue'
// 导入ant样式
import 'ant-design-vue/dist/antd.css'
// 使用antd
Vue.use(Antd)

3.新建vue文件

在src/components目录下,新建LineChart.vue文件,代码直接复制官网上的即可

<template>
    <div id="linechart"></div>
</template>


<script>

import { Line } from '@antv/g2plot'

export default {
    
    mounted () {
    const data = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 },
    ];

    const linePlot = new Line('linechart', {
      title: {
        visible: true,
        text: '折线图',
      },
      description: {
        visible: true,
        text: '用平滑的曲线代替折线。',
      },
      data,
      xField: 'year',
      yField: 'value',
    });

    linePlot.render();
  }
}

</script>

4.使用图表组件

三部曲:导入组件 ---> 注册组件 ---> 使用组件

在src/App.vue文件中:

<template>
  <div id="app">
    <!-- 3.使用组件 -->
    <LineChart/>

  </div>
</template>

<script>
// 1.导入组件
import LineChart from './components/LineChart.vue'

export default {
  name: 'App',
  components: {
    // 2.注册组件
    LineChart
  }
}
</script>

5.启动项目

$ npm run serve

6.测试

在浏览器中输入: http://localhost:8080/  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值