# 1. 緣起 #
最近實驗室 boss 讓用矩形樹圖做一下研究數據的展示，囧，矩形樹圖是什么鬼。問了問師兄，說用 R 語言可以實現，讓我去研究一下。
= =，那這周不是不用干別的了。
剛好最近在研究百度出的 ECharts ，搜了搜竟然有矩形樹圖的模塊，真是感動啊眼淚都要出來了。立馬研究了一下，結果還可以，能實現我要的效果。
就在博客里總結一下吧，希望對你有幫助。
# 2.1 用 ECharts 實現矩形樹圖（treemap）—— 知識普及 #
## 什么是矩形樹圖？ ##
通常，我們使用縮進方式展現層次結構的層級，比如文件目錄列表。在這種方式下，同時展示的文件與目錄的數量是受到限制的，因此我們很難統籌地直觀地對全局結構留下印象。
使此類結構更有效的可視化的方法已經有很多了，比較重要的一類就是樹。矩形式樹狀結構圖（Treemap）就是一種有效的實現層次結構可視化的圖表結構，簡稱矩形樹圖。
在矩形樹圖中，每個節點都有名字和相應的大小。如果用矩形樹圖表示我們熟悉的文件目錄列表，那么葉子節點的大小就能表示各個文件的體積，父節點就能表示文件夾的體積也就是它包含的文件體積之和。
通過矩形樹圖，我們便可以很清晰地知道整個文件的全局層級結構。
比如...##
下圖是一個矩形樹圖的圖例，該圖統計了A公司員工午飯吃了哪些水果以及吃水果的分布(對我就是這么無聊)，員工共 20 人，吃水果統計數據如下：
蘋果：6
香蕉：4
獼猴桃：4
梨：2
橙子：2
橘子：1
西瓜：1
可以直觀看出，喜歡吃蘋果的人最多，喜歡吃香蕉的也不少。如果你願意，還可以為不同的數據塊設置對應的顏色，蘋果：紅，香蕉：黃，等等，更直觀一點啦。
2.2 用 ECharts 實現矩形樹圖（treemap） —— 實踐
##步驟一： 引入 ECharts ##
首先我們需要在頁面中為 ECharts 准備一個 dom 來繪制圖表，還要引入 EChart.js 主文件，這個文件中包括所有 ECharts 實現的代碼。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>
## 步驟二： 配置相對路徑 ##
在主文件引入后你將獲得一個 AMD 環境，AMD 簡單說來就是"異步模塊定義"。它采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。
我們需要新建一個<script>標簽中為模塊加載器配置 ECharts 和所需圖表的路徑，這樣 ECharts 才能正確的找到模塊的存儲位置，正確加載需要的模塊。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
</script>
</body>
## 步驟三： 動態加載 ECharts 和所需圖表 ##
基本配置就到這，現在可以加載需要的圖表了。正如上文所說，ECharts 采用 AMD 規范，模塊加載采用異步執行的模式，舉例如下：
require(
[
'echarts',
'echarts/chart/treemap' // 加載treemap模塊，按需加載
],
function (ec) {
... // 在回調函數里面寫具體配置代碼
}
）;
代碼實現了加載 echarts 模塊，和我們實現矩陣樹圖要用的 treemap 模塊。
步驟四： 在回調函數里自定義圖表
回調函數里我們就可以根據需要自定義矩形樹圖了，樣例代碼如下：
function(ec) {
var myChart = ec.init(document.getElementById("main"));
var option = {
title : {
text: 'A公司員工吃水果統計表',
subtext: '多吃水果有益身體健康'
},
tooltip : {
trigger: 'item',
formatter: "{b}: {c}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'矩形圖',
type:'treemap',
itemStyle: {
normal: {
label: {
show: true,
formatter: "{b}"
},
borderWidth: 1
},
emphasis: {
label: {
show: true
}
}
},
data:[
{
name: '蘋果',
value: 6
},
{
name: '香蕉',
value: 4
},
{
name: '獼猴桃',
value: 4
},
{
name: '梨',
value: 2
},
{
name: '橙子',
value: 2
},
{
name: '桔子',
value: 1
},
{
name: '西瓜',
value: 1
}
]
}
]
};
myChart.setOption(option);
}
有關 title，tooltip，toolbox 等組件在所有 ECharts 建表中是通用的（相關文檔請戳這里）現在先說說如果需要使用矩形樹圖需要特別關注的事情。
ECharts 中規定使用 series 來設定驅動圖表生成的數據內容，它是一個數組格式，數組中每一項代表一個系列的特殊選項及數據。
在 series 中，首先是一些通用的配置項，如 name，type 等。這些比較簡單，大家都懂。和矩形樹圖相關的特殊配置項有兩個，現在分別介紹如下：
屬性： itemStyle {Object類型}##
在 itemStyle 中可以設置圖片默認樣式和強調樣式（懸浮時的樣式）：
itemStyle: {
normal: {
...
},
emphasis: {
...
}
}
屬性： data {OArray類型}
在 data 里配置具體數據，每一個數組項為 Object {}，內容如下：
{string} name null 數據名稱
{Number} value null 數據值
{Object} itemStyle {} 參見 itemStyle ，權重最高
##一個復雜一點的 series 樣例##
series : [
{
name:'矩形圖',
type:'treemap',
itemStyle: {
normal: {
label: {
show: true,
formatter: "{b}: {c}"
},
borderWidth: 1,
borderColor: '#ccc'
},
emphasis: {
label: {
show: true
},
color: '#cc99cc',
borderWidth: 3,
borderColor: '#996699'
}
},
data:[
{
name: '三星',
value: 6,
itemStyle: {
normal: {
label: {
show: true,
formatter : "{b}最多",
textStyle: {
color: '#ccc',
fontSize: 16
}
},
color: '#ccff99',
borderWidth: 1
},
emphasis: {
label: {
show: true,
formatter : "{b}: {c}",
textStyle: {
color: 'red',
fontSize: 18
}
},
color: '#cc9999',
borderWidth: 3,
borderColor: '#999999'
}
}
},
{
name: '小米',
value: 4,
itemStyle: {
normal: {
color: '#99ccff',
}
}
},
{
name: '蘋果',
value: 4,
itemStyle: {
normal: {
color: '#9999cc',
}
}
},
{
name: '魅族',
value: 1,
itemStyle: {
normal: {
color: '#99cccc',
}
}
},
{
name: '華為',
value: 2,
itemStyle: {
normal: {
color: '#ccffcc',
}
}
},
{
name: '聯想',
value: 2,
itemStyle: {
normal: {
color: '#ccccff',
}
}
},
{
name: '中興',
value: 1,
itemStyle: {
normal: {
label: {
show: true,
formatter: "{b}: {c}",
},
borderWidth: 3
},
emphasis: {
label: {
show: true
},
color: '#cc9999',
borderWidth: 3,
borderColor: '#999999'
}
}
}
]
}
]
# 吐槽 #
ECharts總體上還是比較容易上手的，能夠支持的圖表類型也足夠用，貌似他們還挺重視的一直在更新啊維護啊什么的，點個贊。
就是有一點用着不太爽，在官網實例部分可以下載圖表到本地，如下圖：
本來挺好的功能，但是圖片右上角為什么還帶着那些編輯button啊，強迫症受不了。。
還有希望早日支持兩層的矩形樹圖啊~~