echarts實(shí)現(xiàn)詞云自定義形狀的示例代碼
更新時(shí)間：2019年02月20日 10:03:12 作者：小靜仔
這篇文章主要介紹了echarts實(shí)現(xiàn)詞云自定義形狀的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
安裝
npm install echarts npm install echarts-wordcloud
詞云安裝官網(wǎng) https://github.com/ecomfe/echarts-wordcloud
下面是一個(gè)小鳥(niǎo)形狀的詞云，可以在iconfont中下載（最好是填充的）圖案，轉(zhuǎn)為base64，就可以用來(lái)生成有圖案的詞云了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WordCloud Demo</title>
<script type="text/javascript" src="./echarts.js"></script>
<script type="text/javascript" src="./echarts-wordcloud.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px"></div>
<script>
onload = function () {
var data = {
value: [{
"name": "花鳥(niǎo)市場(chǎng)",
"value": 1446
},
{
"name": "汽車(chē)",
"value": 928
},
{
"name": "視頻",
"value": 906
},
{
"name": "電視",
"value": 825
},
{
"name": "Lover Boy 88",
"value": 514
},
{
"name": "動(dòng)漫",
"value": 486
},
{
"name": "音樂(lè)",
"value": 53
},
{
"name": "直播",
"value": 163
},
{
"name": "廣播電臺(tái)",
"value": 86
},
{
"name": "戲曲曲藝",
"value": 17
},
{
"name": "演出票務(wù)",
"value": 6
},
{
"name": "給陌生的你聽(tīng)",
"value": 1
},
{
"name": "資訊",
"value": 1437
},
{
"name": "商業(yè)財(cái)經(jīng)",
"value": 422
},
{
"name": "娛樂(lè)八卦",
"value": 353
},
{
"name": "軍事",
"value": 331
},
{
"name": "科技資訊",
"value": 313
},
{
"name": "社會(huì)時(shí)政",
"value": 307
},
{
"name": "時(shí)尚",
"value": 43
},
{
"name": "網(wǎng)絡(luò)奇聞",
"value": 15
},
{
"name": "旅游出行",
"value": 438
},
{
"name": "景點(diǎn)類(lèi)型",
"value": 957
},
{
"name": "國(guó)內(nèi)游",
"value": 927
},
{
"name": "遠(yuǎn)途出行方式",
"value": 908
},
{
"name": "酒店",
"value": 693
},
{
"name": "關(guān)注景點(diǎn)",
"value": 611
},
{
"name": "旅游網(wǎng)站偏好",
"value": 512
},
{
"name": "出國(guó)游",
"value": 382
},
{
"name": "交通票務(wù)",
"value": 312
},
{
"name": "旅游方式",
"value": 187
},
{
"name": "旅游主題",
"value": 163
},
{
"name": "本地周邊游",
"value": 3
},
{
"name": "小賣(mài)家",
"value": 1331
},
{
"name": "全日制學(xué)校",
"value": 941
},
{
"name": "基礎(chǔ)教育科目",
"value": 585
},
{
"name": "考試培訓(xùn)",
"value": 473
},
{
"name": "語(yǔ)言學(xué)習(xí)",
"value": 358
},
{
"name": "留學(xué)",
"value": 246
},
{
"name": "K12課程培訓(xùn)",
"value": 207
},
{
"name": "藝術(shù)培訓(xùn)",
"value": 194
},
{
"name": "技能培訓(xùn)",
"value": 104
},
{
"name": "IT培訓(xùn)",
"value": 87
},
{
"name": "高等教育專(zhuān)業(yè)",
"value": 63
},
{
"name": "家教",
"value": 48
},
{
"name": "體育培訓(xùn)",
"value": 23
},
{
"name": "職場(chǎng)培訓(xùn)",
"value": 5
},
{
"name": "金融財(cái)經(jīng)",
"value": 1328
},
{
"name": "銀行",
"value": 765
},
{
"name": "股票",
"value": 452
},
{
"name": "保險(xiǎn)",
"value": 415
},
{
"name": "貸款",
"value": 253
},
{
"name": "基金",
"value": 211
},
{
"name": "信用卡",
"value": 180
},
{
"name": "外匯",
"value": 138
},
{
"name": "P2P",
"value": 116
},
{
"name": "貴金屬",
"value": 98
},
{
"name": "債券",
"value": 93
},
{
"name": "網(wǎng)絡(luò)理財(cái)",
"value": 92
},
{
"name": "信托",
"value": 90
},
{
"name": "征信",
"value": 76
},
{
"name": "期貨",
"value": 76
},
{
"name": "公積金",
"value": 40
},
{
"name": "銀行理財(cái)",
"value": 36
},
{
"name": "銀行業(yè)務(wù)",
"value": 30
},
{
"name": "典當(dāng)",
"value": 7
},
{
"name": "海外置業(yè)",
"value": 1
},
{
"name": "汽車(chē)",
"value": 1309
},
{
"name": "汽車(chē)檔次",
"value": 965
},
{
"name": "汽車(chē)品牌",
"value": 900
},
{
"name": "汽車(chē)車(chē)型",
"value": 727
},
{
"name": "購(gòu)車(chē)階段",
"value": 461
},
{
"name": "二手車(chē)",
"value": 309
},
{
"name": "汽車(chē)美容",
"value": 260
},
{
"name": "新能源汽車(chē)",
"value": 173
},
{
"name": "汽車(chē)維修",
"value": 155
},
{
"name": "租車(chē)服務(wù)",
"value": 136
},
{
"name": "車(chē)展",
"value": 121
},
{
"name": "違章查詢(xún)",
"value": 76
},
{
"name": "汽車(chē)改裝",
"value": 62
},
{
"name": "汽車(chē)用品",
"value": 37
},
{
"name": "路況查詢(xún)",
"value": 32
},
{
"name": "汽車(chē)保險(xiǎn)",
"value": 28
},
{
"name": "陪駕代駕",
"value": 4
},
{
"name": "網(wǎng)絡(luò)購(gòu)物",
"value": 1275
},
{
"name": "做我的貓",
"value": 1088
},
{
"name": "只想要你知道",
"value": 907
},
{
"name": "團(tuán)購(gòu)",
"value": 837
},
{
"name": "比價(jià)",
"value": 201
},
{
"name": "海淘",
"value": 195
},
{
"name": "移動(dòng)APP購(gòu)物",
"value": 179
},
{
"name": "支付方式",
"value": 119
},
{
"name": "代購(gòu)",
"value": 43
},
{
"name": "體育健身",
"value": 1234
},
{
"name": "體育賽事項(xiàng)目",
"value": 802
},
{
"name": "運(yùn)動(dòng)項(xiàng)目",
"value": 405
},
{
"name": "體育類(lèi)賽事",
"value": 337
},
{
"name": "健身項(xiàng)目",
"value": 199
},
{
"name": "健身房健身",
"value": 78
},
{
"name": "運(yùn)動(dòng)健身",
"value": 77
},
{
"name": "家庭健身",
"value": 36
},
{
"name": "健身器械",
"value": 29
},
{
"name": "辦公室健身",
"value": 3
},
{
"name": "商務(wù)服務(wù)",
"value": 1201
},
{
"name": "法律咨詢(xún)",
"value": 508
},
{
"name": "化工材料",
"value": 147
},
{
"name": "廣告服務(wù)",
"value": 125
},
{
"name": "會(huì)計(jì)審計(jì)",
"value": 115
},
{
"name": "人員招聘",
"value": 101
},
{
"name": "印刷打印",
"value": 66
},
{
"name": "知識(shí)產(chǎn)權(quán)",
"value": 32
},
{
"name": "翻譯",
"value": 22
},
{
"name": "安全安保",
"value": 9
},
{
"name": "公關(guān)服務(wù)",
"value": 8
},
{
"name": "商旅服務(wù)",
"value": 2
},
{
"name": "展會(huì)服務(wù)",
"value": 2
},
{
"name": "特許經(jīng)營(yíng)",
"value": 1
},
{
"name": "休閑愛(ài)好",
"value": 1169
},
{
"name": "收藏",
"value": 412
},
{
"name": "攝影",
"value": 393
},
{
"name": "溫泉",
"value": 230
},
{
"name": "美術(shù)",
"value": 207
},
{
"name": "書(shū)法",
"value": 139
},
{
"name": "DIY手工",
"value": 75
},
{
"name": "舞蹈",
"value": 23
},
{
"name": "釣魚(yú)",
"value": 21
},
{
"name": "棋牌桌游",
"value": 17
},
{
"name": "KTV",
"value": 6
},
{
"name": "密室",
"value": 5
},
{
"name": "采摘",
"value": 4
},
{
"name": "電玩",
"value": 1
},
{
"name": "真人CS",
"value": 1
},
{
"name": "轟趴",
"value": 1
},
{
"name": "家電數(shù)碼",
"value": 1111
},
{
"name": "手機(jī)",
"value": 885
},
{
"name": "電腦",
"value": 543
},
{
"name": "大家電",
"value": 321
},
{
"name": "家電關(guān)注品牌",
"value": 253
},
{
"name": "網(wǎng)絡(luò)設(shè)備",
"value": 162
},
{
"name": "攝影器材",
"value": 149
},
{
"name": "影音設(shè)備",
"value": 133
},
{
"name": "辦公數(shù)碼設(shè)備",
"value": 113
},
{
"name": "生活電器",
"value": 67
},
{
"name": "廚房電器",
"value": 54
},
{
"name": "智能設(shè)備",
"value": 45
},
{
"name": "個(gè)人護(hù)理電器",
"value": 22
},
{
"name": "服飾鞋包",
"value": 1047
},
{
"name": "服裝",
"value": 566
},
{
"name": "飾品",
"value": 289
},
{
"name": "鞋",
"value": 184
},
{
"name": "箱包",
"value": 168
},
{
"name": "奢侈品",
"value": 137
},
{
"name": "母嬰親子",
"value": 1041
},
{
"name": "孕嬰保健",
"value": 505
},
{
"name": "母嬰社區(qū)",
"value": 299
},
{
"name": "早教",
"value": 103
},
{
"name": "童車(chē)童床",
"value": 41
},
{
"name": "關(guān)注品牌",
"value": 271
},
{
"name": "寶寶玩樂(lè)",
"value": 30
},
{
"name": "母嬰護(hù)理服務(wù)",
"value": 25
},
{
"name": "紙尿褲濕巾",
"value": 16
},
{
"name": "寶寶起名",
"value": 12
},
{
"name": "童裝童鞋",
"value": 9
},
{
"name": "胎教",
"value": 8
},
{
"name": "寶寶安全",
"value": 1
},
{
"name": "寶寶洗護(hù)用品",
"value": 1
},
{
"name": "軟件應(yīng)用",
"value": 1018
},
{
"name": "系統(tǒng)工具",
"value": 896
},
{
"name": "理財(cái)購(gòu)物",
"value": 440
},
{
"name": "生活實(shí)用",
"value": 365
},
{
"name": "影音圖像",
"value": 256
},
{
"name": "社交通訊",
"value": 214
},
{
"name": "手機(jī)美化",
"value": 39
},
{
"name": "辦公學(xué)習(xí)",
"value": 28
},
{
"name": "應(yīng)用市場(chǎng)",
"value": 23
},
{
"name": "母嬰育兒",
"value": 14
},
{
"name": "游戲",
"value": 946
},
{
"name": "手機(jī)游戲",
"value": 565
},
{
"name": "PC游戲",
"value": 353
},
{
"name": "網(wǎng)頁(yè)游戲",
"value": 254
},
{
"name": "游戲機(jī)",
"value": 188
},
{
"name": "模擬輔助",
"value": 166
},
{
"name": "個(gè)護(hù)美容",
"value": 942
},
{
"name": "護(hù)膚品",
"value": 177
},
{
"name": "彩妝",
"value": 133
},
{
"name": "美發(fā)",
"value": 80
},
{
"name": "香水",
"value": 50
},
{
"name": "個(gè)人護(hù)理",
"value": 46
},
{
"name": "美甲",
"value": 26
},
{
"name": "SPA美體",
"value": 21
},
{
"name": "花鳥(niǎo)萌寵",
"value": 914
},
{
"name": "綠植花卉",
"value": 311
},
{
"name": "狗",
"value": 257
},
{
"name": "其他寵物",
"value": 131
},
{
"name": "水族",
"value": 125
},
{
"name": "貓",
"value": 122
},
{
"name": "動(dòng)物",
"value": 81
},
{
"name": "鳥(niǎo)",
"value": 67
},
{
"name": "寵物用品",
"value": 41
},
{
"name": "寵物服務(wù)",
"value": 26
},
{
"name": "書(shū)籍閱讀",
"value": 913
},
{
"name": "網(wǎng)絡(luò)小說(shuō)",
"value": 483
},
{
"name": "關(guān)注書(shū)籍",
"value": 128
},
{
"name": "文學(xué)",
"value": 105
},
{
"name": "報(bào)刊雜志",
"value": 77
},
{
"name": "人文社科",
"value": 22
},
{
"name": "建材家居",
"value": 907
},
{
"name": "裝修建材",
"value": 644
},
{
"name": "家具",
"value": 273
},
{
"name": "家居風(fēng)格",
"value": 187
},
{
"name": "家居家裝關(guān)注品牌",
"value": 140
},
{
"name": "家紡",
"value": 107
},
{
"name": "廚具",
"value": 47
},
{
"name": "燈具",
"value": 43
},
{
"name": "家居飾品",
"value": 29
},
{
"name": "家居日常用品",
"value": 10
},
{
"name": "生活服務(wù)",
"value": 883
},
{
"name": "物流配送",
"value": 536
},
{
"name": "家政服務(wù)",
"value": 108
},
{
"name": "攝影服務(wù)",
"value": 49
},
{
"name": "搬家服務(wù)",
"value": 38
},
{
"name": "物業(yè)維修",
"value": 37
},
{
"name": "婚慶服務(wù)",
"value": 24
},
{
"name": "二手回收",
"value": 24
},
{
"name": "鮮花配送",
"value": 3
},
{
"name": "維修服務(wù)",
"value": 3
},
{
"name": "殯葬服務(wù)",
"value": 1
},
{
"name": "求職創(chuàng)業(yè)",
"value": 874
},
{
"name": "創(chuàng)業(yè)",
"value": 363
},
{
"name": "目標(biāo)職位",
"value": 162
},
{
"name": "目標(biāo)行業(yè)",
"value": 50
},
{
"name": "兼職",
"value": 21
},
{
"name": "期望年薪",
"value": 20
},
{
"name": "實(shí)習(xí)",
"value": 16
},
{
"name": "雇主類(lèi)型",
"value": 10
},
{
"name": "星座運(yùn)勢(shì)",
"value": 789
},
{
"name": "星座",
"value": 316
},
{
"name": "算命",
"value": 303
},
{
"name": "解夢(mèng)",
"value": 196
},
{
"name": "面相分析",
"value": 47
},
{
"name": "手相",
"value": 32
},
{
"name": "公益",
"value": 90
}
],
//小鳥(niǎo)圖片
image: "data:image/png;base64,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"
}
var myChart = echarts.init(document.getElementById('main'));
//溫馨提示：image 選取有嚴(yán)格要求不可過(guò)大；，否則firefox不兼容 iconfont上面的圖標(biāo)可以
var maskImage = new Image();
maskImage.src = data.image
maskImage.onload = function(){
myChart.setOption( {
backgroundColor:'#fff',
tooltip: {
show: false
},
series: [{
type: 'wordCloud',
gridSize: 1,
sizeRange: [12, 55],
rotationRange: [-45, 0, 45, 90],
maskImage: maskImage,
textStyle: {
normal: {
color: function() {
return 'rgb(' +
Math.round(Math.random() * 255) +
', ' + Math.round(Math.random() * 255) +
', ' + Math.round(Math.random() * 255) + ')'
}
}
},
left: 'center',
top: 'center',
// width: '96%',
// height: '100%',
right: null,
bottom: null,
// width: 300,
// height: 200,
// top: 20,
data: data.value
}]
})
}
}
</script>
</body>
</html>
運(yùn)行效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于echarts提示框tooltip被遮擋的解決辦法, 在制作圖表中,發(fā)現(xiàn)有時(shí)候tooltip會(huì)被線(xiàn)條遮擋或者被柱子折線(xiàn)遮擋,這種情況會(huì)偶爾出現(xiàn),需要的朋友可以參考下2023-08-08
JS封裝通過(guò)className獲取元素的函數(shù)示例
這篇文章主要介紹了JS封裝通過(guò)className獲取元素的函數(shù),涉及javascript針對(duì)頁(yè)面元素屬性的遍歷與數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
JS模擬百度搜索框和選項(xiàng)卡的實(shí)現(xiàn)
本文主要介紹了JS模擬百度搜索框和選項(xiàng)卡的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
詳解JavaScript正則表達(dá)式之分組匹配及反向引用
這篇文章主要介紹了詳解JavaScript正則表達(dá)式之分組匹配及反向引用 的相關(guān)資料,需要的朋友可以參考下2016-03-03
iframe父子頁(yè)面實(shí)現(xiàn)共用滾動(dòng)條的常見(jiàn)方法
在開(kāi)發(fā)過(guò)程中,有時(shí)候需要用到iframe復(fù)用不同域名下的頁(yè)面內(nèi)容,為了提供連貫的用戶(hù)體驗(yàn),經(jīng)常需要在主頁(yè)面（父頁(yè)面）和iframe子頁(yè)面之間共享滾動(dòng)位置,本文將介紹其中較為常見(jiàn)的一種方法來(lái)實(shí)現(xiàn)iframe父子頁(yè)面共用滾動(dòng)條,需要的朋友可以參考下
2024-05-05 
js 遍歷json的方法有很多，在本文為大家詳細(xì)介紹下如何返回的map內(nèi)容，感興趣的朋友可以參考下
2013-10-10 
uni-app多環(huán)境配置實(shí)現(xiàn)自動(dòng)部署的方式詳解
前后端分離開(kāi)發(fā)模式中,無(wú)論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關(guān)于uni-app多環(huán)境配置實(shí)現(xiàn)自動(dòng)部署的相關(guān)資料,需要的朋友可以參考下
2022-06-06 
這篇文章主要介紹了Weex開(kāi)發(fā)之地圖篇的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10 
下面小編就為大家?guī)?lái)一篇js 事件的傳播機(jī)制(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07