容器節點被銷毀以及被重建時
假設頁面中存在多個標簽頁，
每個標簽頁都包含一些圖表。
當選中一個標簽頁的時候，其他標簽頁的內容在 DOM 中被移除了。
這樣，當用戶再選中這些標簽頁的時候，就會發現圖表“不見”了。
本質上，這是由於圖表的容器節點被移除導致的。
即使之后該節點被重新添加，圖表所在的節點也已經不存在了。
正確的做法是，
在圖表容器被銷毀之后，
調用 echartsInstance.dispose 銷毀實例，
在圖表容器重新被添加后再次調用 echarts.init 初始化。
從上面這一句話，我們可以得出一個結論：
那就是有些時候我們在移除容器的時候，echarts可能展示不出來
那么解決的辦法是：
調用 echartsInstance.dispose 銷毀實例，
echartsInstance.dispose的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個 ECharts 實例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 800px;height:400px; background: pink;"></div>
<div onclick="showHander()" class="zahsnhi">展示實例</div>
<div onclick="desHander()" class="xiaohui">銷毀實例</div>
<script type="text/javascript">
// 初始化echarts
function xuanranInt() {
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
let index = 0;
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];
var data = [{
'name': '熱點網格',
'value': 5600
}, {
'name': '大氣污染',
'value': 3600
}, {
'name': '水質超標',
'value': 1500
}, {
'name': '在線超標',
'value': 2000
}, {
'name': '未知',
'value': 899
}, {
'name': '系統對接',
'value': 4000
}]
option = {
title: {
text: 'PieChart',
x: 'center',
y: 'center',
textStyle: {
fontSize: 20
}
},
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: '5%',
top: 'center',
selectedMode: true,
icon: 'pin',
formatter: function (name) {
let title = ''
var total = 0;
var target;
var index;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
title = data[i].label
index = i < 6 ? i : 5
}
}
return ` ${name} ${index} ${target}個`
}
},
label: { //去除餅圖的指示折線label
normal: {
show: false,
position: 'inside',
formatter: "{b}:{d}%"
},
},
series: [{
type: 'pie',
center: ['50%', '50%'],
radius: ['50%', '70%'],
clockwise: true,
avoidLabelOverlap: true,
hoverOffset: 30,
emphasis: {
itemStyle: {
borderColor: '#f3f3f3',
borderWidth: 10
}
},
itemStyle: {
normal: {
borderColor: "#FFFFFF",
borderWidth: 1,
label: {
show: false,
},
labelLine: {
show: false
}
}
},
data: data,
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
}
// 調用
xuanranInt();
// 重新渲染echarts
function showHander() {
xuanranInt();
}
// 銷毀實例
function desHander() {
var myChart = echarts.init(document.getElementById('main'));
// 銷毀實例，銷毀后實例無法再被使用。
// 在什么情況下需要調用該函數進行銷毀當前的實例呢？
// 官方給的說明:在圖表容器被銷毀之后，調用 echartsInstance.dispose 銷毀實例，
myChart.dispose();
}
</script>
</body>
</html>
效果圖
echartsInstance.clear的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個 ECharts 實例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 800px;height:400px; background: pink;"></div>
<div onclick="showHander()">展示實例</div>
<div onclick="desHander()">銷毀實例</div>
<div onclick="qingkong()">清空當前實例</div>
<script type="text/javascript">
// 初始化echarts
function xuanranInt(){
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
let index = 0;
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];
var data = [{
'name': '熱點網格',
'value': 5600
}, {
'name': '大氣污染',
'value': 3600
}, {
'name': '水質超標',
'value': 1500
}, {
'name': '在線超標',
'value': 2000
}, {
'name': '未知',
'value': 899
}, {
'name': '系統對接',
'value': 4000
}]
option = {
title: {
text: 'PieChart',
x: 'center',
y: 'center',
textStyle: {
fontSize: 20
}
},
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: '5%',
top: 'center',
selectedMode: true,
icon: 'pin',
formatter: function (name) {
let title = ''
var total = 0;
var target;
var index;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
title = data[i].label
index = i < 6 ? i : 5
}
}
return ` ${name} ${index} ${target}個`
}
},
label: { //去除餅圖的指示折線label
normal: {
show: false,
position: 'inside',
formatter: "{b}:{d}%"
},
},
series: [{
type: 'pie',
center: ['50%', '50%'],
radius: ['50%', '70%'],
clockwise: true,
avoidLabelOverlap: true,
hoverOffset: 30,
emphasis: {
itemStyle: {
borderColor: '#f3f3f3',
borderWidth: 10
}
},
itemStyle: {
normal: {
borderColor: "#FFFFFF",
borderWidth: 1,
label: {
show: false,
},
labelLine: {
show: false
}
}
},
data: data,
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
}
// 調用
xuanranInt();
// 重新渲染echarts
function showHander(){
xuanranInt();
}
// 銷毀實例
function desHander(){
var myChart = echarts.init(document.getElementById('main'));
// 銷毀實例，銷毀后實例無法再被使用。
// 在什么情況下需要調用該函數進行銷毀當前的實例呢？
// 官方給的說明:在圖表容器被銷毀之后，調用 echartsInstance.dispose 銷毀實例，
myChart.dispose();
}
// 清空當前實例
function qingkong(){
// 清空當前實例，會移除實例中所有的組件和圖表。
var myChart = echarts.init(document.getElementById('main'));
myChart.clear()
}
</script>
</body>
</html>
clear和dispose的區別在哪里呢？
學過vue的同學都知道，v-show和v-if
其實clear類似於v-show
dispose類似於v-if
他們的區別就是這樣
