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.mfbz.cn/a/454125.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构——通讯录项目

1.通讯录的介绍 顺序表是通讯录的底层结构。 通讯录是将顺序表的类型替换成结构体类型来储存用户数据&#xff0c;通过运用顺序表结构来实现的。 用户数据结构&#xff1a; typedef struct PersonInfo {char name[12];char sex[10];int age;char tel[11];char addr[100]; }…

【C++】C++的初步认识

&#x1f338;博主主页&#xff1a;釉色清风&#x1f338;文章专栏&#xff1a;C&#x1f338;今日语录&#xff1a;自律以修身&#xff0c;自省以观己。自学以长识&#xff0c;自处以蓄力。 &#x1f33b;Hi~大家好&#xff0c;这次文章是C的初步认识&#xff0c;包括从C语言到…

(黑马出品_高级篇_01)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式

&#xff08;黑马出品_高级篇_01&#xff09;SpringCloudRabbitMQDockerRedis搜索分布式 微服务技术——保护 今日目标1.初识Sentinel1.1.雪崩问题及解决方案1.2.服务保护技术对比1.3.Sentinel介绍和安装1.3.1.初识Sentinel1.3.2.安装Sentinel 1.…

Mybatis Plus + Spring 分包配置 ClickHouse 和 Mysql 双数据源

目录 一、背景 二、各个配置文件总览&#xff08;文件位置因人而异&#xff09; 2.1 DataSourceConfig 2.2 MybatisClickHouseConfig &#xff08;ClickHouse 配置类&#xff09; 2.3 MybatisMysqlConfig&#xff08;Mysql 配置类&#xff09; 2.4 application.propertie…

Xterminal:未来的终端体验

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 开发环境篇 ✨特色专栏&#xff1a; M…

Git版本控制工具简介

版本控制工具 分类 集中式版本控制工具 CVS、SVN、VSS 缺点&#xff1a;如果服务器一旦宕机&#xff0c;所有历史数据将会丢失 分布式版本控制工具 Git、Mercurial、Bazaar、Darcs...... 优势&#xff1a;本地即可进行版本控制&#xff0c;很好避免了单点故障 需要有一个远程…

软件设计师15--进程资源图

软件设计师15--进程资源图 考点1&#xff1a;进程资源图例题&#xff1a; 考点1&#xff1a;进程资源图 例题&#xff1a; 1、在如下所示的进程资源图中&#xff0c;D&#xff09;。 A、P1、P2、P3都是非阻塞节点&#xff0c;该图可以化简&#xff0c;所以是非死锁的 B、P1、…

基于SSH的物流配送管理系统的设计与实现

摘 要 当今社会&#xff0c;物流配送已成为影响经济发展的显著因素。而随着社会信息化发展&#xff0c;建立有效的物流配送管理体系不仅能够减少物流成本&#xff0c;更能够提升工作人员的工作效率与客户的满意度。而基于B/S架构的物流配送管理体系&#xff0c;不仅具有良好的…

ChatGPT提问技巧:受控生成提示

ChatGPT提问技巧&#xff1a;受控生成提示 受控生成提示是一种可以高度控制输出结果的文本生成技术。 具体做法是为模型提供一组特定的输入&#xff0c;如模板、特定词汇或一组约束&#xff0c;用于指导生成过程。 通过为模型提供一组可用于指导生成过程的特定输入&#xff…

Linux 动态库和静态库 【详解】

动静态库的基本原理 静态库&#xff08;.a&#xff09;&#xff1a;程序在编译链接的时候把库的代码链接到可执行文件中。程序运行的时候将不再需要静态库动态库&#xff08;.so&#xff09;&#xff1a;程序在运行的时候才去链接动态库的代码&#xff0c;多个程序共享使用库的…

解决ipconfig不是内部或外部命令,也不是可运行的程序或批处理文件

问题所示&#xff1a;ipconfig不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。 解决办法如下: 1.右击此电脑&#xff0c;点击属性设置&#xff1a; 2.点击高级系统设置 3.点击进入环境变量 4.在系统变量中进行设置&#xff0c;双击PATH进行配置 5.点击新建&am…

yum安装mysql、数据库tab自动补全,快来浅了解下 ?

centos7上面没有mysql&#xff0c;它的数据库名字叫做mariadb [rootlocalhost ~]#yum install mariadb-server -y [rootlocalhost ~]#systemctl start mariadb.service [rootlocalhost ~]#systemctl stop firewalld [rootlocalhost ~]#setenforce 0 [rootlocalhost ~]#ss -na…

Kotlin:泛型

点击查看泛型中文文档 点击查看泛型英文文档 简介 与 Java 类似&#xff0c;Kotlin 中的类也可以有类型参数&#xff1a; class Box<T>(t: T) {var value t }一般来说&#xff0c;要创建这样类的实例&#xff0c;我们需要提供类型参数&#xff1a; val box: Box<…

SpringBoot项目中出现不同端口跨域问题,如何解决?

方法一&#xff1a;比较繁琐&#xff0c;适合少量Controller控制器类 方法二 &#xff1a;需要写一个全局的配置文件即可 在如图所示的common目录下新建一个CorsConfig的class文件 具体代码展示&#xff1a; import org.springframework.context.annotation.Bean; import o…

淘宝客必看:微信公众号如何快速接入抖音本地团购并提高CPS收益

抖音已经成为社交媒体新的流量高地&#xff0c;抖音团购完全复刻了美团的模式&#xff0c;外卖、到店、吃喝玩乐全覆盖。很多淘宝客一直在寻找通过微信公众号实现营销变现的有效途径&#xff1f;是否对于如何将抖音团购转变为自己的佣金收入感到困惑&#xff1f;微信公众号接入…

Eslint + Prettier 配置

setting.json {"eslint.autoFixOnSave": true, // 保存文件时自动修复可修复的问题"eslint.validate": [// 定义哪些文件类型应该由 ESLint 验证"javascript","javascriptreact","vue" // 如果你正在使用 Vue&#xff0c;确…

基于单片机的GPS定位信息显示系统

基于单片机的GPS定位信息显示系统 摘 要 在当今信息时代的发展中&#xff0c;GPS全球定位系统是一个重要的组成部分&#xff0c;其具有精度很高、应用广泛、性能强大的特点&#xff0c;因此在实际生活中GPS全球定位显示系统被广泛运用于各类领域当中。它也是至今为止最好的定…

HarmonyOS 发送系统通知 基础通知

harmonyos中 提供了 各种不同功能的通知 来满足我们不同的业务需求 本文呢 我们先来看 最基本的通知 它的场景和使用方式 最基本的 是 当应用被切入后台 而应用内部发生了一些变化 就可以用通知的方式 来提醒用户 就比如 我们微信 被切到了后台 而这时 别人发消息过来了 那么…

2014

1,写出计算Ack(m,n)的递归算法 #include<iostream> using namespace std; int A(int m,int n){if(m0){return n1;}else if(m>0&&n0){return A(m-1,1);}else{return A(m-1,A(m,n-1));} }int main(){int m,n;cout<<"please input two number"&l…

【深度学习笔记】7_7 AdaDelta算法

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 7.7 AdaDelta算法 除了RMSProp算法以外&#xff0c;另一个常用优化算法AdaDelta算法也针对AdaGrad算法在迭代后期可能较难找到有用解的…
最新文章