当前位置: 首页 > news >正文

echarts词云图echarts-wordcloud使用方法

1、echarts5.0以下的版本使用 echarts-wordcloud 1.0 的词云

1. 安装 wordCloud 1.0 依赖包npm install echarts-wordcloud@12. man.js 注入import 'echarts-wordcloud'

2、echarts5.0及以上的下载 echarts-wordcloud 2.0 版本

注意:npm install echarts-wordcloud 默认安装的是 2.0 版本

具体使用:

项目中引用:

import * as echarts from 'echarts';
import 'echarts-wordcloud';

echarts-wordcloud 基本配置

<div ref="word-cloud" class="flex can-class" ></div>
// 这里和echarts的使用一样,先拿到容器元素const myChart = echarts.init(this.$refs['word-cloud']);window.addEventListener('resize', function() {myChart.resize();});appProto().then(res => {if (res.data.code === 200) {// 因为UI设计规定了颜色,因此我就采用这几个颜色座位随机的颜色调整const color = ['#1890FF', '#13C2C2', '#2FC25B', '#009DFF', '#8496FA'];var option = {backgroundColor: '#fff',series: [{type: 'wordCloud',sizeRange: [15, 70], // 用来调整字的大小范围rotationRange: [0, 0],// 每个词旋转的角度范围和旋转的步进rotationStep: 45,gridSize: 10, // 用来调整词之间的距离shape: 'pentagon',// shape这个属性虽然可配置,但是在词的数量不太多的时候,效果不明显,它会趋向于画一个椭圆//位置的配置width: '100%',height: '100%',drawOutOfBound: false,// 允许词太大的时候,超出画布的范围layoutAnimation: true,// 布局的时候是否有动画textStyle: {normal: {// 颜色可以用一个函数来返回字符串,这里是随机色color: function(v) {const index = Math.floor(Math.random() * color.length);return color[index];},fontFamily: 'sans-serif',fontWeight: '550'}},//划过添加的阴影,因为我不需要,因此注释了<!-- emphasis: {focus: 'self',textStyle: {textShadowBlur: 10,textShadowColor: '#333'}}, -->//data格式是一个数组data: res.data.data}]};myChart.setOption(option);}});

相关文章:

echarts词云图echarts-wordcloud使用方法

1、echarts5.0以下的版本使用 echarts-wordcloud 1.0 的词云 1. 安装 wordCloud 1.0 依赖包npm install echarts-wordcloud12. man.js 注入import echarts-wordcloud 2、echarts5.0及以上的下载 echarts-wordcloud 2.0 版本 注意&#xff1a;npm install echarts-wordcloud …...

二叉树的OJ练习(二)

通过前序遍历数组构建二叉树 题目&#xff1a;通过前序遍历的数组&#xff08;ABD##E#H##CF##G##&#xff09;构建二叉树 TreeNode* TreeCreat(char* a,int* pi) {if(a[*pi] #){(*pi);return NULL; }TreeNode* root (TreeNode*)malloc(sizeof(TreeNode));if(root NULL){p…...

uni-app 微信小程序之自定义navigationBar顶部导航栏

文章目录 1. 实现效果2. App.vue3. pages.json 配置自定义4. 顶部导航栏 使用 微信小程序自定义 navigationBar 顶部导航栏&#xff0c;兼容适配所有机型 1. 实现效果 2. App.vue 在App.vue 中&#xff0c;设置获取的 StatusBar&#xff0c;CustomBar 高度&#xff08;实现适配…...

前端入门:HTML初级指南,网页的简单实现!

代码部分&#xff1a; <!DOCTYPE html> <!-- 上方为DOCTYPE声明&#xff0c;指定文档类型为HTML --> <html lang"en"> <!-- html标签为整个页面的根元素 --> <head> <!-- title标签用于定义文档标题 --> <title>初始HT…...

低多边形3D建模石头材质纹理贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…...

【华为OD题库-081】最长的元音子串长度-Java

题目 题目描述: 定义当一个字符串只有元音字母一(a,e,i,o,u,A,E,l,O,U)组成&#xff0c; 称为元音字符串&#xff0c;现给定一个字符串&#xff0c;请找出其中最长的元音字符串&#xff0c;并返回其长度&#xff0c;如果找不到请返回0&#xff0c; 字符串中任意一个连续字符组成…...

第9节:Vue3 指令

如何在UniApp中使用Vue3的指令&#xff1a; <template> <view> <!-- 使用指令 --> <text v-show"isVisible" click"toggleVisibility">点击隐藏/显示</text> <button v-on:click"incrementCount">点击…...

B028-JDBC基础

