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

最新推荐文章于 2024-07-26 08:30:00 发布
最新推荐文章于 2024-07-26 08:30:00 发布
阅读量3.2k 收藏 5
点赞数
分类专栏： echart相关 文章标签： 词云 标签云图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sty_fly1203/article/details/79851035
版权

    偶然间发现，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相关已经就此结束啦~

妖精的羽翼
关注
专栏目录
wordcloud2 画一个“词云”
菠萝西斯的博客
04-26 1672
文章目录使用说明常见问题 使用说明 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
r语言上机文本分析与词云绘制_R语言- 实验报告 - 词云的分析与生成
weixin_29792607的博客
12-30 377
一、实训内容在进行数据读入操作前，要求下载和加载相应的程序包文件。利用R语言的scan( )方法，从外部txt文件读入进行实验的数据集内容。本实验要求先对输入的数据集进行词语分割，过滤不合需求的字符长度。进行词频统计后，仍可进行数字的过滤操作，最后进行词语的降序排序。在对数据集进行分词，统计词频之后，方可使用程序包wordcloud，对数据集进行词云图片的绘画和生成。二、实验课题目标要求掌握程序包...
jQuery tagcloud 插件
08-26
这个是自己根据一个已经有 3D 特效的标签云源代码修改而成，感谢原作者！ 用法： <div id="tag"> <a href=...>...</a> <a href=...>...</a> <a href=...>...</a> ... (无论多少个) </div> 然后 $("#tag").tagcloud({color:...,radius:...}); 即可
【vue】【javascript】【echarts】实现词云图
最新发布
weixin_47351913的博客
07-26 393
ECharts 是一个由百度开发的强大的图表库，它可以生成多种类型的图表，包括词云图。要使用 ECharts 绘制词云图，你需要首先引入 ECharts 的核心库以及词云图的扩展库 echarts-wordcloud。
Jquery中用echarts3做词云，已在项目中使用
09-11 903
开头一定要引入这两个js，奇怪的是，3.3.2的echarts.js我下载下来之后词云就出不来了，所以暂时只能这样了， <script src="https://cdn.bootcss.com/echarts/3.3.2/echarts.js"></script> &...
jquery用Echarts实现词云和地图
m0_65638748的博客
09-16 687
jquery用Echarts实现词云和地图
echarts词云图形状_用Wordcloud生成指定形状的词云图
weixin_39610229的博客
11-02 2132
wordcloud是Python扩展库中一种将词语用图片表达出来的一种形式，通过词云生成的图片，我们可以更加直观的看出某篇文章的故事梗概。 首先贴出一张词云图（以哈利波特小说为例）： 在生成词云图之前，首先要做一些准备工作 安装结巴分词库 pip install jieba Python中的分词模块有很多，他们的功能也都是大同小异，我们安装的结巴分词 是当前使用的最多的类型。 下面我来简单介绍一...
python—wordcloud库绘制词云
Txixi的博客
01-27 3150
文章目录前言一、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制作中文词云图_Python3制作中文词云图
weixin_39901358的博客
12-18 1360
1. 准备好文本数据2. pip install jieba3. pip install wordcloud4. 下载字体例如Songti.ttc(mac系统下的称呼，并将字体放在项目文件夹下)from os import pathfrom scipy.misc import imreadimport matplotlib.pyplot as pltimport jiebafrom wordclo...
雪梨小白的“码绘”起步——p5.js实现心形动态图形的绘制
FShirley的博客
10-20 1880
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体...
pyecharts 绘制三维散点图_pyecharts
weixin_29201313的博客
12-24 1996
关于作者想说的作为 pyecharts 的作者，很高兴看到 pyecharts 最近这么受欢迎，一度冲上了 Python daily trending 和 weekly trending 前三名。大家对这个项目的反馈也都不错，在这里我真诚的感谢大家对这个项目的支持。随着使用项目的人越来越多，已经收到了不少希望推出一份英文文档的请求，但是大家提新需求的速度已经远远快于我的开发速度......我还要测...
通过HTML + jquery + echarts 实现文字云图
12-20
网页通过HTML + jquery + echarts 实现文字云图（词云图），源码真实可用，在此特意提供给需要的人参考使用。
jQuery 动态云标签插件
12-10
前言： 　　最近对js的插件封装特别感兴趣，无耐就目前的技术想做到js的完全封装，还是有一定困难，就基于jQuery封装了一个小的插件，而且是基于对象级开发的，不是添加全局方法。高深的语法几乎没有，就有一个return：foreach()方法来返回对象实例本身，还有一个extend（）函数，用来扩展参数对象的属性，这也是为了对象在调完我这个方法后方便链式操作。 　　插件打包下载地址：点我下载 插件名：动态云标签 插件特点： 在指定块级元素内动态生成a标签 a标签的高度、宽度、位置、层数、背景颜色随机可控 a标签渐隐显示和渐隐消失，可改变初始化的透明度 a标签创建的速度和移动速度可控（计时器）
词云，字符云或者叫标签云在ie8下的实现方式
03-09
词云，字符云或者叫标签云在ie8下的实现方式。做了一下改进，引用jquery1.0.4
echarts 形状不一的词云
02-14
echarts 形状不一的词云
词云（标签云）demo
06-27
词云（标签云）demo 源码下载：http://down.alixixi.com 模板下载：http://mb.alixixi.com 电子书籍：http://book.alixixi.com 网页特效：http://js.alixixi.com 韩国酷站：http://cool.alixixi.com/ 技术论坛：http://bbs.alixixi.com
pyecharts在数据可视化中的应用 （二）（pyecharts绘制树图、矩形树图、地理热力图、词云图、相关性矩阵等图）
qq_45810849的博客
06-12 3307
1.使用以下JSON数据绘制树图、矩形树图。 from pyecharts import options as opts from pyecharts.charts import Tree data = [{ "name": "flare", "children": [ { "name": "flex", "children": [{"name": "FlareVis", "value": 4116}] },
jQCloud: 创建美丽的词云图
gitblog_00011的博客
03-15 450
jQCloud: 创建美丽的词云图 jQCloudjQuery plugin for drawing neat word clouds that actually look like clouds项目地址:https://gitcode.com/gh_mirrors/jq/jQCloud 是一个基于 jQuery 的轻量级插件，用于生成可自定义的词云图。它是开源的、易于使用的，并且可以在多种场景...
JQCloud标签云、词云展示
小菜鸟的HelloWorld
03-02 3448
一、展示效果 二、代码展示 index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;词云&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&am
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值