词云（三）：选择图形+图片，切换绘制词云

最新推荐文章于 2025-07-10 23:23:24 发布
原创 最新推荐文章于 2025-07-10 23:23:24 发布 · 3.6k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#词云 #标签云图

    偶然间发现，echarts中的wordCloud类型可以直接绘制图形，直接在option中的series传入shape值即可。不过前提还是需要echarts相应的插件。

插件准备：（1）jquery-1.8.3.min.js

                 （2）echarts.min.js

                 （3）echarts-wordcloud.min.js

    下面就是传入shape值的代码，目前我所尝试的可以绘制出相应图形的有：圆形、五角星、正方形、三角形。
//选择图片
    var arr = {"圣诞树1":90,"圣诞树2":80,"圣诞树3":20,"圣诞树4":40,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50,"圣诞树1":90,"圣诞树2":80,"圣诞树3":20,"圣诞树4":40,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50};
//绘制词云
    function add(arr){
	var myChart = echarts.init(document.getElementById('main'));
	var arr = arr;
	var data = [];
	for (var i = 0; i < arr.length; ++i) {
	    data.push({
		name: arr[i],
		value: (presents.length - i) * 0.8
	    });
	}
	for(var k in arr){
	    var cnt = Math.floor(Math.random() * 10);
	    for (var j = 0; j < cnt; ++j) {
		data.push({
		    name: k,
		    value: arr[k]*Math.random()
		});
	    }
	}
	var myChart = echarts.init(document.getElementById('main'));
	var maskImage = new Image();
	var option = {
	    tooltip: {
	        show: false
	    },
	    series: [{
	        type: 'wordCloud',
	        gridSize: 1,
	        sizeRange: [6, 20],
	        rotationRange: [0, 180],
	        rotationStep: 90,
	        shape:'circle',
	        textStyle: {
	            normal: {
		        color: function(v) {
		            if (v.value > 190) {
			        return 'rgb(110, 206, 7)';
			    } else if (v.value > 80) {
			        return 'rgb(7, 49, 206)';
			    } else if (v.value > 70) {
			        return 'rgb(105, 7, 206)';
			    } else if (v.value > 60) {
			        return 'rgb(185, 45, 225)';
			    } else if (v.value > 50) {
			        return 'rgb(247, 65, 193)';
			    } else if (v.value > 40) {
			        return 'rgb(223, 31, 126)';
			    } else if (v.value > 30) {
			        return 'rgb(66, 152, 177)';
			    } else if (v.value > 20) {
			        return 'rgb(229, 208, 66)';
			    } else if (v.value > 10) {
			        return 'rgb(189, 117, 82)';
			    } else {
			        return 'rgb(20, 186, 167)';
			    }
		        }
		    },
	        },
	        width: 540,
	        top: 10,
	        data: data
	    }]
        }
	myChart.setOption(option);			 
    }

    基于之前可以选择图片的效果，我想要将这些个图形可以直接选择然后绘制，说到选择，当然是select啦。只需要小小的改动就可以啦。把shape的值换成变量，传入。


    既然图形和图片都是可以选择绘制的，为啥不写在一起试试呢？

（1）html代码

<div class="main">
    <div id="main" style="width:600px;height:600px;"></div>
    <div id="chooseword"></div>
    <div id="shapeselect">
	请选择绘制图形
	<select>
	    <option value="circle">圆形</option>
	    <option value="pentagon">五角星</option>
	    <option value="square">正方形</option>
	    <option value="triangle">三角形</option>
	</select>
    </div>
</div>

（2）方便实现效果的css

