AntV | G2Plot

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/