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之词云随机颜色的配置的更多相关文章

  1. 已知词频生成词云图（数据库到生成词云）--generate_from_frequencies（WordCloud）

    词云图是根据词出现的频率生成词云,词的字体大小表现了其频率大小. 写在前面: 用wc.generate(text)直接生成词频的方法使用很多,所以不再赘述. 但是对于根据generate_from_f ...

  2. Python 情人节超强技能 导出微信聊天记录生成词云

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: Python实用宝典 PS:如有需要Python学习资料的小伙伴可 ...

  3. 做词云时报错cannot import name ‘WordCloud‘ from partially initialized module ‘wordcloud‘的解决办法

    问题: 在做词云时,运行时出现该问题,wordcloud安装成功,但运行出错,错误提示是:cannot import name 'WordCloud' from partially initializ ...

  4. echarts词云引用

    最近项目中需要使用echarts的词云图,因为几经波折才引用成功,所以想记下来跟大家分享,(我的随笔不会写那么多让人需要动脑子去理解的东西,就是记录一下步骤,因为经验甚少,底层原理懂得不多,所以就先记 ...

  5. ECharts大屏可视化【词云，堆积柱状图，折线图，南丁格尔玫瑰图】

    一.简介 参考ECharts快速入门:https://www.cnblogs.com/yszd/p/11166048.html 二.代码实现 <!DOCTYPE html> <htm ...

  6. 纯前端实现词云展示+附微博热搜词云Demo代码

    前言 最近工作中做了几个数据可视化大屏项目,其中也有用到了词云展示,以前做词云都是用python库来生成图片显示的,这次用了纯前端的实现(Ctrl+V真好用),同时顺手做个微博热搜的词云然后记录一下~ ...

  7. 爬虫之绘图matplotlib与词云(七)

    1 绘制条形图 import matplotlib # 数据可视化 from matplotlib import pyplot as plt # 配置字体 matplotlib.rcParams[&q ...

  8. python使用matplotlib画图,jieba分词、词云、selenuium、图片、音频、视频、文字识别、人脸识别

    一.使用matplotlib画图 关注公众号"轻松学编程"了解更多. 使用matplotlib画柱形图 import matplotlib from matplotlib impo ...

  9. R语言之词云：wordcloud&wordcloud2安装及参数说明

    一.wordcloud安装说明 install.packages("wordcloud"); 二.wordcloud2安装说明 install.packages("dev ...

随机推荐

  1. JQuery实战——页面进度条效果

    今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...

  2. SQL SERVER 删除前判断指定的表或者存储过程是否存在

    1.创建存储过程: CREATE PROCEDURE proc_pr ---将create修改成alter可以修改存储过程: AS BEGIN IF EXISTS(SELECT * FROM syso ...

  3. Linux下mysql远程连接问题

    [旧博客转移 - 发布于2015年9月6日 18:42]   在Linux上装好Mysql后 发现远程客户端连接不上 出现这种情况是因为mysql服务器出于安全考虑,默认只允许本地登录数据库服务器. ...

  4. Python学习笔记——import模块

    OS模块 直接输出系统命令到屏幕,该方法获取的命令返回值不可被赋值给变量,输出结果受编码影响会乱码: import os os.system("ipconfig") 将执行获取的系 ...

  5. java 邮件发送工具类

    首先需要下载mail.jar文件,我个人通常是使用maven中心库的那个: <dependency> <groupId>javax.mail</groupId> & ...

  6. iOS实现Android中Gone的功能

    实现隐藏view但不占位置的需求是很常见的(Android里的view.GONE),可iOS里并没有这玩意,只有hidden.于是自己写了一个一般情况下用的category,特殊情况就得看情况做了.其 ...

  7. IScroll那些事——内容不足时下拉刷新

    之前项目中的列表是采用的IScroll,但是在使用IScroll有一个问题就是:当内容不足全屏的时候,是木有办法往下拉的,这样就达不到刷新的目的了.[这是本人工作中遇到的,具体例子具体分析,这里只作一 ...

  8. 将txt文档按行分割

    昨天遇到了一个需求,需要将txt文档按行分割,并指定了行数, 最近在用python,就在网上搜了一下,在参考了http://blog.csdn.net/zhang_red/article/detail ...

  9. Multimodal —— 看图说话（Image Caption）任务的论文笔记（一）评价指标和NIC模型

    看图说话(Image Caption)任务是结合CV和NLP两个领域的一种比较综合的任务,Image Caption模型的输入是一幅图像,输出是对该幅图像进行描述的一段文字.这项任务要求模型可以识别图 ...

  10. (转)HashMap深入原理解析

    [HashMap]深入原理解析 分类: 数据结构 自考 equals与“==”(可以参考自己的另一篇博文) 1,基本数据类型(byte,short,char,int,long,float,double ...