使用echarts词云

妖狐艹你老母 2023-07-13 04:13 16阅读 0赞

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

1.  引入  
    ![在这里插入图片描述][20200310162227358.png]

1.  定义一个div

1.  写入

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);
    
                },

1.  效果![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]

[echarts-wordcloud.min.js]: https://blog.csdn.net/Javauthor/article/details/82912108
[option]: https://blog.csdn.net/ssjdoudou/article/details/104198546?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
[20200310162227358.png]: https://img-blog.csdnimg.cn/20200310162227358.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200310162546917.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0,size_16,color_FFFFFF,t_70