目录 什么是JDBCJDBC引入持久化JDBC规范 使用JDBC完成CRUDJDBC创建表JDBC CRUD和优化 DAO层的实现 什么是JDBC JDBC引入 Java代码操作数据库的唯一技术&#xff1a;-- JDBC ( java database connection ) 持久化 持久化(persistence)&#xff1a;把数据保存到可掉电式存储设…...

ngixn 准备

确认yum可用&#xff0c;确认防火墙&#xff0c;确认SELinux 一项安装 yum -y install gcc make automake pcre-devel zlib zlib-devel openssl openssl-devel参数&#xff1a; gcc&#xff1a;编译依赖gcc环境 pcre&#xff1a;PCRE(Perl Compatible Regular Expressions)是一…...

生活小记录

上个月项目总算上线了&#xff0c;节奏也慢慢调整正常。发现自己好久没有记录生活点滴了&#xff0c;正好写写。其实&#xff0c;最近这段日子发生的事情还是挺多的。 流感 媳妇11.24得流感&#xff0c;这件事情特别好笑&#xff0c;大晚上她和我妹妹想喝酒试试&#xff0c;结…...

Diary22-全网最全的CSS3.0讲解

CSS学习 1.认识CSS 1.1什么是CSS CSS&#xff1a;Cascading Style Sheet——层叠级联样式表 CSS&#xff1a;表现&#xff08;美化网页&#xff09; 字体&#xff1b;颜色&#xff1b;边距&#xff1b;高度&#xff1b;宽度&#xff1b;背景图片&#xff1b;网页定位&…...

LAMP和分离式LNMP部署

目录 一.什么是LAMP&#xff1f; 二.安装LAMP 先安装apache&#xff0c;httpd网页服务&#xff1a; 接着安装mysql&#xff1a; 安装php&#xff1a; 创建论坛&#xff1a; 三.安装分布式LNMP&#xff1a; 先安装nginx&#xff1a; 到另一台主机安装php&#xff1a; …...

基于Java房屋租赁管理系统

基于Java房屋租赁管理系统 功能需求 1、房源信息管理&#xff1a;系统需要能够记录和管理所有房源的详细信息&#xff0c;包括房屋地址、房屋面积、租金、付款方式、房屋类型等。管理员应该可以添加、编辑和删除房源信息。 2、租户信息管理&#xff1a;系统需要能够记录和管…...

windows安装protoc、protoc-gen-go、protoc-gen-go-grpc

文章目录 一、 protoc二、protoc-gen-go三、protoc-gen-go-grpc 一、 protoc 1&#xff0c;下载&#xff1a;https://github.com/google/protobuf/releases 下载对应的protoc&#xff0c;注意选择windows 2&#xff0c;下好之后解压就行&#xff0c;然后把bin目录加入到环境…...

macOS 获取文件夹大小

macOS 获取文件夹大小 获取文件夹大小的扩展如下&#xff1a; extension URL {var fileSize: Int? { // in bytesdo {let val try self.resourceValues(forKeys: [.totalFileAllocatedSizeKey, .fileAllocatedSizeKey])return val.totalFileAllocatedSize ?? val.fileAll…...

Ultimate VFX

Ultimate VFX 构建套件:...

一个通用游戏后台的设计模式实践总结

搞业务开发的时候,发现有一些代码的开发会让人感觉非常简便舒服,有一些代码的开发却有时候会让人感觉心智负担比较大。 逐步总结的过程中,发现让开发人员写起来感觉舒服的代码,大概率是因为当前模块与其他模块代码耦合度低,开发人员无需花费过多的精力去关注其他模块的实现…...

Kubernetes - 为什么 K8S 在容器里不能调用自己?

问题描述 最近遇到一个神奇的现象&#xff0c;在 K8S 的 POD 容器中&#xff0c;比如 pod name&#xff1a;mini-appnamespace&#xff1a;devport&#xff1a;5050 那么&#xff0c;是无法在 mini-app 容器里执行以下命令&#xff0c;如果执行&#xff0c;会一直卡在这条命…...

电机:有刷直流电机的原理

一、什么是有刷直流电机 直流有刷电机&#xff08;Brushed DC Motor&#xff09;&#xff0c;定子是用永磁铁或者线圈做成&#xff0c;以形成固定磁场。在定子一端上有固定碳刷&#xff0c;或者铜刷&#xff0c;负责把外部电流引入转子线圈。而转子是由线圈构成&#xff0c;线…...

小黑子——springBoot基础

springBoot简单学习 一、SpringBoot简介1.1 springBoot快速入门1.1.1 开发步骤1.1.2 对比1.1.3 官网构建工程1.1.3 SpringBoot工程快速启动 1.2 springBoot概述1.2.1 起步依赖I. 探索父工程II. 探索依赖III. 小结 1.2.2 程序启动1.2.3 切换web服务器-jetty 二、配置文件2.1 配置…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...