master

分支 (1)

管理

管理

master

wordcloudecharts
/
点我生成云词图.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="echarts.min.js"></script>
<script src="worldcloud.js"></script>
<script>
    //传入echarts中的data
   var dataList=[];
    //初始词的大小
   var initVal=9999
    //添加一个数据
    function setData(){
       dataList=[];
        //所有页面输入的词
       var words=document.getElementById('wordTexts').value;
        //按行分割成数组
       var wordsArr = words.split("\n")
        for(var i=0;i<wordsArr.length;i++){
           var word=wordsArr[i];
           //每次生成的词大小降低30%
            initVal=initVal*0.7
            //数据封装到json对象，添加到list中
            var appendData ={
                name: word,
                value: initVal,
                itemStyle: createRandomItemStyle()
            }
        dataList.push(appendData)
        }

    world_cloud(dataList);

    }

//随机生成词的颜色
function createRandomItemStyle() {
    return {
        normal: {
            color: 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
            ].join(',') + ')'
        }
    };
}
//生成词图
function world_cloud(dataList) {
    var myChart = echarts.init(document.getElementById('wordCloudChart'));
    var option = {
        tooltip: {},
        series: [{
            type: 'wordCloud',
            shape: 'smooth',
            gridSize: 2,
            sizeRange: [50, 100],
            rotationRange: [46, 80],
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb('
                            + [Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)]
                                .join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: dataList
        }]
    }
    myChart.setOption(option);
}
</script>


</head>
<body>

<textarea id="wordTexts" style="width:400px;height:400px"  >

</textarea>
<a href="javascript:setData()" >生成</a>
<a title="由大到小依次输入要生成云图的词 每个词之间回车换行 点击生成">说明</a>

    <!-- 生成的云图div -->
    <div id="wordCloudChart" style="width: 1400px;height:600px;"></div>


</body>
</html>