echarts之詞雲隨機顏色的配置

echarts中的詞雲字體產生隨機顏色,最主演的是要引入worldcloud.js,另外還要有jquery.js文件與echarts.js文件的引入,經過配置便可實現詞雲隨機顏色的產生。下面爲你們介紹兩種隨機顏色的方法。javascript

world.htmlhtml

<!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.jsjava

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)第一種隨機效果:jquery

    上述代碼打印出的結果以下,即同一個詞雲中每一個字體的顏色都是隨機不一樣的echarts

 

(2)第二種隨機效果:dom

    將worldData.js中的第一個textStyle註釋掉(即註釋一上方的textStyle),將「註釋一」釋放開,打印出的結果以下字體

 

第一次刷新頁面詞雲圖:spa




第二次刷新頁面詞雲圖:



  由上能夠看出這種方法產生的隨機色是整個詞雲全部的詞的顏色是一致的。code

 

 

備註:然而,註釋掉worldData.js中的前兩個textStyle,釋放開「註釋二」,按理說其代碼配置與方法(1)等同,然而其顯示效果與方法(2)是同樣的,你們注意下。orm

相關文章
相關標籤/搜索