ECharts通过点击按钮调用init()方法创建实例

最新推荐文章于 2025-05-06 13:55:49 发布

rain__chen

最新推荐文章于 2025-05-06 13:55:49 发布

阅读量2.4w

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/rain__chen/article/details/90199658

本文介绍了在ECharts中如何通过按钮点击事件调用init()方法来动态创建图表实例。当点击按钮时，首次调用会成功创建实例。然而，再次点击会导致错误，因为实例已存在。为解决这个问题，建议在点击事件中检查实例是否存在，如果存在则先销毁再新建，确保每次点击都能正确生成新的ECharts实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用button按钮的onclick事件调用ECharts的init()方法时出现的一个错误
要求，根据条件查询出数据用报表表示出来
在这里插入图片描述
当第一次点击按钮时调用 init 方法会创建一个实例

但是再次点击按钮时会出错是因为这个实例已经被创建过

解决办法
先判断该实例是否被创建过，如果创建过就销毁，并创建新的实例‘
在这里插入图片描述

//-----------------------------柱状图-----------------------------
var echarts1 ;
function fun(name, arr1, arr2, id,year,lastYear){
	var option = {
	    title : {
	        text: '单一品类分析',
	        subtext: ''
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	        data:[year,lastYear]
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {show: true, type: ['line', 'bar']},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:year,
	            type:'bar',
	            data:arr1
	        },
	        {
	            name:lastYear,
	            type:'bar',
	            data:arr2
	        }
	    ]
	};
	if(echarts1 == undefined){
		echarts1 = echarts.init(document.getElementById(id));
	}else{
		echarts1.clear();
	}
	echarts1.setOption(option,true);
	
}