vue3+g2plot实现词云图

词云图

效果预览:
在这里插入图片描述

核心代码:

import { WordCloud } from '@antv/g2plot';fetch('https://gw.alipayobjects.com/os/antfincdn/jPKbal7r9r/mock.json').then((res) => res.json()).then((data) => {const wordCloud = new WordCloud('container', {data,wordField: 'x',weightField: 'value',color: '#122c6a',wordStyle: {fontFamily: 'Verdana',fontSize: [24, 80],},// 设置交互类型interactions: [{ type: 'element-active' }],state: {active: {// 这里可以设置 active 时的样式style: {lineWidth: 3,},},},});wordCloud.render();});

词云图-图片遮罩

效果预览:
在这里插入图片描述

核心代码:

import { WordCloud } from '@antv/g2plot';fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json').then((res) => res.json()).then((data) => {const wordCloud = new WordCloud('container', {data,wordField: 'name',weightField: 'value',colorField: 'name',imageMask: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*07tdTIOmvlYAAAAAAAAAAABkARQnAQ',wordStyle: {fontFamily: 'Verdana',fontSize: [8, 32],},});wordCloud.render();});

词云图-图片遮罩-base64

效果预览:
在这里插入图片描述

核心代码:

import { WordCloud } from '@antv/g2plot';fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json').then((res) => res.json()).then((data) => {const wordCloud = new WordCloud('container', {data,wordField: 'name',weightField: 'value',colorField: 'name',imageMask:'data:image/png;base64,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',wordStyle: {fontFamily: 'Verdana',fontSize: [8, 32],},});wordCloud.render();});

词云图-colorField

效果预览:
在这里插入图片描述

核心代码:

import { WordCloud } from '@antv/g2plot';fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json').then((res) => res.json()).then((data) => {const wordCloud = new WordCloud('container', {data,wordField: 'name',weightField: 'value',colorField: 'value',imageMask: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*07tdTIOmvlYAAAAAAAAAAABkARQnAQ',wordStyle: {fontFamily: 'Verdana',fontSize: [8, 32],},});wordCloud.render();});

词云图-每次渲染保持位置不变

效果预览:
在这里插入图片描述

核心代码:

import { WordCloud } from '@antv/g2plot';fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json').then((res) => res.json()).then(

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/48814.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电场、磁场、麦克斯韦方程组

电场和磁场 电场和磁场并不是一个虚拟的概念,而是一种确实存在的物质。法拉第提出了电场和磁场,法拉第认为之所以两个电荷之间有力的作用,是因为有一个电荷会在周围空间产生一种物质,这种物质叫做电场。法拉第提出:电场是由电荷产生的。之后人…

【笔记:3D航路规划算法】二、RRT*

目录 一、RRT*于RRT的不同之处1、路径优化:2、成本计算:3、重连线步骤: 二、图解1、初始化2、路径搜索3、效果展示 3D路径规划是在三维空间中寻找从起点到终点的最短或最优路径的一种技术。它广泛应用于无人机导航、机器人运动规划、虚拟现实…

Linux基础命令之用户管理常用命令

在Linux操作系统中,有许多用于用户管理的命令。以下是一些常用的命令 # 1、whoami 显示当前登录的用户名。 $ whoami将返回当前用户的名称。这个命令在所有Linux发行版中都可以使用。 例如,如果你是 root 用户,那么输出可能是这样的&…

Docker部署Elasticsearch8.6.0 Kibana8.6.0

(1)Docker部署Elasticsearch8.5.3(失败…) 为了匹配springboot3.0.x,安装Elasticsearch:8.5.3 拉取镜像,遇到问题! [rootserver01 ~]# docker pull elasticsearch:8.5.3 8.5.3: Pulling from…

Modbus转EtherCAT网关将Modbus协议的数据格式转换为EtherCAT协议

随着工业自动化技术的快速发展,不同通信协议之间的互操作性变得越来越重要。Modbus作为一种广泛使用的串行通信协议,与以太网为基础的EtherCAT协议之间的转换需求日益增长。本文将从网关功能、硬件设计、性能以及应用案例来介绍这款Modbus转EtherCAT网关…

数据库-浅谈储存过程

数据库-浅谈储存过程 缘起储存过程示例小结 缘起 数据库,已经是这个时代大部分软件系统架构里的标配。一个可靠的数据管理系统的 ACID特性也保证了我们使用到的数据的准确性。 作为软件架构中的基础部分,数据库的操作不应该暴露给用户应用层。所以相关数…

第31篇 计算数据中最长的连续1的个数<一>

Q:如何用Nios II指令计算一个数据中最长的连续1的个数? A:基本原理:所有Nios II指令都是32位长,除了由处理器直接执行的机器指令外,Nios II指令集还包括许多可用于汇编语言的伪指令程序。本实验我们会用…

