用echarts3和worldcloud製作炫酷的字元雲圖
阿新 • • 發佈：2019-02-10
最近有個專案需要做出雲圖來，一開始還不知道雲圖是什麼鬼，直到需求在網上找了個圖我才恍然大悟，但是大悟完就開始一臉懵逼了，這玩意怎麼做？因為當時專案緊，專案經理就先叫我用photoshop畫了一個雲圖給貼上了~~最近聽同事說echart也可以實現的，就又去煩了好大一會兒，才發現echarts3的例子中並沒有雲圖的例子，只有echarts2中有，然後試著把2中的程式碼弄到3下面，果然不出所料的報錯了，於是就上網找方法，網上給出的解釋是得引入一個worldcloud.js檔案。下面就不廢話直接上程式碼了~
上面有詳細的註釋，我也不多廢話了，主要要注意的還是json資料的格式，今天寫的時候老是請求不成功，網上看了各種方法都試了還是不行，最後去百度搜json找線上解析的網站上校驗才發現我的json格式寫錯了，多加了一個逗號，浪費我了一個多小時的時間，哎~~看著落日又想起了我在夕陽下的奔跑，那是我失去的青春~~哈哈，下面是我寫的json檔案，各位要引以為戒呀。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery.min.js"></script> <script src="js/echarts.js"></script> <script src="js/worldcloud.js"></script> </head> <body> <div id="main" style="width:600px;height:400px;"></div> <script> $(function(){ echartsCloud();//初始化echarts圖 }) function echartsCloud(){ // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: 'echarts3雲圖展示' }, tooltip: {}, series: [{ type : 'wordCloud', //型別為字元雲 shape:'smooth', //平滑 gridSize : 2, //網格尺寸 size : ['80%','80%'], //sizeRange : [ 50, 100 ], rotationRange : [ 46, 80 ], //旋轉範圍 textStyle : { normal : { fontFamily:'sans-serif', color : function() { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ] .join(',') + ')'; } }, emphasis : { shadowBlur : 5, //陰影距離 shadowColor : '#333' //陰影顏色 } }, data:[], }] }); // 非同步載入資料 $.get('./cloud.json').done(function (data) { // 填入資料 myChart.setOption({ series: [{ data: data.dataCloud }] }); }); } </script> </body> </html>
{ "dataCloud":[ {"name": "雲圖","value": "200"}, {"name": "是個啥","value": "156"}, {"name": "他啥都不是","value": "122"}, {"name": "就是他呆子","value": "119"}, {"name": "傻子和瘋子","value": "108"}, {"name": "營養快線","value": "101"}, {"name": "哈哈哈到家","value": "96"}, {"name": "瑞士軍刀","value": "84"}, {"name": "DW情侶對錶","value": "58"}, {"name": "清風抽紙","value": "55"}, {"name": "OPPO R9S","value": "46"}, {"name": "這一刻更清晰","value": "28"}, {"name": "呵呵舊宮style","value": "27"}, {"name": "債券評級","value": "26"},] }
各位看官看到這可別急著複製貼上，因為這個json是錯誤的！！知道錯誤在哪麼？就是因為債券評級花括號後面、中括號前面的逗號~~最後一個逗號一定要去掉，否則ajax會獲取不到json檔案中的資料喲。。。而且這裡還有一個要注意的就是value值一定要按照從大到小的順序來寫，否則你會發現你的name和value會不對照~~
剛剛又發現個問題就是要注意我上面引入js檔案的引入順序，一定要吧worldcloud.js放在echarts後面引入，否則會報錯。
最後把演示地址給你們貼上：http://webmq.cn/echartsCloud/2-1.html下載地址是：http://webmq.cn/echartscloudzip.zip