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. Egret index.html设置

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  2. ReadTeacherObj

    package JBJADV003;import java.io.*;public class ReadTeacherObj { /** * @param args */ public static ...

  3. Java虚拟机：内存模型详解

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 我们都知道,当虚拟机执行Java代码的时候,首先要把字节码文件加载到内存,那么这些类的信息都存放在内存中的哪个区域呢?当我们创建一个对象实 ...

  4. js实现单张图片（或者多张）的预览功能

      这个是预览单张图片的,如果要预览多张图片,改下面红色标记的地方就好了 <html> <head> <meta http-equiv="Content-Typ ...

  5. jvm学习006 jvm内存结构分配

    主要内容如下: JVM启动流程 JVM基本结构 内存模型 编译和解释运行的概念 一.JVM启动流程: JVM启动时,是由java命令/javaw命令来启动的. 二.JVM基本结构: JVM基本结构图: ...

  6. language-detection 语言检测工具 java版的应用demo

    本文基本借鉴大佬文章:http://www.cnblogs.com/makemelaugh/archive/2012/09/26/2704802.html 在此基础上添加一些自己的补充,方便查阅. 提 ...

  7. Ambari安装之安装并配置Ambari-server（三）

    前期博客  Ambari安装之部署本地库(镜像服务器)(二) 安装并配置Ambari-server (1)检查仓库是否可用 [hadoop@ambari01 yum.repos.d]$ pwd /et ...

  8. 导出EXCEL遇到问题

    EXCEL设置的格式要与写入信息的格式要匹配,比如写入信息是字符串类型,而EXCEL单元格是DATE类型则会出错.

  9. SetConsoleTitle 函数--设置控制台窗口标题

    SetConsoleTitle函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686050(v=vs.85).aspx ...

  10. margin属性的正负值确定

    margin属性用来使用设置外边距,大多数情况使用正值,但是一些稍复杂的定位就会使用到负值,所以对margin属性的正负值理解是有必要的,本文同时解释了margin-right和margin-bott ...