文章目录
- 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
更多推荐
antv g2plot可视化图表在vue中的使用之一:环境搭建
发布评论