容器节点被销毁以及被重建时
假设页面中存在多个标签页，
每个标签页都包含一些图表。
当选中一个标签页的时候，其他标签页的内容在 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
他们的区别就是这样