#chooseword{
    position: absolute;
    top:386px;
    left:500px;
    color:yellow;
    font-size:28px;
}
#choose{
    position: absolute;
    width:540px;
    text-align: center;
    font-size:30px; 
    top:0;
    left:0;
    display: none;
    color:#fff;
    font-weight: bold;
}
.main{
    position: relative;
}
#main{
    margin-right:40px;
    float:left;
}
#lee{
    display: none;
}
.imgbox{
    margin-top:60px;
}
（3）jQuery代码 
$(function(){	
    //选择图片
    var arr = {"圣诞树1":90,"圣诞树2":80,"圣诞树3":20,"圣诞树4":40,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50,"圣诞树1":90,"圣诞树2":80,"圣诞树3":20,"圣诞树4":40,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50,"圣诞树5":10,"圣诞树6":30,"圣诞树7":10,"圣诞树8":40,"圣诞树9":50,"圣诞树10":20,"圣诞树11":70,"圣诞树12":10,"圣诞树13":60,"圣诞树14":80,"圣诞树15":50,"圣诞树16":30,"圣诞树17":20,"圣诞树18":80,"圣诞树19":20,"圣诞树20":50,"圣诞树21":70,"圣诞树22":30,"圣诞树23":20,"圣诞树24":60,"圣诞树25":80,"圣诞树26":90,"圣诞树27":20,"圣诞树28":10,"圣诞树29":40,"圣诞树30":20,"圣诞树31":30,"圣诞树32":70,"圣诞树33":60,"圣诞树34":10,"圣诞树35":70,"圣诞树36":40,"圣诞树37":30,"圣诞树38":50};
    $('.imgbox').on('click','img',function(e){
	var img = new Image();
	img.crossOrigin = 'Anonymous';
	img.onload = function(){
	    var canvas = document.createElement('CANVAS');
	    var ctx = canvas.getContext('2d');
	    var dataURL;
	    canvas.height = this.height;
	    canvas.width = this.width;
	    ctx.drawImage(this, 0, 0);
	    dataURL = canvas.toDataURL();
	    canvas = null;
	};
	img.src = $(this).attr('src');
	$('#lee').html(img);
	setTimeout(add('img',arr),100);
    });		
    //选择图形
    $('#shapeselect').on('change','select',function(){
	setTimeout(add('shape',arr),100);
    });
    //绘制词云
    function add(imgor,arr){
	var myChart = echarts.init(document.getElementById('main'));
	var arr = arr;
	var data = [];
	for (var i = 0; i < arr.length; ++i) {
	    data.push({
		name: arr[i],
		value: (presents.length - i) * 0.8
	    });
	}
	for(var k in arr){
	    var cnt = Math.floor(Math.random() * 10);
	    for (var j = 0; j < cnt; ++j) {
		data.push({
		    name: k,
		    value: arr[k]*Math.random()
		});
	    }
	}
	var myChart = echarts.init(document.getElementById('main'));
	//每次画之前需要清除画布
	myChart.clear();
	var maskImage = new Image();			   
	if(imgor=='img'){
	    var imgurl = $('#lee').find('img').attr('src');
	    var option = {
		tooltip: {
		    show: false
		},
		series: [{
		    type: 'wordCloud',
		    gridSize: 1,
		    sizeRange: [6, 20],
		    rotationRange: [0, 180],
		    rotationStep: 90,
		    maskImage: maskImage,
		    textStyle: {
		        normal: {
			    color: function(v) {
				if (v.value > 190) {
				    return 'rgb(110, 206, 7)';
				} else if (v.value > 80) {
				    return 'rgb(7, 49, 206)';
				} else if (v.value > 70) {
				    return 'rgb(105, 7, 206)';
				} else if (v.value > 60) {
				    return 'rgb(185, 45, 225)';
				} else if (v.value > 50) {
				    return 'rgb(247, 65, 193)';
				} else if (v.value > 40) {
				    return 'rgb(223, 31, 126)';
				} else if (v.value > 30) {
				    return 'rgb(66, 152, 177)';
				} else if (v.value > 20) {
				    return 'rgb(229, 208, 66)';
				} else if (v.value > 10) {
				    return 'rgb(189, 117, 82)';
				} else {
				    return 'rgb(20, 186, 167)';
				}
			    }
			},
		    },
		    width: 540,
		    top: 10,
		    data: data
		}]
	    }
	    maskImage.onload = function() {
		myChart.setOption(option);
	    };
	    maskImage.src = imgurl;
	}else{	
	    var shape = $('#shapeselect').find('select').val();
	    var option = {
		tooltip: {
		show: false
	    },
	    series: [{
		type: 'wordCloud',
		gridSize: 1,
		sizeRange: [6, 20],
		rotationRange: [0, 180],
		rotationStep: 90,
		shape:shape,
		textStyle: {
		    normal: {
		        color: function(v) {
			    if (v.value > 190) {
			        return 'rgb(110, 206, 7)';
			    } else if (v.value > 80) {
				return 'rgb(7, 49, 206)';
			    } else if (v.value > 70) {
				return 'rgb(105, 7, 206)';
			    } else if (v.value > 60) {
				return 'rgb(185, 45, 225)';
			    } else if (v.value > 50) {
				return 'rgb(247, 65, 193)';
			    } else if (v.value > 40) {
				return 'rgb(223, 31, 126)';
			    } else if (v.value > 30) {
				return 'rgb(66, 152, 177)';
			    } else if (v.value > 20) {
				return 'rgb(229, 208, 66)';
			    } else if (v.value > 10) {
				return 'rgb(189, 117, 82)';
			    } else {
				return 'rgb(20, 186, 167)';
			    }
			}
		    },
		},
		width: 540,
		top: 10,
		data: data
	    }]
	}
	myChart.setOption(option);
    }
}	
var myChart = echarts.init(document.getElementById('main'));
myChart.on('mouseover', function (params) { 
    $('#chooseword').html(params.name);
});
});

    在这个过程中出现过一个问题，在选择完图片之后再选择图形就失效了..还能说什么好，这是看到图片之后就不再选择图形了吗，哎呀呀，这是病，得治啊。好吧，我就发发善心，给你治治吧~既然你忘不掉，那我帮你好啦。


