G2Plot水波图在vue项目中的实现

由于工作需要要实现水波图，大概的效果就是如下

里面的水波是动态的，在网上找了很久才找到G2Plot有这样的图例

第一次使用G2Plot,有很多不知道地方，还有vue的知识不够充实，所以写下了这篇本人对G2Plot水波图在vue项目中的实现，其中还是有好多不足的地方，望谅解

首先给G2Plot的官方链接，里面有很多的教程，我这不再过多的解释

G2Plot 开箱即用的图表库 | AntV

下面这个是水波图的

水波图 | G2Plot

我的那个水波图是放在组件里

接下来说一下我遇到问题，

1，g2Plot的创建是render(),销毁是destroy() ，echrats的销毁是dispose()

之前我还以为和echrats的一样，结果我找好久才发现，

2,是关于水波图的挂载问题，官方的是创建好方法之后，把这个方法直接在mounted()里调用，

但是在项目这样是不行的，因为获取的数据需要时间传到这里也需要时间，所以最后的解决方式是在创建表前面加上 this.$nextTick的方法，我的理解是它可以暂缓就，等主体加载完之后才调用。

以前就是我的一些个人见解，其中肯定有些说法不对的地方，还有代码可以的优化。望各位谅解

G2Plot水波图在vue项目中的实现相关推荐

vue项目中如何使用有向无环图（dag-diagram）
vue项目中如何使用有向无环图(dag-diagram) 1.自定义右击事件偶现问题 2.节点删除再添加反复操作几次会出现,删除一个节点多个节点一起消失 3.检测是否成环关于有向无环图在vue项目中 ...
Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
Antv | G2-Plot图表在vue项目中的使用
什么是G2-Plot G2Plot 是一套简单.易用.并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,"G2Plot"中的 G2 即意指图形语法 (the Gr ...
在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答代码我放在了gith ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
vue项目中使用echarts-地图
vue项目中使用echarts-地图 npm install echarts 在使用的页面或main.js中进行引用 import echarts from "echarts"; ...
antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: js部分: //引入G2组件 import G2 from "@a ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...

G2Plot水波图在vue项目中的实现

G2Plot水波图在vue项目中的实现相关推荐

最新文章

热门文章