网站地图    收藏   

主页 > 前端 > vue教程 >

VUE引入使用G2图表的实现

来源:自学PHP网    时间:2021-09-12 21:54 作者:小飞侠 阅读:

[导读] VUE引入使用G2图表的实现...

今天带来VUE引入使用G2图表的实现教程详解

关于G2图表介绍

G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性
使用 G2,可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表

G2图表官网地址
https://antv.gitee.io/zh

G2图标详细开发手册
https://antv-g2.gitee.io/zh/docs/api/general/chart

使用

第一步:安装G2依赖包

npm instal @antv/g2

第二步:在绘图前需要为 G2 准备一个 DOM 容器

第三步:引入

import G2 from "@antv/g2";

第四步:在mounted中定义

可先在全局定义let chart = null;

const chart = new G2.Chart({})

chart = new G2.Chart({       
        container: "webInfo",//指定图表容器       
        forceFit: true,//强制配合 
        width: 600, // 指定图表宽度       
        height: 306,//高度       
        padding: [20, 30, 30, 50],//内边距 
})

第五步:载入数据源

/马上更新图表 / 
chart.changeData(chartData) 

/仅仅是更新数据,而不需要马上更新图表/ 
chart.source(chartData) 

/需要更新图表时调用 / 
chart.repaint()

扩展清除图形语法

/清理所有/
chart.clear(); 

模板中使用完整代码(柱状图)



在补充一下世界地图

(当初项目需求找了G2的地图,感觉API文档有些东西没说明白,这里记录一下)


  • fetch这个地方官网引入的是文件目录,不是具体的json文件,使用的时候找不到文件
  • fetch引入的json这里是本地的,其次G2官网提供的远程githup地址获取不到这个json文件
  • fetch引入json文件的路径,不是你当前文件到该json的路径,而是index.html到该json文件的地址

到此这篇关于VUE引入使用G2图表的实现的文章就介绍到这了,更多相关VUE使用G2图表内容请搜索自学php网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学php网!


以上就是关于VUE引入使用G2图表的实现全部内容,感谢大家支持自学php网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论