歡迎來到魔據教育大數據學院,專注大數據工程師培養!
當前位置:首頁 > 學習資料 > 講師博文 > Echarts字符云講解

Echarts字符云講解

時間:2017-08-17 17:15:31作者:[!--zuozhe--]

 

目標:
1.理解大數據可視化
2.什么是Echarts
3.什么是字符云
4.如何使用Echarts實現字符云
 
基礎:
需要有html基礎,JavaScript基礎
 
一、大數據可視化
數據可視化主要旨在借助于圖形化手段,清晰有效地傳達與溝通信息。但是,這并不就意味著數據可視化就一定因為要實現其功能用途而令人感到枯燥乏味,或者是為了看上去絢麗多彩而顯得極端復雜。為了有效地傳達思想概念,美學形式與功能需要齊頭并進,通過直觀地傳達關鍵的方面與特征,從而實現對于相當稀疏而又復雜的數據集的深入洞察。然而,設計人員往往并不能很好地把握設計與功能之間的平衡,從而創造出華而不實的數據可視化形式,無法達到其主要目的,也就是傳達與溝通信息。
數據可視化與信息圖形、信息可視化、科學可視化以及統計圖形密切相關。當前,在研究、教學和開發領域,數據可視化乃是一個極為活躍而又關鍵的方面。“數據可視化”這條術語實現了成熟的科學可視化領域與較年輕的信息可視化領域的統一。
 
 
二、Echarts
Echarts是由百度團隊更新和維護的專為大數據可視化實現的Javascript庫,一個純 Javascript 的圖表庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴輕量級的 Canvas 類庫 ZRender,提供直觀,生動,可交互,可高度個性化定制的數據可視化圖表。
ECharts 提供了常規的折線圖,柱狀圖,散點圖,餅圖,K線圖,用于統計的盒形圖,用于地理數據可視化的地圖,熱力圖,線圖,用于關系數據可視化的關系圖,treemap,多維數據可視化的平行坐標,還有用于 BI 的漏斗圖,儀表盤,并且支持圖與圖之間的混搭。
 
ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果,并且對移動端做了深度的優化。
 
三、字符云
字符云就是對網絡文本中出現頻率較高的“關鍵詞”予以視覺上的突出,形成“關鍵詞云層”或“關鍵詞渲染”,從而過濾掉大量的文本信息,使瀏覽網頁者只要一眼掃過文本就可以領略文本的主旨。
 
四、實現步驟
a) 創建index.html文件 (頁面顯示文件)
b) 引入js文件
i. 引入echarts.min.js文件(Echarts核心js文件)
ii. 引入worldcloud.js文件(字符云擴展js文件)
c) 設置配置數據
i. 設置模擬數據data (顯示字符云的文字和值)
ii. 設置字符云配置對象option (配置字符云其他屬性)
d) 繪圖
i. 創建canvas畫布并初始化echarts對象 (得到echarts對象用來繪制)
ii. 繪制字符云 (通過初始化得到的echarts對象繪制字符云)
 
五、具體實現
1.創建Index.html
此頁面主要用來放置canvas畫布,canvas畫布是用來展示字符云的。
代碼如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Echarts字符云</title>
</head>
<body>
</body>
</html>
 
2.引入js文件
要使用Echarts需要在index.html的head部分引入Echarts的核心JavaScript文件echarts.min.js
除此之外還要引入字符云的核心擴展文件worldcloud.js
代碼如下
<!DOCTYPE html>
<html lang="zh">
<head>
        <meta charset="UTF-8" />
       <title>Echarts字符云</title>
       <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/worldcloud.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
 
</body>
</html>
 
3.設置配置數據
data數據為我們要在字符云中顯示的文字(name)和文字的值(value),值的大小直接影響文字的大小和文字的顏色,注:這個數據應該是又大數據分析師分析之后從數據庫中調取過來的,由于沒有數據庫和配置環境我們用模擬數據來展示。
data數據基本格式為:
[
{name:文字1,value:50},
{name:文字2,value:62},
{name:文字3,value:13}
]
在JavaScript中我們需要聲明一個變量,將數據暫時存儲在這個變量中,之后在配置整體字符云時使用它,在聲明變量前,需要一個script標簽包裹起來,script標簽中的代碼及為JavaScript代碼。
具體代碼格式如下:
<!DOCTYPE html>
<html lang="zh">
<head>
       <meta charset="UTF-8" />
       <title>Echarts字符云</title>
       <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/worldcloud.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
       //數據,鍵值對
       var data = [
       {
      "name": "Robin Hood  Men in Tights",
      "value": "22.72"
           },
           {
             "name": "Joheunnom nabbeunnom isanghannom",
             "value": "25.32"
           },
           {
             "name": "The Mosquito Coast",
             "value": "31.88"
           },
           {
             "name": "Hatari!",
             "value": "21.60"
           },
           {
             "name": "Tarzan Finds a Son!",
             "value": "21.19"
           },
           {
             "name": "Three Kings",
             "value": "32.94"
           },
           {
             "name": "The Man Who Would Be King",
             "value": "22.69"
           },
           {
             "name": "Mulan",
             "value": "48.79"
           },
           {
             "name": "EuroTrip",
             "value": "26.38"
           }
       ];
   </script>
