使用echarts词云

参考：
echarts-wordcloud.min.js引入
option参考

1. 引入
   

<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/js/echarts/echarts-wordcloud.min.js"></script>

2. 定义一个div

<div id="hitRankingWords" style="width: 630px;height:300px;float: left;">

3. 写入

getHitRankingWords(){
                var myChart = echarts.init(document.getElementById('hitRankingWords'));

                option = {
                    title: {
                        text: '词云',//标题
                        x: 'center',
                        textStyle: {
                            fontSize: 23
                        }

                    },
                    backgroundColor: '#F7F7F7',
                    tooltip: {
                        show: true
                    },
                    series: [{
                        name: '热点分析',//数据提示窗标题
                        type: 'wordCloud',
                        sizeRange: [6, 66],//画布范围，如果设置太大会出现少词（溢出屏幕）
                        rotationRange: [-45, 90],//数据翻转范围
                        //shape: 'circle',
                        textPadding: 0,
                        autoSize: {
                            enable: true,
                            minSize: 6
                        },
                        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: [
                            {
                            "name": "汽车",
                            "value": 928
                            },
                            {
                                "name": "视频",
                                "value": 906
                            },
                            {
                                "name": "电视",
                                "value": 825
                            },
                            {
                                "name": "Lover Boy 88",
                                "value": 514
                            },
                            {
                                "name": "动漫",
                                "value": 486
                            },
                            {
                                "name": "音乐",
                                "value": 53
                            },
                            {
                                "name": "直播",
                                "value": 163
                            },
                            {
                                "name": "广播电台",
                                "value": 86
                            },
                            {
                                "name": "戏曲曲艺",
                                "value": 17
                            },
                            {
                                "name": "演出票务",
                                "value": 6
                            },
                            {
                                "name": "给陌生的你听",
                                "value": 1
                            },
                            {
                                "name": "资讯",
                                "value": 1437
                            },
                            {
                                "name": "商业财经",
                                "value": 422
                            },
                            {
                                "name": "娱乐八卦",
                                "value": 353
                            },
                            {
                                "name": "军事",
                                "value": 331
                            },
                            {
                                "name": "科技资讯",
                                "value": 313
                            },
                            {
                                "name": "社会时政",
                                "value": 307
                            },
                            {
                                "name": "时尚",
                                "value": 43
                            },
                            {
                                "name": "网络奇闻",
                                "value": 15
                            },
                            {
                                "name": "旅游出行",
                                "value": 438
                            },
                            {
                                "name": "景点类型",
                                "value": 957
                            },
                            {
                                "name": "国内游",
                                "value": 927
                            },
                            {
                                "name": "远途出行方式",
                                "value": 908
                            }]
                    }]
                };

                myChart.setOption(option);

            },

4. 效果