【HZHE002】黃子涵學習Echarts
概念篇
下面，我們就常見的幾種使用場景，介紹如何初始化一個圖表以及改變其大小。
圖表容器及大小
通常來說，需要在 HTML 中先定義一個 <div> 節點，並且通過 CSS 使得該節點具有寬度和高度。初始化的時候，傳入該節點，圖表的大小預設即為該節點的大小，除非聲明瞭 opts.width 或 opts.height 將其覆蓋。
<div id="huangzihan" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var HZHChart = echarts.init(document.getElementById('huangzihan')); </script>
需要注意的是，使用這種方法在呼叫 echarts.init 時需保證容器已經有寬度和高度了。
初始化
在 HTML 中定義有寬度和高度的父容器（推薦）
指定圖表的大小
如果圖表容器不存在寬度和高度，或者，你希望圖表寬度和高度不等於容器大小，也可以在初始化的時候指定大小。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>黃子涵學習Echarts</title> <script src="echarts.js"></script> </head> <body> <div id="huangzihan"></div> <script type="text/javascript"> var HZHChart = echarts.init(document.getElementById('huangzihan'), null, { width: 600, height: 400 }); </script> </body> </html>
響應容器大小的變化
監聽圖表容器的大小並改變圖表大小
在有些場景下，我們希望當容器大小改變時，圖表的大小也相應地改變。
比如，圖表容器是一個高度為 400px、寬度為頁面 100% 的節點，你希望在瀏覽器寬度改變的時候，始終保持圖表寬度是頁面的 100%。
這種情況下，可以監聽頁面的 window.onresize 事件獲取瀏覽器大小改變的事件，然後呼叫 echartsInstance.resize 改變圖表的大小。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>黃子涵學習Echarts</title> <script src="echarts.js"></script> <style> #huangzihan, html, body { width: 100%; } #huangzihan { height: 400px; } </style> </head> <body> <div id="huangzihan"></div> <script type="text/javascript"> var HZHChart = echarts.init(document.getElementById('huangzihan')); window.onresize = function () { HZHChart.resize(); }; </script> </body> </html>
為圖表設定特定的大小
除了直接呼叫 resize() 不含引數的形式之外，還可以指定寬度和高度，實現圖表大小不等於容器大小的效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黃子涵學習Echarts</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="huangzihan"></div>
<script type="text/javascript">
var HZHChart = echarts.init(document.getElementById('huangzihan'));
window.onresize = function () {
HZHChart.resize({
width: 800,
height: 400
});
};
</script>
</body>
</html>
小貼士
閱讀 API 文件的時候要留意介面的定義方式，這一介面有時會被誤認為是 myCharts.resize(800, 400) 的形式，但其實不存在這樣的呼叫方式。
容器節點被銷燬以及被重建時
假設頁面中存在多個標籤頁，每個標籤頁都包含一些圖表。當選中一個標籤頁的時候，其他標籤頁的內容在 DOM 中被移除了。這樣，當用戶再選中這些標籤頁的時候，就會發現圖表“不見”了。
本質上，這是由於圖表的容器節點被移除導致的。即使之後該節點被重新新增，圖表所在的節點也已經不存在了。
正確的做法是，在圖表容器被銷燬之後，呼叫 echartsInstance.dispose 銷燬例項，在圖表容器重新被新增後再次呼叫 echarts.init 初始化。
小貼士
在容器節點被銷燬時，總是應呼叫 echartsInstance.dispose 以銷燬例項釋放資源，避免記憶體洩漏。