Echarts 内存使用率（图表覆盖,宽度百分比）

本文链接：https://blog.youkuaiyun.com/gaogaoshan/article/details/38038247

本文探讨了Echarts在绘制图表时如何有效地管理内存，特别是关于图表覆盖和宽度百分比设置对内存使用率的影响。通过合理配置这些参数，可以降低内存消耗，提升用户体验。

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="description" content="ECharts">

	<title>Memory page</title>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="js/echarts2/esl.js"></script>
	<script type="text/javascript" src="js/echarts2/echarts.js"></script>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height:400px ; width: 90%;"></div>

	<script type="text/javascript" >
		var myChart;
		var echarts;
		var domain=document.getElementById('main');
		// 按需加载
		require(
			[
				'echarts',
				'echarts/chart/line',
				'echarts/chart/bar'
			],
			DrawEChart
		);


		//创建ECharts图表方法
		function DrawEChart(ec) {
			echarts=ec;
			myChart = echarts.init(domain);
			myChart.showLoading({
				text : "图表数据正在努力加载...",
				effect :'whirling',//'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
				textStyle : {fontSize : 20 }
			});
			
			
			//定义图表options
			var option = {
				title : {
					text: '最近10次主机内存使用情况采样'					
				},
				tooltip : {
					trigger: 'axis'
				},
				legend: {
					data:[
						'主机内存',
						'使用内存'
					]
				},
				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,
				grid: {x :150 , y: 110 ,x2:20 , y2:30},
				xAxis : [
					{
						type : 'category',
						data :  ['时间1','时间2','时间3','时间4','时间5','时间6','时间7','时间8','时间9','时间10']
					},
					{
						type : 'category',
						axisLine: {show:false}, axisTick: {show:false}, axisLabel: {show:false},
						splitArea: {show:false}, splitLine: {show:false},
						data :  ['时间1','时间2','时间3','时间4','时间5','时间6','时间7','时间8','时间9','时间10']
					}
				],
				yAxis : [
					{
						type : 'value',
						axisLabel:{formatter:'{value} MB'}
					}
				],
				series : [
					{
						name:'使用内存',
						type:'bar',
						barWidth: fixWidth(0.05),          
						itemStyle: {normal: {
										 borderRadius: 5 , 
										 color:'rgba(235,35,43,1)', 
										 label:{show:true}}},
						data:[2400,1505,1950,2050,2020,1200,2020,2202,1201,1020]
					},
					
					{
						name:'主机内存',
						type:'bar',
						barWidth: fixWidth(0.06),    
						xAxisIndex:1,
						itemStyle: {normal: {
										borderRadius: 10 , 
										color:'rgba(105,205,10,0.9)', 
										label:{show:true,formatter:function(a,b,c){return c>0 ? (c +'\n'):'';}}
									}},
						data:[3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000]
					}
					
				]
			};
                    
                    
			
			
			setTimeout(function (){
				myChart.setOption(option);
				myChart.hideLoading();
			},100);
			
	
		}
	</script>


	<script>
		function fixWidth(percent)  
		{  
		    return document.body.clientWidth * percent ; //这里你可以自己做调整  
		}
	</script>
</body>
</html>