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/