echarts之词云随机颜色的配置
echarts中的词云字体产生随机颜色，最主演的是要引入worldcloud.js，另外还要有jquery.js文件与echarts.js文件的引入，通过配置即可实现词云随机颜色的产生。下面为大家介绍两种随机颜色的方法。
world.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id = "worldDiv" style="width:80%;height:350px;margin:80px auto;background-color: #ccc;border:2px solid #ccc"></div>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="worldcloud.js"></script>
<script type="text/javascript" src="worldData.js"></script> </body>
</html>
worldData.js
var dataCloud = {
"cloudData":
[
{"name":"澎湃","value":"25"},
{"name":" 暴晒","value":" 14"},
{"name":" 套件","value":"13"},
{"name":" 有","value":" 24"},
{"name":" 驾驶","value":" 30"},
{"name":" 满满","value":" 1"},
{"name":" 行驶","value":" 2"},
{"name":" 强烈","value":"3"},
{"name":" 轻盈","value":"8"},
{"name":" 沉稳","value":"5"},
{"name":" 1800公里","value":" 1"},
{"name":" 低","value":" 2"},
{"name":" 双","value":" 18"},
{"name":" 前后","value":" 18"},
{"name":" 跑车","value":" 1"},
{"name":" 互联","value":" 22"},
{"name":" 哪","value":" 23"},
{"name":" 说","value":" 31"},
{"name":" 全面","value":" 15"},
{"name":" 搞定","value":" 12"}
],
"cloudDiv":"worldDiv"
};
var createRandomItemStyle1 = function (params) { //此方法与下方配置中的第一个textStle下的color等同
var colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
return colors[parseInt(Math.random() * 10)];
}
var createRandomItemStyle2 = function () {
var colorArr = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
var flag = parseInt(Math.random() * 10);
return {
normal: {
fontFamily: '微软雅黑',
color:colorArr[flag]
}
};
}
function _setWordCloud (cloudData) {
var option = {
series: [
{
type: 'wordCloud',
shape: 'ellipse',
gridSize: 8,
textStyle: {
normal: {
fontFamily: '微软雅黑',
color: function () {
var colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
return colors[parseInt(Math.random() * 10)];
}
}
},
/*注释一：*/
// textStyle:createRandomItemStyle2(),
/*注释二：*/
/*textStyle: {
normal: {
fontFamily: '微软雅黑',
color: createRandomItemStyle1()
}
},*/
data: cloudData
}
]
};
return option;
};
//词云图初始化
function initWordCloud(wordCloudData) {
var option = _setWordCloud(wordCloudData.cloudData);
var myChart = echarts.init(document.getElementById(wordCloudData.cloudDiv));
myChart.setOption(option);
}
initWordCloud(dataCloud);
（1）第一种随机效果：
上述代码打印出的结果如下，即同一个词云中每个字体的颜色都是随机不同的
（2）第二种随机效果：
将worldData.js中的第一个textStyle注释掉（即注释一上方的textStyle），将“注释一”释放开，打印出的结果如下
第一次刷新页面词云图：
第二次刷新页面词云图：
由上可以看出这种方法产生的随机色是整个词云所有的词的颜色是一致的。
备注：然而，注释掉worldData.js中的前两个textStyle，释放开“注释二”，按理说其代码配置与方法（1）等同，然而其显示效果与方法（2）是一样的，大家注意下。
echarts之词云随机颜色的配置的更多相关文章
- 已知词频生成词云图（数据库到生成词云）--generate_from_frequencies（WordCloud）
词云图是根据词出现的频率生成词云,词的字体大小表现了其频率大小. 写在前面: 用wc.generate(text)直接生成词频的方法使用很多,所以不再赘述. 但是对于根据generate_from_f ...
- Python 情人节超强技能 导出微信聊天记录生成词云
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: Python实用宝典 PS:如有需要Python学习资料的小伙伴可 ...
- 做词云时报错cannot import name ‘WordCloud‘ from partially initialized module ‘wordcloud‘的解决办法
问题: 在做词云时,运行时出现该问题,wordcloud安装成功,但运行出错,错误提示是:cannot import name 'WordCloud' from partially initializ ...
- echarts词云引用
最近项目中需要使用echarts的词云图,因为几经波折才引用成功,所以想记下来跟大家分享,(我的随笔不会写那么多让人需要动脑子去理解的东西,就是记录一下步骤,因为经验甚少,底层原理懂得不多,所以就先记 ...
- ECharts大屏可视化【词云，堆积柱状图，折线图，南丁格尔玫瑰图】
一.简介 参考ECharts快速入门:https://www.cnblogs.com/yszd/p/11166048.html 二.代码实现 <!DOCTYPE html> <htm ...
- 纯前端实现词云展示+附微博热搜词云Demo代码
前言 最近工作中做了几个数据可视化大屏项目,其中也有用到了词云展示,以前做词云都是用python库来生成图片显示的,这次用了纯前端的实现(Ctrl+V真好用),同时顺手做个微博热搜的词云然后记录一下~ ...
- 爬虫之绘图matplotlib与词云(七)
1 绘制条形图 import matplotlib # 数据可视化 from matplotlib import pyplot as plt # 配置字体 matplotlib.rcParams[&q ...
- python使用matplotlib画图,jieba分词、词云、selenuium、图片、音频、视频、文字识别、人脸识别
一.使用matplotlib画图 关注公众号"轻松学编程"了解更多. 使用matplotlib画柱形图 import matplotlib from matplotlib impo ...
- R语言之词云：wordcloud&wordcloud2安装及参数说明
一.wordcloud安装说明 install.packages("wordcloud"); 二.wordcloud2安装说明 install.packages("dev ...
随机推荐
- winform制作小工具的技巧
在使用winfrom制作一些工具的时候,一些基本设置都是去属性里面找来找去,一段时间就忘了,记录记录以备不时之需. 一.窗体绘制的常用设置 窗体的设置应当在窗体构造函数中InitializeCompo ...
- （转载）oracle的v$sqlarea表
原文摘自:http: [V$SQLAREA] 本视图持续跟踪所有shared pool中的共享cursor,在shared pool中的每一条SQL语句都对应一列.本视图在分析SQL语句资源使用方面 ...
- raft如何实现Linearizable Read
Linearizable Read通俗来讲,就是读请求需要读到最新的已经commit的数据,不会读到老数据. 对于使用raft协议来保证多副本强一致的系统中,读写请求都可以通过走一次raft协议来满足 ...
- 利用VNC远程登录Linux服务器简易版
我负责管理实验室的一台服务器,安装的系统是CentOS 6.7.使用pietty远程登录服务器(命令行) 需求:使实验室的同学和老师使用RealVNC远程登录服务器. 一,首先检查一下服务器是否安装V ...
- Python爬虫从入门到放弃（十四）之 Scrapy框架中选择器的用法
Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分Xpath是专门在XML文件中选择节点的语言,也可以用在HTM ...
- memcache缓存安装配置
memcache是高性能,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度.目前用memcache解决互联网上的大用户读取是非常流行的一种用法. 下载安装 前提要先安装libev ...
- 解决IE8下不支持document.getElementsByClassName的方法
在代码前面加如下代码: if (!document.getElementsByClassName) { document.getElementsByClassName = function (clas ...
- python的数据类型及操作
简述python的几种简单的数据类型及使用方式 字符串 字符串是不可变数据类型,拥有多种内置方法可以操作. 创建字符串就是给变量分配一个字符串的值即可.通常用引号创建字符串. tell = 'my n ...
- 【转载】Android 开发 命名规范
原文地址:http://www.cnblogs.com/ycxyyzw/p/4103284.html 标识符命名法标识符命名法最要有四种: 1 驼峰(Camel)命名法:又称小驼峰命名法,除首单词外, ...
- 文本三剑客---sed 基础
sed编辑器被称作流编辑器(stream editor),和普通的交互式文本编辑器恰好相反.在交互式文本编辑器中(比如vim),你可以用键盘命令来交互式的插入.删除或者替换数据中的文本.流编辑器则会自 ...