ECharts使用心得——矩陣樹圖

時間 2020-07-10

原文原文鏈接

# 1. 緣起 #
最近實驗室 boss 讓用矩形樹圖作一下研究數據的展現，囧，矩形樹圖是什麼鬼。問了問師兄，說用 R 語言能夠實現，讓我去研究一下。

= =，那這周不是不用幹別的了。javascript

恰好最近在研究百度出的 ECharts ，搜了搜居然有矩形樹圖的模塊，真是感動啊眼淚都要出來了。立馬研究了一下，結果還能夠，能實現我要的效果。html

就在博客裏總結一下吧，但願對你有幫助。java

# 2.1 用 ECharts 實現矩形樹圖（treemap）—— 知識普及 #
## 什麼是矩形樹圖？ ##
一般，咱們使用縮進方式展示層次結構的層級，好比文件目錄列表。在這種方式下，同時展現的文件與目錄的數量是受到限制的，所以咱們很難統籌地直觀地對全局結構留下印象。

使此類結構更有效的可視化的方法已經有不少了，比較重要的一類就是樹。矩形式樹狀結構圖（Treemap）就是一種有效的實現層次結構可視化的圖表結構，簡稱矩形樹圖。數組

在矩形樹圖中，每一個節點都有名字和相應的大小。若是用矩形樹圖表示咱們熟悉的文件目錄列表，那麼葉子節點的大小就能表示各個文件的體積，父節點就能表示文件夾的體積也就是它包含的文件體積之和。echarts

經過矩形樹圖，咱們即可以很清晰地知道整個文件的全局層級結構。

dom

好比...##

下圖是一個矩形樹圖的圖例，該圖統計了A公司員工午餐吃了哪些水果以及吃水果的分佈(對我就是這麼無聊)，員工共 20 人，吃水果統計數據以下：

蘋果：6
香蕉：4
獼猴桃：4
梨：2
橙子：2
橘子：1
西瓜：1

能夠直觀看出，喜歡吃蘋果的人最多，喜歡吃香蕉的也很多。若是你願意，還能夠爲不一樣的數據塊設置對應的顏色，蘋果：紅，香蕉：黃，等等，更直觀一點啦。異步

看更嚴肅的矩形樹圖實例戳這裏~

async

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 簡單說來就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

（想知道更多請戳——什麼是 AMD）。函數

咱們須要新建一個<script>標籤中爲模塊加載器配置 ECharts 和所需圖表的路徑，這樣 ECharts 才能正確的找到模塊的存儲位置，正確加載須要的模塊。ui

<!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啊，強迫症受不了。。

還有但願早日支持兩層的矩形樹圖啊~~