权限(linux)

权限就是文件权限(linux万物皆文件) 本文主要涉及文件/文件夹权限 涉及指令: shell: kernal : linux内核 shell : 外壳 shell可以方便交互与操作 bash是一个具体的shell su su 切换用户 su -root 变…

【SpringCloud】企业认证、分布式事务,分布式锁方案落地-1

目录 HR企业入驻 HR企业入驻 - 认证流程解析 HR企业入驻 - 查询企业是否存在 HR企业入驻 - 上传企业logo与营业执照 HR企业入驻 - 新企业(数据字典与行业tree结构解析) 行业tree 行业tree - 创建节点 行业tree - 查询一级分类 行业tree - 查询子分…

CSS前端面试题之哪些CSS属性可以继承?

推荐答案 在 CSS 中,并不是所有的属性都可以继承。下面是一些常见的可继承属性 font-family font-size font-weight font-style color letter-spacing word-spacing line-height text-align text-indent text-transform visibility 这些属件在父元素中设置后&#…

网络安全之不同阶段攻防手段(四)

前面已经说过信息收集、扫描探测以及初始访问阶段的攻防手段,下面将说一下在攻击者获取到访问权限的情况下会接着如何进一步在网络中建立控制点、提权、横移以及完成攻击后的遗迹隐藏。 4. 建立立足点阶段 **攻击手段:**攻击者通过恶意软件、远程访问工…

普中51单片机:DS1302时钟芯片讲解与应用(十)

文章目录 引言基本特性什么是RAM?什么是涓流充电? 电路图和引脚说明通信协议以及工作流程寄存器控制寄存器日历/时钟寄存器 DS1302读写时序代码演示——数码管显示时分秒 引言 DS1302 是一款广泛使用的实时时钟 (RTC) 芯片,具有低功耗、内置…

多层感知机(神经网络)

目录 一、感知机(逻辑回归、二分类)定义:二、感知机不能解决XOR问题:三、多层感知机定义:四、训练过程:1.参数维度:2.常用激活函数:2.1Sigmoid激活函数:2.2Tanh激活函数&…

深入分析 Android ContentProvider (三)

文章目录 深入分析 Android ContentProvider (三)ContentProvider 的高级使用和性能优化1. 高级使用场景1.1. 数据分页加载示例:分页加载 1.2. 使用 Loader 实现异步加载示例:使用 CursorLoader 加载数据 1.3. ContentProvider 与权限管理示例&#xff1…

【工具】轻松转换JSON与Markdown表格——自制Obsidian插件

文章目录 一、插件简介二、功能详解三、使用教程四、插件代码五、总结 一、插件简介 JsonMdTableConverter是一款用于Obsidian的插件,它可以帮助用户在JSON格式和Markdown表格之间进行快速转换。这款插件具有以下特点: 轻松识别并转换JSON与Markdown表格…

Spring MVC的高级功能——文件上传和下载(三)文件上传和下载

一、案例的功能需求 接下来将文件上传和下载的相关知识结合起来,实现一个文件上传和下载的案例。在实现案例之前,首先分析案例的功能需求。本案例要实现的功能为,将文件上传到项目的文件夹下,文件上传成功后将上传的文件名称记录到…

量化交易对多样化投资组合的贡献

量化交易对多样化投资组合的贡献在现代金融市场中尤为显著。通过先进的数学模型和算法,量化交易能够优化投资组合配置,降低风险,提高回报,为投资者提供更稳健的投资策略。在全球经济环境日益复杂的背景下,量化交易成为…

60个常见的 Linux 指令

1.ssh 登录到计算机主机 ssh -p port usernamehostnameusername: 远程计算机上的用户账户名。 hostname: 远程计算机的 IP 地址或主机名。 -p 选项指定端口号。 2.ls 列出目录内容 ls ls -l # 显示详细列表 ls -a # 显示包括隐藏文件在内的所有内…

【GD32】从零开始学GD32单片机 | 基于SD卡的FatFs文件系统移植(GD32F470ZGT6)

1. 简介 FatFs是一个专门为微处理器设计的通用文件系统,像8051、AVR、PIC、ARM架构的微处理器都能兼容该文件系统。 FatFs文件系统最大的一个优点是它是DOS和Windows兼容的,这意味着你只需要再移植一个USB驱动就可以实现在电脑中访问单片机的储存结构&…

Cookie与Session 实现登录操作

Cookie Cookie 是网络编程中使用最广泛的一项技术,主要用于辨识用户身份。 客户端(浏览器)与网站服务端通讯的过程如下图所示: 从图中看,服务端既要返回 Cookie 给客户端,也要读取客户端提交的 Cookie。所…