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. Spring MVC 项目搭建 -1- 创建项目

    Spring MVC 项目搭建 -1- 创建项目 1.创建 Dynamic Web project (SpringDemo),添加相关jar包 2.创建一个简单的controller类 package ...

  2. C#设置WebBrowser默认浏览器

    由于VS的WebBrowser控件的默认浏览器是IE7,好多网页兼容性不是很好,所以要修改下默认浏览器. 设置前: 设置后:    在WebBrowser界面加载时执行以下方法,设置浏览器. /// ...

  3. echarts的部署和使用

    echarts是百度开发的一款商业级.开源免费的前端图表组件,具体可访问其主页:http://echarts.baidu.com/ echarts目前已经发布了2.0版本,使用起来非常的方便,并且效果 ...

  4. geotrellis使用（二十九）迁移geotrellis至1.1.1版

    目录 前言 升级过程 总结 一.前言        由于忙着安装OpenStack等等各种事情,有半年的时间没有再亲密的接触geotrellis,甚至有半年的时间没能畅快的写代码.近来OpenStac ...

  5. Java自学手记——多态

    对象转型 学习多态前先明白一个叫对象转型的概念,如: class Animal{ void sleep(){ System.out.println("睡觉"); } } class ...

  6. Unreal Engine 4（虚幻UE4） GameplayAbilities插件入门教程（一）

    本文系笔者的实习生分享会内容预备兼GameplayAbilities的初学者教程. 本文适合已有四十天UE4开发经验的初学者. 参考资料:https://wiki.unrealengine.com/G ...

  7. Android hook神器frida（一）

    运行环境 ● Python – latest 3.x is highly recommended ● Windows, macOS, or Linux安装方法使用命令 sudo pip install ...

  8. ES6简介

    function fn(){ return 100; } let name='sui'; let age=19; let sui={ name, age, ["pro"+fn()] ...

  9. Vulkan Tutorial 29 Loading models

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 应用程序现在已经可以渲染纹理3D模型,但是 vertice ...

  10. docker~通过vs2017的Dockerfile来生成镜像

    回到目录 Dockerfile这个东西我们之前是介绍过,它方便,快捷,易用,而在vs2017中也对docker进行了支持,而生成docker image的方式就是有用Dockerfile为基础的,在添 ...