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