投稿

基于Vue+AntV/G2可视化组件库Vue-G2

Vedu • • 界面设计, 资源分享 • 阅读 3834

前段时间有分享一个蚂蚁金服推出的数据可视化解决方案AntV。今天再给大家推荐一款Vue和Antv可视化组件库VueG2。

基于 Vue AntV/G2可视化组件库Vue-G2

AntV全新数据可视化解决方案

vue-g2 阿里G2可视化图表的Vue封装。包含折线图、柱状图、直方图、饼图、环图、面积图、雷达图、液体填充图等多种图表类型。

基于 Vue AntV/G2可视化组件库Vue-G2
基于 Vue AntV/G2可视化组件库Vue-G2
基于 Vue AntV/G2可视化组件库Vue-G2

安装依赖

$ npm i @antv/g2@3.5.15 @antv/data-set@0.9.6 vue-g2 -S

引入

// 在main.js中引入
import Vue from \'vue\';
import \'vue-g2\';
import App from \'./App.vue\';
new Vue({
  render: h => h(App)}).$mount(\'#root\')

快速使用


  <g2-pie type="pie"
    :data="data"
    :axis-name="{ name: \'年份\', value: \'GDP(亿美元)\' }"
    :label-option="{ show: true, offset: 25 }"
    :padding="[15, 30]"
    style="height:360px; width:640px;"
  >

文档提供了详细的组件示例。

基于 Vue AntV/G2可视化组件库Vue-G2

折线图

基于 Vue AntV/G2可视化组件库Vue-G2

分组柱状图

基于 Vue AntV/G2可视化组件库Vue-G2

雷达图

基于 Vue AntV/G2可视化组件库Vue-G2

饼图

基于 Vue AntV/G2可视化组件库Vue-G2

词云图

非常不错的一个Vue集成AntV/G2图表组件库，有需要的不要错过哟~

end, 附上文档及项目地址。

# 文档地址
https://blog.peiwen.fun/vue-g2/
# 仓库地址
https://github.com/wupeiwen/vue-g2

okay，就介绍到这里。如果大家有其它好的Vue可视化图表，欢迎一起交流学习！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/11798.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-09-21 13:15
下一篇 2020-09-21 13:19

相关推荐

发表评论

登录后才能评论