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

ECharts 按钮点击动态创建实例及避免重复初始化

最新推荐文章于 2024-05-31 22:21:30 发布

原创最新推荐文章于 2024-05-31 22:21:30 发布 · 2.4w 阅读

8 ·

CC 4.0 BY-SA版权

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

在使用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);
	
}