echars相同option不同属性切换

最新推荐文章于 2024-04-25 14:40:40 发布

原创最新推荐文章于 2024-04-25 14:40:40 发布

· 479 阅读

0 ·

版权

echars 专栏收录该内容

1 篇文章

订阅专栏

开发中可能会在同一区域对图表进行切换渲染，但是设置同一个option中的series、legend等，切换会失败

每次在设置option时要进行复制，使用jquery中的$.extend(true,{},optionChart)

$setting_info.find('li').click(e=>{
	var $elem = $(e.target);
	console.log("data-",$elem.data());
	var leftTable = $elem.data().data.leftTable;
	var leftEcharData = $elem.data().data.leftEchar;
	$setting_info.find('div[lay-filter="docDemoTabBrief1"]').find('.layui-this').removeClass('layui-this');
	$setting_info.find('div[lay-filter="docDemoTabBrief2"]').find('.layui-this').removeClass('layui-this');
	$setting_info.find('div[lay-filter="docDemoTabBrief3"]').find('.layui-this').removeClass('layui-this');
	$elem .addClass('layui-this');
	$("#show1").hide();
		$("#show2").show();
		if(leftTable){
			var prop={
				"elem": "#tableshow2"
			}
			layui.use(['table','element'], function(){
					var table = layui.table;
					prop.cols=leftTable.cols;
					prop.data=leftTable.rows;
					prop.limit=prop.data.length;
					prop.height=$('#tableshow2').parent().height();
					table.render(prop);		
				});
		}
		if(leftEcharData){
			var leftEchar = echarts.init(document.getElementById('leftEcharshow2'));
			var option = $.extend(true,{},config.chartOption3);
			option.title.text=leftEcharData.ptitle;
			option.series=leftEcharData.series;
			option.legend.data = leftEcharData.legend;
			option.xAxis.data =leftEcharData.xAxis;
			leftEchar.setOption(option,true);
			leftEchar.resize();
		}
	
	
});