文章目录

• g2plot简介
• 环境搭建
• 使用文档
• 开源项目
• • vue-antd-admin
  • vue-antd-pro
  • vue-admin-beautiful(pro)
  • vue-element-admin
• 参考资料

g2plot简介

g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。
https://g2plot.antv.vision/zh/docs/manual/introduction
AntV家族包括以下产品，可以在蚂蚁金服官方网站查看（https://antv.vision/zh）

环境搭建

关于Nodejs和vue环境的搭建可以参照前述文章https://blog.csdn/weixin_42628594/article/details/108593858（NodeJs+Vue+Element UI+Antd+Antv全栈开发可视化后台管理系统之一：搭建前端框架），开发IDE推荐VS Code。
装好Nodejs后，在命令行输入

npm i -g @vue/cli

安装完成vue脚手架后，随便找个文件夹执行

vue create antv-g2-admin

执行过程中的选择安装上述文档进行。创建好项目后，打开文件夹

cd antv-g2-admin

安装Antd和g2plot

npm i ant-design-vue --save
npm i @antv/g2plot --save

至此项目环境搭建完毕。

使用文档

g2plot的官方文档只能看个大概，不适合新手阅读，有问题可以在github的Issues提问和搜索(https://github/antvis/g2plot)

开源项目

如觉得上述环境搭建麻烦，推荐几个开源项目：

vue-antd-admin

吹爆 vue-antd-admin，此项目是ant design的vue实现的一个管理后台，可以直接搭建整个前端模板，包含了主题选择、颜色换肤、页面切换等特别炫酷的功能。有完整的使用文档，已经将前端的功能进行了整合，在上面进行二次开发即可。适合使用蚂蚁金服ant design家族产品的用户直接上手。
介绍地址：https://www.jianshu/p/802cf509e85a
文档地址：https://iczer.gitee.io/vue-antd-admin-docs
源码地址：https://github/iczer/vue-antd-admin
预览地址：https://iczer.gitee.io/vue-antd-admin
效果图：

vue-antd-pro

基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板，使用json-server做数据mock。
源码地址：https://github/luichooy/vue-antd-pro
效果图：

vue-admin-beautiful(pro)

一款基于 vue+element-ui 的绝佳的通用型、中后台前端框架。vue-admin-beautiful是github开源admin中最优秀的集成框架之一，它是一款基于vue+element-ui的绝佳的后台框架（基于vue/cli 4 最新版，同时支持电脑，手机，平板），他同时是拥有100+页面的大型vue前端单页应用，长期更新维护。
源码地址：https://github/chuzhixin/vue-admin-beautiful
预览地址：http://beautiful.panm/vue-admin-beautiful-pro/
效果图:

vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
介绍地址：https://juejin.im/post/6844903840626507784
文档地址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
源码地址：https://github/PanJiaChen/vue-element-admin
预览地址：https://panjiachen.github.io/vue-element-admin/
效果图：

参考资料

https://zhuanlan.zhihu/p/97841423 你绝对想不到柱形图背后有这么多故事
https://zhuanlan.zhihu/p/102488345 AntV/G2Plot 开源 - 精雕细琢，打造极致可视化图表体验
https://www.itshutong/articles/499/vue-introduces-g2-plot vue 引入 g2plot
https://wwwblogs/kiyoo/p/13578152.html vue-cli + Ant Design Vue + AntV + Echarts
https://www.xiaoxustudent.top/p/370 Antv 挺好用，随手写笔记，在Vue中用Antv G2