欢迎光临
我的个人博客网站

echarts的初始化和销毁dispose


容器节点被销毁以及被重建时

假设页面中存在多个标签页, 每个标签页都包含一些图表。 当选中一个标签页的时候,其他标签页的内容在 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> 

效果图

echarts的初始化和销毁dispose

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> 

echarts的初始化和销毁dispose

clear和dispose的区别在哪里呢?

学过vue的同学都知道,v-show和v-if 其实clear类似于v-show dispose类似于v-if 他们的区别就是这样 
赞(0) 打赏
未经允许不得转载:张拓的天空 » echarts的初始化和销毁dispose
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