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

最新推荐文章于 2023-08-18 13:35:54 发布
最新推荐文章于 2023-08-18 13:35:54 发布
阅读量2.6k 收藏 5
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60257268/article/details/121357359
版权

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

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

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

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

G2Plot 开箱即用的图表库 | AntV

下面这个是水波图的

水波图 | G2Plot

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

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

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

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

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

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

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

卷不起来的小刘
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Antv g2在使用水波图时需要注意事项
a1026656277的博客
04-26 2926
-一定要指定渲染方式为 G2.Global.renderer = ‘canvas’;而不能是svg；不然水波不会荡漾！ 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不...
g2plot-react：用于React的G2Plot
02-05
@ opd / g2plot-react 用于React的 安装 npm install @opd/g2plot-react 用法 import React , { useRef } from 'react' import { LineChart , LineChartProps } from '@opd/g2plot-react' const config : ...
vue实现分页加载效果
10-15
主要为大家详细介绍了vue实现分页加载效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中使用echarts水球图
weixin_43837268的博客
10-14 959
<template> <div class="yh-liquidfill"> </div> </template> <script> function _update(chart, v) { var p = Math.max(0, Math.min(v, 1)); var second = p > 0.1 ? p : p - 0.05; chart.setOption({series:[{ name:'liquidF.
vue中使用echarts-liquidfill实现水球图
风如也的博客
10-21 7633
先看效果图 echarts-liquidfill查看官方文档 安装 npm install echarts --save npm install echarts-liquidfill --save vue main.js 中注册 import echarts from 'echarts' //引入echarts import 'echarts-liquidfill' 组件中使用 <template> <div style="width:400px;height:400px;" r
vue 水位球使用
真真的博客
03-05 980
第一步安装 npm install echartsLiquidfill --save 第二步引入 对应的vue文件：import echartsLiquidfill from 'echarts-liquidfill' <template> <div id='waveEchart' style="width:200px;height:200px;"></div> </template> <script> import echartsLiquidf
Echarts：象形柱图实现水塔水位的动画、水球图和液位柱子图
最新发布
askuld的博客
08-18 793
象形柱图实现水塔水位的动画和水球图
简单的水波图
Zero'Coffee
05-31 2042
/** * @(#)SlowCircle.java * * Sample Applet application * * @author * @version 1.00 04/09/25 */ import java.awt.*; import javax.swing.*; import java.lang.*; public class SlowCircle extends JApplet imp
Vue使用G2Plot-Pie饼图实现数据渲染-和类似0.1+0.2导致的精度问题
JackieDYH的博客
07-12 1380
解决问题 查阅官方文档 图示
水波图
weixin_44798614的博客
03-22 685
在vue中使用antV-G2展示柱状图之组件参数设置详解
黄俊的博客
10-28 5733
在vue中使用antV-G2展示柱状图_情天可视化的博客-CSDN博客G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
快速上手AntV G2Plot
01-08
小白一枚，引入官方示例各种报错，发现Line对象在G2Plot对象里面！ 将const linePlot = new Line()…改为const linePlot = new G2Plot.Line后正常， 标题复制下面代码可直接出效果 // 官方示例 const ...
MACD_plot基本绘图的实现_
10-03
自动化绘图
雨果-g2plot
02-10
它是一个主题组件，提供了一个g2plot ： g2plot以在您的Hugo网站中显示 。 用法 将hugo-g2plot添加为子模块，以便以后能够进行上游更改git submodule add ...
g2plot-theme-builder::lipstick:为G2Plot构建主题配置:chart_increasing:
04-04
关于G2和G2Plot的在线主题生成器。
vue3+ts 之echarts 水球图 liquidFill 的使用
YZRHANYU的博客
03-16 3936
vue3+ts 之echarts 水球图 liquidFill 的使用
Vue使用AntV/G2例子
CoreCmd的博客
06-06 789
Vue项目中使用AntV/G2图表
在vue项目中使用Antv-f2的小案例
大鱼吃小鱼7的博客
11-12 8636
目录 一.两种引入方式 1.浏览器引入 2.通过 npm 安装 二. 两种使用方式 1. 在配置了webpack或使用vue-cli构建的vue项目使用 2. 另一种使用方式是在html中直接使用 三. vue循环渲染图表,动态绑定Id 最近在研究数据可视化，了解到会有移动端的数据可视化需求，所以看到了阿里出的Antv F2. 官网有如下简介：F2，一个专注于移动，开箱即用的可...
antv g2plot可视化图表在vue中的使用之一：环境搭建
砥砺前行的博客
09-18 7603
简介 g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。 https://g2plot.antv.vision/zh/docs/manual/introduction AntV家族包括以下产品，可以在蚂蚁金服官方网站查看https://antv.vision/zh 环境搭建 关于Nodejs和vue环境的搭建可以参照前述文章https
vue3.0项目中搭建g2plot
06-10
好的，您可以按照以下步骤在Vue3.0项目中搭建g2plot： 1. 安装g2plot和@antv/data-set依赖： ``` npm install @antv/g2plot @antv/data-set --save ``` 2. 在需要使用g2plot的组件中引入g2plot和@antv/data-set： ``` import { defineComponent } from 'vue'; import { Chart, Line, Point } from '@antv/g2plot'; import DataSet from '@antv/data-set'; export default defineComponent({ ... }); ``` 3. 在mounted钩子函数中创建图表并渲染： ``` import { defineComponent } from 'vue'; import { Chart, Line, Point } from '@antv/g2plot'; import DataSet from '@antv/data-set'; export default defineComponent({ mounted() { // 创建数据集 const data = [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, { year: '1993', value: 3.5 }, { year: '1994', value: 5 }, { year: '1995', value: 4.9 }, { year: '1996', value: 6 }, { year: '1997', value: 7 }, { year: '1998', value: 9 }, { year: '1999', value: 13 }, ]; const ds = new DataSet(); const dv = ds.createView().source(data); dv.transform({ type: 'fold', fields: ['value'], key: 'type', value: 'value', }); // 创建图表 const chart = new Chart({ container: 'chart-container', // 指定容器 autoFit: true, height: 500, padding: [40, 40, 40, 40], }); chart.data(dv.rows); chart.scale({ year: { range: [0, 1], }, value: { min: 0, nice: true, }, }); chart.tooltip({ shared: true, showMarkers: false, }); chart.axis('value', { label: { formatter: (val) => { return `${val}亿`; }, }, }); chart.line().position('year*value').color('type'); chart.point().position('year*value').color('type').shape('circle'); chart.render(); }, }); ``` 4. 在模板中添加容器： ``` <template> <div id="chart-container"></div> </template> ``` 这样就搭建好了g2plot在Vue3.0项目中的环境，您可以根据需要修改图表的类型、样式等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值