效果图

一、使用Echarts 和echarts-wordcloud 插件

这里是我使用插件的版本

"echarts": "^5.2.2",
"echarts-wordcloud": "^2.0.0",
"vue": "^3.2.26",

二、附上 .vue文件内容

这里我使用的是vue3.0版本，但是写法还是用的vue2的写法（因为我们的java后台熟悉这种写法），如果各位需要请自行修改吧！

<!--  -->
<template><div><div id="wordCloud" style="height: 400px; width: 400px;"></div></div>
</template><script>
import * as echarts from 'echarts/core';
import 'echarts-wordcloud';
export default {data() {return {echartsData: [{ value: '30', name: 'VIVO' },{ value: '29', name: 'OPPO' },{ value: '28', name: 'HONOR' },{ value: '27', name: '红米' },{ value: '26', name: '小米' },{ value: '25', name: '美图' },{ value: '24', name: 'ONEPLUS' },{ value: '23', name: '魅族' },{ value: '22', name: '红手指' },{ value: '21', name: 'SAMSUNG' },{ value: '20', name: '金立' },{ value: '16', name: 'BLACKBERRY' },{ value: '15', name: '诺基亚' },{ value: '14', name: '锤子' },{ value: '13', name: '大疆' },{ value: '12', name: '361' },{ value: '11', name: '摩托罗拉' },{ value: '10', name: '联想' },{ value: '9', name: '玩家国度' },]};},mounted: function () {this.initChart();},methods: {initChart() {var myChart = echarts.init(document.getElementById('wordCloud'));const option = {title: {text: '',x: "center"},backgroundColor: "#fff",// tooltip: {//   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"// },series: [{type: "wordCloud",//用来调整词之间的距离gridSize: 10,//用来调整字的大小范围// Text size range which the value in data will be mapped to.// Default to have minimum 12px and maximum 60px size.sizeRange: [14, 40],// Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45//用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容// rotationRange: [-45, 0, 45, 90],// rotationRange: [ 0,90],rotationRange: [0, 0],//随机生成字体颜色// maskImage: maskImage,textStyle: {color: function () {return ("rgb(" +Math.round(Math.random() * 255) +", " +Math.round(Math.random() * 255) +", " +Math.round(Math.random() * 255) +")");}},//位置相关设置// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud// Default to be put in the center and has 75% x 80% size.left: "center",top: "center",right: null,bottom: null,width: "100%",height: "100%",//数据data: this.echartsData}]};myChart.setOption(option);// 点击某个字myChart.on('click', function (params) {console.log('myChart----click---:', params, '------', params.data)});}}}</script>
<style lang='less' scoped>
</style>

vue3.0实现标签云（或词云）相关推荐

Python 基础之词云（词的频率统计大小成图）的简单实现（包括图片词云，词云颜色，词的过滤）
Python 基础之词云(词的频率统计大小成图)的简单实现(包括图片词云,词云颜色,词的过滤) 目录
JQCloud标签云、词云展示
一.展示效果二.代码展示 index.html <!DOCTYPE html> <html><head><title>词云</title> ...
python词云_python词云
python词云[编辑] 概述 python词云是一种构建词云的方法,利用通用的编程语言Python来做词云,虽然不如专用工具便捷,但是适用范围很广,满足了不同人对词云的个性化需求. 一.Python ...
python 词云_python词云-数据产品岗位描述的词云
目的: 对于数据产品岗位,需要什么样的技能才能胜任,针对这个小问题,爬取了boss直聘的岗位描述,进行词频统计,并画出词云,来看看到底数据产品需要什么样的技能.最重要用到的python的库是jieba ...
python生成词云_词云制作没那么难，Python 10 行代码就实现了！
欢迎点击右上角关注小编,除了分享技术文章之外还有很多福利,私信"学习资料"可以领取包括不限于Python实战演练.PDF电子文档.面试集锦.学习资料等. 写在前面想必大家有一个问 ...
爱心 python 词云_爱心 python 词云_python 词云
最近由于大屏项目需要生成一个词云所以这边做个记录 demo.py下: from os import path import chnSegment import plotWordcloud if __n ...
爱心 python 词云_Python词云
from PIL import Image from wordcloud import WordCloud, ImageColorGenerator import matplotlib.pyplot ...
爱心 python 词云_python 词云
最近由于大屏项目需要生成一个词云所以这边做个记录 demo.py下: from os import path import chnSegment import plotWordcloud if __n ...
【文本挖掘】——词频统计、词云绘制与美化+[微微一笑很倾城]实战
词频统计.词云+实战一.词频统计: 1.基本概念及原理 2.词频统计方法二.词云 1.词云绘制工具: 2.python词云绘制--Wordcloud 三.基于分词频数绘制词云 1.利用词频绘制词云 ...

vue3.0实现标签云（或词云）

效果图

一、使用Echarts 和echarts-wordcloud 插件

二、附上 .vue文件内容

vue3.0实现标签云（或词云）相关推荐

最新文章

热门文章