动态改变echarts图表时，先销毁实例再创建图表，减少占用内内存

最新推荐文章于 2024-06-13 09:25:54 发布

佛佛ง

最新推荐文章于 2024-06-13 09:25:54 发布

阅读量4.2k

点赞数

分类专栏： Echarts学习笔记文章标签： echarts

本文链接：https://blog.csdn.net/LzzMandy/article/details/121406285

版权

Echarts学习笔记专栏收录该内容

38 篇文章 2 订阅

订阅专栏

关键点：

myChart.clear();//清空当前实例，会移除实例中所有的组件和图表
myChart.dispose();//销毁实例，实例销毁后无法再被使用

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
		<style>
			.change{
				height: 50px;
				width: 100px;
				line-height: 50px;
				background: blue;
				text-align: center;
				color: #fff;
				border-radius: 10px;
			}
		</style>
    </head>
    <body style="width:500px;height500px;margin: auto">
		<div class="change" onclick="changeChart(this)">改变图表</div>
        <div id="container" style="width:500px;height:400px;"></div>
			
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
        <script type="text/javascript">
			var data1=[150, 230, 224, 218, 135, 147, 260];
			var data2=[150, 150, 150, 150, 150, 150, 150];
			initCHART(data1);
			//绘制表格
			function initCHART(data){
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				var option;
				option = {
				  xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				  },
				  yAxis: {
					type: 'value'
				  },
				  series: [
					{
					  data: data,
					  type: 'line'
					}
				  ]
				};
				if (option && typeof option === 'object') {
					myChart.setOption(option);
				}
			}
			// 切换表格
			function changeChart(ele) {
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				myChart.clear();//清空当前实例，会移除实例中所有的组件和图表
				myChart.dispose();//销毁实例，实例销毁后无法再被使用
				initCHART(data2);
				console.log("myChart=====",myChart);
			}

        </script>
    </body>
</html>

佛佛ง

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
动态改变echarts图表时，先销毁实例再创建图表，减少占用内内存

关键点：myChart.clear();//清空当前实例，会移除实例中所有的组件和图表myChart.dispose();//销毁实例，实例销毁后无法再被使用<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> <style> .change{ height: 50px; width: 1...
复制链接

扫一扫