有关词云的使用总结

近期在项目里，有需要进行关键词的词云展示需求，在使用的过程中，遇到一些问题以及解决办法，仅做一下记录：

1.echart使用词云（暂时放弃）

因为项目里大部分用的都是echart的统计图表，因此优先查询echart词云的使用，并且找到

使用地址在：https://github.com/ecomfe/echarts-wordcloud

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="./wordCloud_files/echarts.simple.js.下载"></script>
        <script src="./wordCloud_files/echarts-wordcloud.js.下载"></script>
<!--不能包含echarts.js,一旦包含就会报错，缺少组件，但是对于日常开发来说，不可能仅使用词云，因此暂时舍弃，读者如果任务并不紧急，可以研究一下为什么，沟通一下--->
		<!--<script src="./wordCloud_files/echarts.js"></script>-->
		
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <div id="main" ></div>
        <script>
            var chart = echarts.init(document.getElementById('main'));

            var option = {
                tooltip: {},
                series: [ {
                    type: 'wordCloud',
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                    width: 600,
                    height: 400,
                    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: [
                        
                        {
                            name: 'Macys',
                            value: 6181
                        },
                        {
                            name: 'Amy Schumer',
                            value: 4386
                        },
                        {
                            name: 'Point Break',
                            value: 265
                        }
                    ]
                } ]
            };

            chart.setOption(option);

        </script>
    
</body>	
</html>

效果如图：