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. 自定义事件解决重复请求BUG

    现在,组件化开发还是比较流行的,毕竟其优点相当突出.最近在开发一个组件的时候,遇到了一个很有意思的BUG... BUG的背景 最近在开发一个组件,好不容易开发好了转测试.然后,测试给我提了一个这样的b ...

  2. 进击的AssetBundles和它的工具们

    0x00 前言 周末的时候在家看了下去年的Unite16 LA的视频.其中一个session很有趣,是AssetBundles开发团队Reichert的一个"总结过往,畅想未来"的 ...

  3. Maven部署（linux）

    1.下载 进入http://maven.apache.org/download.cgi下载.或者使用wget命令. mkdir /opt/maven cd /opt/maven wget http:/ ...

  4. Java探秘之神秘的字符串String(二)

    不可变性 String可以说是最常用的类型了,即字符串类型,String是常量(final关键词修饰的),他的值不能被创建后更改,因为字符串是不可被改变的,所以可以被用来共享. Java语言为Stri ...

  5. <经验杂谈>Mysql中字符串处理的几种处理方法concat、concat_ws、group_concat

    Mysql中字符串处理的几种处理方法concat.concat_ws.group_concat以下详情: MySQL中concat函数使用方法:CONCAT(str1,str2,-) 返回结果为连接参 ...

  6. css动画属性--小球移动

    主体只有一个div <body> <div></div> </body> 样式部分(测试:目前的浏览器还是需要加前缀才能兼容) <style> ...

  7. iOS 图文并茂的带你了解深拷贝与浅拷贝

    一.概念与总结 1.浅拷贝 浅拷贝就是对内存地址的复制,让目标对象指针和源对象指向同一片内存空间,当内存销毁的时候,指向这片内存的几个指针需要重新定义才可以使用,要不然会成为野指针. 浅拷贝就是拷贝指 ...

  8. 游戏里的动态阴影-ShadowMap实现原理

    ShadowMap是比较流行的实时阴影实现方案,原理比较简单,但真正实现起来还是会遇到很多问题的,我这里主要记录下实现方式 先看效果 凹凸地形上也有阴影 实现原理 ShadowMap技术是从灯光空间用 ...

  9. 关于EasyUI中DataGrid控件的一些使用方法总结

    一,DataGrid         控件的工作流程 1,通过JavaScript将一个空白的div美化成一个空白的Datagrid模板 2,Datagrid模板通过制定的Url发送请求,获取数据   ...

  10. 【整理】01. jQuery.Form.js 用法分析

    前言: 为什么使用JQuery.From.js,因为原生<form>表单没有回调函数,不过可以通过jquery-form.js这个插件来实现回调函数. jQuery.form.js是一个f ...