eCharts + Bootstrap Modal 無法顯示
===
狀況一
---
專案中要使用儀錶板，並且點擊儀錶板後會出現彈窗顯示詳細資訊，但在 bootstrap modal 顯示後 echart 並無法正確繪製，如下圖：
<img src="https://i.imgur.com/sRytWxy.png" />

程式碼：

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="gauge3"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
	
	<script>
        $(function () {
            // 打開modal > 呼叫儀表
            $("#gauge4").on('click', function (event) {
                $(".modal").modal()
                var gauge3 = echarts.init(
                    document.getElementById("gauge3")
                );
                gauge3.setOption(option);
            });
        })
	</script>

解決方法
---
### 第一步
在網路上查到有論壇有在討論相關問題，好像是因為 echarts 無法顯示在隱藏的元素上，所以只要將` <div class="modal fade" ...>` 的fade拿掉就可以。
### 第二步
照做後依然無法正常顯示，打開網頁檢視發現 echarts 已經執行且 canvas 元素已經被 pend 到 modal 上，但高度為 0。
判斷應該是因為 bootstrap modal 被呼叫時，內部並沒有元素撐開，導致 echarts 雖然執行了但沒有空間可以畫上圖表，因此在` <div id="gauge3"></div>` 加上`style="min-height: 300px;"`即可出現。
修改完的結構：

 <!-- Modal -->
    <div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="gauge3" style="min-height: 300px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

狀況二
---
解決完上面呼叫 modal+echarts 失效的問題後，又發現當我第一次呼叫 modal，儀錶板會有從 0 開始跑的動畫，但關閉後再點開並不會重新跑動畫。
解決方法
---
echarts 有個刪除物件的 method `echarts.dispose(el)`，一開始想說每次展開 modal 都先將表單物件 dispose 再重新呼叫的偷吃步，但實際上並沒辦法如想像的美好，結果就是連第一次都無法正常顯示。
正解：
勉為其難地去找了 bootstrap modal 的 method `hide.bs.modal`，會監聽當modal一被關閉就執行後面的程式，所以每次關閉 modal 時都將儀表物件 dispose 一次，打開 modal 再重新呼叫，程式碼如下：

$(function () {
	// 打開modal > 呼叫儀表
	$("#gauge4").on('click', function (event) {
		$(".modal").modal()
		var gauge3 = echarts.init(
			document.getElementById("gauge3")
		);
		gauge3.setOption(option);
	});
	// 關閉modal > dipose儀表
	$(".modal").on("hide.bs.modal", function() {
		echarts.dispose(gauge3)
	})
})