echarts折线图加载中遮罩层showLoading自定义背景色及字体颜色效果 -六月初技术站

echarts折线图加载中遮罩层showLoading自定义背景色及字体颜色效果

六月初 Echarts 2023-02-13 18:00:14

echarts的开发使用在对于着重于用户数据体验的网站的占着极大的比重，那么在开发echarts中如何开启数据未加载成功前，图表数据加载中提示呢？

文中就echarts开启加载提示及对遮罩层自定义配置给出详细代码说明。

效果如图：

一、关键开启、关闭参数配置：

//显示加载中遮罩层
myChart.showLoading();
//关闭遮罩层
myChart.hideLoading();

通过以上可以开启echarts图标库的默认配置的加载动画，那么如果要实现更多自定义如字体颜色、遮罩层颜色等的配置要如何实现呢？代码之前先给出完整的代码，再来根据代码解释对应参数的配置及使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
	</head>
	<body>
		<div id="main" style="width: 800px;height: 400px;"></div>
		<script>
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
			  xAxis: {
			    type: 'category',
			    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			  },
			  yAxis: {
			    type: 'value'
			  },
			  series: [
			    {
			      data: [150, 230, 224, 218, 135, 147, 260],
			      type: 'line'
			    }
			  ]
			};
			myChart.setOption(option);
			myChart.showLoading({
				text: '数据生成中...',
				color: 'green',
				textColor: 'green',
				maskColor: 'rgba(0, 170, 0, 0.2)',
				spinnerRadius:20
			});
			//3秒后关闭遮罩层
			setTimeout(function(){
				myChart.hideLoading()
			},3000)
		</script>
	</body>
</html>