</head>
<body>
</body>
</html>
option配置
option為Echarts的配置項,它包括我們需要展示圖形的標題,圖例,坐標軸,圖形縮放,提示框,工具欄,數據,動畫等配置。
option是作為一個Javascript對象的形式出現的,具體形式如下:
{
title:{},//標題
legend:{},//圖例
xAxis:{},//x坐標軸
yAxis:{},//y坐標軸
series:[
data:[]//數據
],
}
這只是簡單的一個option案例,詳情請自行查看echarts.baidu.com
 
配置option時同data一樣需要一個變量來保存,具體形式如下:
var option = {
    title:{
        text:"字符云",//標題文字
    },
    tooltip: {},//鼠標劃入的提示框
    series: [{
        type: 'wordCloud', //繪圖類型為字符云
        width:"100%",//所占整體寬度
        height:"98%",//所占整體高度
        gridSize: 6,//文字間距
        sizeRange: [10, 40],//文字大小[最小,最大]
        rotationRange: [0,0],//旋轉最大和最小角度
        //rotationStep:30,//文字旋轉單位,30表示30°的倍數
        shape: 'ellipse',//整體字符云展現的圖形,ellipse為橢圓形
        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: data//數據
    }]
};
通過注釋我們可以清晰的理解option中每個參數的作用,每個都是以鍵值對的形式展現,其中data:data中的值為剛剛我們定義的變量值。
 
4.繪制
option配置好了,最后一步就是使用echarts方法加載option并繪制圖形。
繪制步驟:
a.圖片要繪制在哪兒?尺寸是什么
b.什么時候繪制?
c.怎么繪制?
 
a.我們要繪制圖形首先要指定圖形在何處繪制,那么需要在body中加入標簽如下:
<body>
<div id=main style=height:500px;></div>
</body>
div為標簽
Id為標識
style為設置繪圖樣式,寬度默認100%,高度默認0,設置高度為500px
b.何時繪制圖形那?我們需要等到整個html文件加載完畢之后繪制圖形,在Javascript中有一個方法會在頁面加載完成之后執行,代碼如下:
window.onload = function(){
//頁面加載完成才執行這里的代碼
}
 
c.如何繪制?只需兩步,第一步初始化echarts,第二部加載option對象。
代碼如下:
<script>
window.onload = function(){
    //初始化并返回繪制圖形節點myChart
        var myChart = echarts.init(document.getElementById("main"));
        //加載option繪制圖形
myChart.setOption(option);
}
</script>
 
這樣一個字符云就制作完成了,整體index.html代碼如下:
<!DOCTYPE html>
<html>
       <head>
              <meta charset="UTF-8">
             <title></title>
             <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
             <script src="js/worldcloud.js" type="text/javascript" charset="utf-8"></script>
             <script type="text/javascript">
                             //數據,鍵值對
                            var data = [
                                     {
                                       "name": "Robin Hood  Men in Tights",
                                       "value": "22.72"
                                      },
                                      {
                                        "name": "Joheunnom nabbeunnom isanghannom",
                                        "value": "25.32"
                                      },
                                      {
                                        "name": "The Mosquito Coast",
                                        "value": "31.88"
                                      },
                                      {
                                        "name": "Hatari!",
                                        "value": "21.60"
                                      },
                                      {
                                        "name": "Tarzan Finds a Son!",
                                        "value": "21.19"
                                      },
                                      {
                                        "name": "Three Kings",
                                        "value": "32.94"
                                      },
                                      {
                                        "name": "The Man Who Would Be King",
                                        "value": "22.69"
                                      },
                                      {
                                        "name": "Mulan",
                                        "value": "48.79"
                                      },
                                      {
                                        "name": "EuroTrip",
                                        "value": "26.38"
                                      }
                                  ];
                                  var option = {
                                      title:{
                                          text:"字符云",//標題文字
                                      },
                                      tooltip: {},//鼠標劃入的提示框
                                      series: [{
                                          type: 'wordCloud', //繪圖類型為字符云
                                          width:"100%",//所占整體寬度
                                          height:"98%",//所占整體高度
                                          gridSize: 6,//文字間距
                                          sizeRange: [10, 40],//文字大小[最小,最大]
                                          rotationRange: [0,0],//旋轉最大和最小角度
                                          //rotationStep:30,//文字旋轉單位,30表示30°的倍數
                                          shape: 'ellipse',//整體字符云展現的圖形
                                          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: data
                                      }]
                                  };
    
                                  window.onload = function(){
                                      var myChart = echarts.init(document.getElementById("main"));
                                      myChart.setOption(option);
                                  };
                          </script>
                   </head>
                   <body>
                          <div id="main" style="height:500px;"></div>
                  </body>
</html>
 
 

 


更多大數據相關資訊敬請關注魔據教育,為您分享最及時的大數據資訊。
學習大數據敬請關注魔據教育微信二維碼。
魔據教育微信二維碼

【版權與免責聲明】如發現內容存在版權問題,煩請提供相關信息發郵件至[email protected],我們將及時溝通與處理。本站內容除非來源注明魔據教育,否則均為網友轉載,涉及言論、版權與本站無關。

全國咨詢熱線:18501996998,值班手機:18501996998(7*24小時)

在線咨詢:張老師QQ 320169340

企業合作服務專線:010-82340234-821, 院校合作洽談專線:010-82340234

Copyright 2001-2019 魔據教育 - 北京華育興業科技有限公司 版權所有,京ICP備17018991號-2

免費在線咨詢立即咨詢

免費索取技術資料立即索取

大數據技術交流QQ:226594285

電話咨詢010-82340234

六合图库118万众图库