echarts 实现词云效果(worldcloud)

工作中需要展示一些节目名的频次分布，思考后决定使用词云这种形式。而现在echarts官网示例中已经找不到worldcloud的示例了，网上找到的基本也不能使用，最后还是从git上找到可以使用的，记录一下。

词云效果

会将所有传出的词按照频次越高字体越大这种形式展现，一目了然。

代码展示

引入指定worldcloud和echarts文件

	<script src='./echarts.simple.js'></script>
    <script src='./echarts-wordcloud.js'></script>

worldcloud实现

   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,
           drawOutOfBound: true,
           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: data
       } ]
   };

   chart.setOption(option);

   window.onresize = chart.resize;

示例demo下载地址

demo下载地址

git地址

echarts-worldcloud girhub地址