这样就算是治好啦，哈哈，机智如我。

     至此为止，echarts中wordCloud相关已经就此结束啦~

3篇2章15节：深度讲解词云图的绘制和改变相关的主题（更新20250106）
DAT｜R科学与人工智能
09-06 765
词云图作为一种强大的文本可视化工具，不仅能够高效地提取文本中的关键信息，还能够通过丰富的视觉设计吸引观众的注意力。在本文中，我们详细讲解了词云图的基本概念、使用方法，以及如何通过自定义参数和主题优化词云图的展示效果。
通过HTML + jquery + echarts 实现文字云图
12-20
网页通过HTML + jquery + echarts 实现文字云图（词云图），源码真实可用，在此特意提供给需要的人参考使用。
wordcloud2 画一个“词云”
菠萝西斯的博客
04-26 1755
文章目录使用说明常见问题 使用说明 library(wordcloud2) #install.packages("wordcloud2") wordcloud2(data, size = 1, minSize = 0, gridSize = 0, fontFamily = 'Segoe UI', fontWeight = 'bold', color = 'random-dark', backgroundColor = "white", minRotation = -pi/4, m
【前端】【Echarts】ECharts 词云图（WordCloud）教学详解
最新发布
qq_59344127的博客
07-10 1678
本文介绍了使用ECharts的WordCloud插件创建词云图的详细教程。文章从准备工作开始，讲解了如何引入ECharts核心库和词云插件。在基本配置部分，重点说明了series配置中的type、shape、data和textStyle等重要参数。进阶样式部分分享了旋转角度、字体样式和布局密度的定制技巧。文章还提供了三个实用示例：基础圆形词云、自定义旋转角度和字体样式、以及矩形单色词云。最后给出实用建议，强调词云图适合展示关键词频率和热点分析，并可通过点击事件实现交互。全文通过简洁明了的代码示例和生动的效果
jQuery tagcloud 插件
08-26
这个是自己根据一个已经有 3D 特效的标签云源代码修改而成，感谢原作者！ 用法： <div id="tag"> <a href=...>...</a> <a href=...>...</a> <a href=...>...</a> ... (无论多少个) </div> 然后 $("#tag").tagcloud({color:...,radius:...}); 即可
【亲测免费】 jQCloud：基于jQuery的精美词云生成插件
gitblog_00146的博客
11-05 633
jQCloud：基于jQuery的精美词云生成插件 项目基础介绍和主要编程语言 jQCloud是一个基于jQuery的开源JavaScript插件，专门用于生成美观且形状如云的词云（Word Cloud）和标签云（Tag Cloud）。该项目的主要编程语言是JavaScript，依赖于jQuery库来实现其功能。 项目核心功能 jQCloud的核心功能是生成词云，它能够将一组单词按照其重要性（权重...
Jquery中用echarts3做词云，已在项目中使用
09-11 947
开头一定要引入这两个js，奇怪的是，3.3.2的echarts.js我下载下来之后词云就出不来了，所以暂时只能这样了， <script src="https://cdn.bootcss.com/echarts/3.3.2/echarts.js"></script> &...
r语言上机文本分析与词云绘制_R语言- 实验报告 - 词云的分析与生成
weixin_29792607的博客
12-30 420
一、实训内容在进行数据读入操作前，要求下载和加载相应的程序包文件。利用R语言的scan( )方法，从外部txt文件读入进行实验的数据集内容。本实验要求先对输入的数据集进行词语分割，过滤不合需求的字符长度。进行词频统计后，仍可进行数字的过滤操作，最后进行词语的降序排序。在对数据集进行分词，统计词频之后，方可使用程序包wordcloud，对数据集进行词云图片的绘画和生成。二、实验课题目标要求掌握程序包...
python—wordcloud库绘制词云
Txixi的博客
01-27 3389
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 在做词云图之前我们需要安装第三方库： pip install numpy matplotlib pillow wordcloud imageio jieba snownlp itchat -i https://pypi.tuna.tsinghua.edu.cn/simple 如果在安装wordcloud的时候出现报错：Microsoft Visual C++ 14.0 is required. 这时候 点这个网址下载所需的w
Python词云美化术：pyecharts库打造专业视觉效果
![Python词云美化术：pyecharts库打造专业视觉效果]...在词云美化技巧方面，探讨了定制化设置、高级美化方法及专业级词云制作流程。通过实例分析，论文展示了pyecharts在词云
【R语言词云实战】：wordcloud2包深度应用案例与性能优化策略
!...# 1. R语言和wordcloud2包入门 ## R语言简介 R语言是一种用于统计分析、图形表示以及报告的编程语言...wordcloud2是R语言中的一个包，专门用于生成词云图形。词云是文本数据可视化的结果，其中单词的大小和颜色直观地
最全字符云图，压缩包内附7种不同字符云图。包括echart词云，3D动态效果词云图等
09-02
最全字符云图，压缩包内附7种不同字符云图。包括echart词云，3D动态效果词云图等
jQuery 动态云标签插件
12-10
前言： 　　最近对js的插件封装特别感兴趣，无耐就目前的技术想做到js的完全封装，还是有一定困难，就基于jQuery封装了一个小的插件，而且是基于对象级开发的，不是添加全局方法。高深的语法几乎没有，就有一个return：foreach()方法来返回对象实例本身，还有一个extend（）函数，用来扩展参数对象的属性，这也是为了对象在调完我这个方法后方便链式操作。 　　插件打包下载地址：点我下载 插件名：动态云标签 插件特点： 在指定块级元素内动态生成a标签 a标签的高度、宽度、位置、层数、背景颜色随机可控 a标签渐隐显示和渐隐消失，可改变初始化的透明度 a标签创建的速度和移动速度可控（计时器）
jquery.svg3dtagcloud.min.js生成3D标签图插件
11-27
web端生成3D效果标签云图,词云图,下载的别人的js文件,然后自己稍微做了一些小的修改.插件使用更加灵活了
词云，字符云或者叫标签云在ie8下的实现方式
03-09
词云，字符云或者叫标签云在ie8下的实现方式。做了一下改进，引用jquery1.0.4
echarts 形状不一的词云
02-14
echarts 形状不一的词云
jquery用Echarts实现词云和地图
m0_65638748的博客
09-16 760
jquery用Echarts实现词云和地图
echarts词云图形状_用Wordcloud生成指定形状的词云图
weixin_39610229的博客
11-02 2239
wordcloud是Python扩展库中一种将词语用图片表达出来的一种形式，通过词云生成的图片，我们可以更加直观的看出某篇文章的故事梗概。 首先贴出一张词云图（以哈利波特小说为例）： 在生成词云图之前，首先要做一些准备工作 安装结巴分词库 pip install jieba Python中的分词模块有很多，他们的功能也都是大同小异，我们安装的结巴分词 是当前使用的最多的类型。 下面我来简单介绍一...
pyecharts在数据可视化中的应用 （二）（pyecharts绘制树图、矩形树图、地理热力图、词云图、相关性矩阵等图）
qq_45810849的博客
06-12 3450
1.使用以下JSON数据绘制树图、矩形树图。 from pyecharts import options as opts from pyecharts.charts import Tree data = [{ "name": "flare", "children": [ { "name": "flex", "children": [{"name": "FlareVis", "value": 4116}] },
jupyter绘制中文词云图
03-25
### 如何在 Jupyter Notebook 中用 Python 绘制支持中文的词云图 要在 Jupyter Notebook 中生成包含中文的词云图，需完成以下几个方面的配置： #### 1. 安装必要的库 为了生成词云图，需要安装 `wordcloud` 和 `...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值