echarts绘制 联系词(关键字)

在这里插入图片描述


<template><div><div>【关键词条】</div><div ref="target" class="w-full h-full" style='width:300px;height:300px'></div></div>
</template><script setup>
import { ref, onMounted,watch } from 'vue';
import * as echarts from "echarts";
import 'echarts-wordcloud'//需要安装 npm install echarts-wordcloud
// 1.初始化
let myChart = null;
const target = ref(null);
onMounted(() => {myChart = echarts.init(target.value);renderChart();
});
const randowRGB = () => {const r = Math.floor(Math.random() * 255)const g = Math.floor(Math.random() * 255)const b = Math.floor(Math.random() * 255)return `rgb(${r},${g},${b})`
}
// 2.构建 option 配置对象
const renderChart = () => {const options = {series: [{type: 'wordCloud',//数据中的值将映射到的文本大小范围。默认大小为最小12px,最大60px。sizeRange: [8, 46],//文本旋转范围和步进度。rotationRange: [0, 0],//以像素为单位的网格大小,用于标记画布的可用性//网格尺寸越大,单词之间的间距越大。gridSize: 0,layoutAnimation: true,//渲染动画textStyle: { //文本颜色color:randowRGB},emphasis: { //高亮的效果textStyle: {fontWeight: 'bold',color:'#ffffff'}},//数据是一个数组。每个数组项必须具有名称和值属性。data:[{"value": 36,"name": "企联网"},{"value": 14,"name": "智农通"},{"value": 39,"name": "OPPO"},{"value": 38,"name": "HONOR"},{"value": 26,"name": "红米"},{"value": 44,"name": "小米"},{"value": 37,"name": "美图"},{"value": 39,"name": "ONEPLUS"},{"value": 12,"name": "魅族"},{"value": 32,"name": "红手指"},{"value": 34,"name": "SAMSUNG"},{"value": 11,"name": "金立"},{"value": 20,"name": "BLACKBERRY"},{"value": 22,"name": "诺基亚"},{"value": 13,"name": "锤子"},{"value": 27,"name": "大疆"},{"value": 14,"name": "361"},{"value": 25,"name": "摩托罗拉"},{"value": 30,"name": "联想"},{"value": 27,"name": "玩家国度"}]}
] }// 3.通过实例.setOptions(option)myChart.setOption(options);
};
watch(() => data,renderChart)
</script><style lang="scss" scoped></style>

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

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

相关文章

使用docker-compose部署Redis集群

一、部署三主三从的Redis集群 分别为6个节点建立挂载目录&#xff0c;每个目录下建立数据、配置、日志文件夹。 docker-compose内容如下&#xff1a; version: 3 services:redis1:image: redis:6.2.3restart: alwaysports:- "6379:6379"- "16379:16379"v…

融入Facebook的世界:探索数字化社交的魅力

融入Facebook的世界&#xff0c;是一场数字化社交的奇妙之旅。在这个广袤的虚拟社交空间中&#xff0c;人们可以尽情展现自己、分享生活&#xff0c;与全球朋友、家人和同事保持紧密联系&#xff0c;共同探索社交互动的乐趣与魅力。让我们深入了解这个世界的魅力所在&#xff1…

基于SpringBoot+Vue的电商应用系统的设计与实现

1 绪论 1.1研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规范化管理。这样的大环境让那些止步不前&…

Rust 利用 Trait 实现多态性

在Rust中&#xff0c;Trait&#xff08;特性&#xff09;是一种强大的抽象机制&#xff0c;类似于其他编程语言中的接口或类型类。它们允许你定义一组方法&#xff0c;这些方法可以在任何实现该Trait的类型上调用。这使得Rust能够以一种非常灵活的方式支持多态性。 下面是一个…

2.2 HTML5保留的常用标签

2.2.1 基础标签 1. 段落标签<p> 段落标签<p>和</p>用于形成一个新的段落&#xff0c;段落与段落之间默认为空一行进行分割。 2. 标题标签<h1>-<h6> HTML5使用<hn>和</hn>来标记文本中的标题&#xff0c;其中n需要替换为数字&#x…

使用insightface 识别人脸性别和年龄

一、背景 这个库蛮强大的&#xff0c;能识别人脸的性别和年龄吗&#xff0c;可以 二、步骤 1、把下面保存为test.py import argparse import cv2 import sys import numpy as np import insightface from insightface.app import FaceAnalysis from insightface.data import…

腾讯云对象存储的在Java使用步骤介绍

腾讯云对象存储的在Java使用步骤介绍 创建一个腾讯云的账户 这个自己去创建&#xff0c;然后开通对象存储服务&#xff0c;如下 有了账号就要创建一个对象存储的桶&#xff0c;也就是存储对象的一个容器 如果你想只有自己放存放的就设置 私有读写 &#xff0c;如果想用网络直…

JavaScript 迭代器和生成器

迭代器&#xff08;Iterator&#xff09; 迭代器是一种特定的设计模式&#xff0c;用于依次访问集合的元素而不必暴露其底层的表现形式。ECMAScript 6&#xff08;ES6&#xff09;引入了内建的迭代器&#xff0c;该标准定义了Iterable和Iterator协议。 Iterable协议 任何对象…

webstorm如何调试uniapp项目

1、webstorm安装Uniapp Tool项目&#xff0c;并根据要求配置Hbuilder和微信开发者工具&#xff1b; 2、运行/调试配置 3、运行uniapp项目&#xff0c;然后运行调试即可愉快的在webstorm上加断点调试了

Hystrix的原理及应用:构建微服务容错体系的利器(一)

本系列文章简介&#xff1a; 本系列文章旨在深入剖析Hystrix的原理及应用&#xff0c;帮助大家理解其如何在微服务容错体系中发挥关键作用。我们将从Hystrix的核心原理出发&#xff0c;探讨其隔离、熔断、降级等机制的实现原理&#xff1b;接着&#xff0c;我们将结合实际应用场…

【技术类-03】python实现docx表格文字的“手动换行符(软回车)”变成“段落标记(硬回车)”

作品展示——docx表格内的手动换行符更改硬回车 背景需求&#xff1a; 这篇成功把docx文本段落&#xff08;无表格&#xff09;中的“手动换行符&#xff08;软回车&#xff09;”变成“段落标记&#xff08;硬回车&#xff09;。 【技术类-02】python实现docx段落文字的“手…

实践疑惑 | 使用pandas库读取文件,与直接使用read()函数读取文件相比,有何不同?

使用 &#xff08;一&#xff09;pandas import pandas as pd# xlsx和xls data pd.read_excel(rfile_path)# csv data pd.read_csv(rfile_path)&#xff08;二&#xff09;read函数 # 使用open函数打开文件 file open(filename.txt, r) # r表示读取模式 # 使用read函数…

企业内部培训考试系统单场培训会议解决方案

企业日常内训中&#xff0c;有些时候也会组织会议培训&#xff0c;再按照会议日程分上下午签到进行培训考勤&#xff0c;并形成培训签到表&#xff0c;如果用活动报名工具&#xff0c;一般只能实现单次的签到考勤&#xff0c;如果用培训班系统则操作过于繁琐&#xff0c;不利于…

子查询 封装属性创建Connection连接类 数据库连接池

子查询 在select语句中包含另一个select 语句 -->子查询 子查询的分类 单行单列子查询 在where子句中使用 运算符 ! > < -- 查询工资比公司平均工资高的员工信息 -- 查询与员工’smith‘同职位的员工信息 -- 查询比员工joins入职…

Python凝聚层次聚类算法

凝聚层次聚类&#xff08;Agglomerative Hierarchical Clustering&#xff09;是一种自底向上的聚类方法。它首先将每个对象看作是一个单独的簇&#xff0c;然后按照某种准则&#xff08;如距离&#xff09;逐渐合并这些簇&#xff0c;直到满足某个终止条件&#xff08;如达到预…

Solidity Uniswap V2 library contract

library contract 在 Solidity 中&#xff0c;库是一种无状态合约&#xff08;即它没有可变状态&#xff09;&#xff0c;它实现了一组可被其他合约使用的函数--这是库的主要目的。与合约不同&#xff0c;库没有状态&#xff1a;它们的函数通过 DELEGATECALL 在调用者的状态下…

工业制造领域系统:SCADA、PLC、DCS、MES、HMI、ERP等,一文秒懂

工业制造控制系统在工业制造领域起到了关键的作用&#xff0c;帮助企业提高生产效率、降低成本、提高产品质量和安全性。不同的企业根据自身需求和规模&#xff0c;可能会选择使用其中的一种或多种系统。 SCADA系统&#xff08;Supervisory Control and Data Acquisition&…

数据和类型转换

文章目录 数据类型数字类型数字操作NaNJavaScript算术运算符的执行顺序 字符串类型&#xff08;string&#xff09;字符串拼接模板字符串 未定义类型&#xff08;undefined&#xff09;布尔类型&#xff08;boolean&#xff09;null&#xff08;空类型&#xff09; 类型转换显式…

【DL经典回顾】激活函数大汇总(十三)(Sinc SwiGLU附代码和详细公式)

激活函数大汇总&#xff08;十三&#xff09;&#xff08;Sinc & SwiGLU附代码和详细公式&#xff09; 更多激活函数见激活函数大汇总列表 一、引言 欢迎来到我们深入探索神经网络核心组成部分——激活函数的系列博客。在人工智能的世界里&#xff0c;激活函数扮演着不可…

ARM 寄存器学习:(一)arm多种模式下得寄存器

一.ARM7种状态以及每种状态的寄存器&#xff1a; ARM 处理器共有 7 种不同的处理器模式&#xff0c;在每一种处理器模式中可见的寄存器包括 15 个通用寄存器( R0~R14)、一个或两个(User和Sys不是异常模式&#xff0c;没有spsr寄存器)状态寄存器&#xff08;cpsr和spsr&…