词云 js2wordcloud.js

卑微小钟

72055人浏览 · 2021-06-02 10:24:20

卑微小钟 · 2021-06-02 10:24:20 发布

词云

一、简介

“词云”拼音是cí yún，由美国西北大学新闻学副教授、新媒体专业主任里奇·戈登（Rich Gordon）于2006年最先使用。戈登做过编辑、记者，曾担任迈阿密先驱报（Miami Herald）新媒体版的主任。他一直很关注网络内容发布的最新形式——即那些只有互联网可以采用而报纸、广播、电视等其它媒体都望尘莫及的传播方式。通常，这些最新的、最适合网络的传播方式，也是最好的传播方式。因此，“词云”就是通过形成“关键词云层”或“关键词渲染”，对网络文本中出现频率较高的“关键词”的视觉上的突出。

目前前端生成词云常见方式有两种

# wordcloud2.js
//第一种是采用wordcloud2.js进行渲染，具体的参考GitHub
//GitHub：https://github.com/timdream/wordcloud2.js
# js2wordcloud.js
//基于wordcloud2.js
//由于wordcloud2.js渲染容易造成字符重叠的问题，js2wordcloud.js进行二次完善，所以一般会采用js2wordcloud.js进行渲染
//GitHub：https://github.com/liangbizhi/js2wordcloud

二、安装

通过script标签引入：

<script src="dist/js2wordcloud.min.js"></script>
或
<script src="https://static.delebug.com/echarts/js2wordcloud.js"></script>

npm安装：

npm install js2wordcloud --save

三、使用与Demo

<script src="https://static.delebug.com/echarts/js2wordcloud.js"></script>
<div id="main" style="width: 400px;height: 400px;"></div>
<script>
    var wc = new Js2WordCloud(document.getElementById('main'))
    wordFreqData =[['建筑', 36341], ['建材', 36341], ['工程', 36341], ['生物工程', 36075], ['制药', 36075], ['房地产', 35683], ['快速消费品', 35201], ['重工', 33120], ['设备', 33120], ['机械', 33120], ['院校',29208], ['教育', 29208], ['培训', 29208], ['电子商务', 28047], ['互联网', 28047], ['计算机软件', 27370], ['集成电路', 27066], ['电子技术', 27066], ['半导体', 27066], ['汽车', 18948], ['专业服务', 16932], ['器械', 15413], ['医疗设备', 15413], ['进出口', 15017], ['贸易', 15017], ['运输', 13830], ['物流', 13830], ['交通', 13830], ['零售', 11493], ['批发', 11493], ['矿产', 10738], ['石油', 10738], ['地质', 10738], ['化工', 10738], ['工业自动化', 10381], ['仪器仪表', 10381], ['金融', 10273], ['证券', 10273], ['投资', 10273], ['物业管理', 9991], ['商业中心', 9991], ['纺织',9974], ['皮革', 9974], ['服装', 9974], ['多元化业务集团公司', 9458], ['通信', 9382], ['新能源', 9193], ['原材料和加工', 8634], ['礼品', 8367], ['玩具', 8367], ['家电', 8367], ['家具', 8367],['环保', 8124], ['护理', 7468], ['卫生', 7468], ['医疗', 7468], ['牧', 6917], ['渔', 6917], ['林', 6917], ['农', 6917], ['网络设备', 6439], ['电信', 6439], ['电气', 5588], ['电力', 5588], ['水利', 5588], ['艺术', 5465], ['文化传播', 5465], ['影视', 5465], ['媒体', 5465], ['装潢', 5094], ['家居', 5094], ['室内设计', 5094], ['餐饮业', 4668], ['计算机服务', 4657], ['酒店', 4352], ['旅游', 4352], ['保险', 3993], ['检测，认证', 3135], ['电信运营、增值服务', 2943], ['造纸', 2856], ['印刷', 2856], ['包装', 2856], ['汽车零配件', 2824], ['银行', 2354], ['计算机硬件', 1888], ['珠宝', 1870], ['收藏品', 1870], ['工艺品', 1870], ['奢侈品', 1870], ['娱乐', 1777], ['体育', 1777], ['休闲', 1777], ['广告', 1745], ['生活服务', 1621], ['美容', 1436], ['保健', 1436], ['政府', 1418], ['公共事业', 1418], ['科研', 1403], ['学术', 1403], ['中介服务', 1279], ['外包服务', 1251], ['办公用品及设备', 1208], ['审计', 1075], ['会计', 1075], ['航空', 965], ['航天', 965], ['法律', 949], ['文字媒体', 807], ['出版', 807], ['市场推广', 761], ['公关', 761], ['会展', 761], ['网络游戏', 639], ['采掘业', 607], ['冶炼', 607], ['租赁服务', 449], ['非营利组织', 289], ['拍卖',179], ['担保', 179], ['典当', 179], ['信托', 179]]
    option = {
        //https://ecomfe.github.io/echarts-wordcloud/example/logo.png
        //imageShape:'https://ecomfe.github.io/echarts-wordcloud/example/logo.png',
        tooltip: {
            show: true,
        },
        list: wordFreqData,
        fontSizeFactor:10,
        maxFontSize: 40, //最大字号
        minFontSize: 8, //最小字号
        color: 'random-light',//random-light/random-dark
        backgroundColor: '#333', // 背景颜色
        rotateRatio: 1 // 字体倾斜(旋转)概率，1代表总是倾斜(旋转)
    }
    wc.setOption(option)
</script>