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. golang的并发不等于并行

    先 看下面一道面试题: func main() { runtime.GOMAXPROCS(1) wg := sync.WaitGroup{} wg.Add(20) for i := 0; i < ...

  2. XML 新手入门基础知识（复制，留着自己看）

    如果您是 XML 新手,本文将为您介绍 XML 文档的基础结构,以及创建构造良好的 XML 需要遵循的规则,包括命名约定.正确的标记嵌套.属性规则.声明和实体.您还可以从本文了解到 DTD 和 sch ...

  3. 外部世界如何访问容器？ - 每天5分钟玩转 Docker 容器技术（37）

    上节我们学习了容器如何访问外部网络,今天讨论另一个方向:外部网络如何访问到容器? 答案是:端口映射. docker 可将容器对外提供服务的端口映射到 host 的某个端口,外网通过该端口访问容器.容器 ...

  4. 搭建nexus私服（maven）

    这里提供nexus的直接下载页面的链接: https://www.sonatype.com/download-oss-sonatype maven获取依赖jar包是从中央仓库获取,但很莫名的出现jar ...

  5. CSS三种引入方式：内联、页级、外联

    1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS ...

  6. javascript运动框架（三）

    迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关 ...

  7. tp框架为什么验证码加载不出来？----- ob_clean() 可解决

    在用tp做验证码时,代码逻辑都正确,但就是加载不出图片来,如何解决呢?在创建验证码之前加上 ob_clean(); public function haha(){ ob_clean(); $v = n ...

  8. Java编程思想总结笔记The first chapter

    总觉得书中太啰嗦,看完总结后方便日后回忆,本想偷懒网上找别人的总结,无奈找不到好的,只好自食其力,尽量总结得最好. 第一章  对象导论 看到对象导论觉得这本书 目录: 1.1 抽象过程1.2 每个对象 ...

  9. nodejs抓取网络图片转换为base64编码的图片

    抓取网络图片需要加载http模块 //假定这是index.js文件 var http = require('http'); var url = 'http://p0.meituan.net/tuanp ...

  10. AddBinary

    二进制加法 输入2个字符串,字符串内由0和1组成:计算二者之和,返回字符串 Given two binary strings, return their sum (also a binary stri ...