Echarts解决左右上下边距问题（两种方法）

还是大剑师兰特

已于 2023-02-03 10:27:38 修改

阅读量7.4k

点赞数 5

分类专栏： # Echarts 雪花宝典文章标签： echarts javascript echarts雪花宝典 echarts边距设置

于 2023-02-03 10:01:56 首次发布

本文链接：https://blog.csdn.net/cuclife/article/details/128860792

版权

Echarts 雪花宝典专栏收录该内容

25 篇文章 31 订阅

订阅专栏

该文章展示了如何在Vue项目中使用Echarts库调整图表的grid布局，提供了两种设置方法，通过修改`grid`属性来控制图表的上下左右边距，从而实现更精确的可视化效果。示例代码详细解释了如何初始化Echarts实例并设置选项。

摘要由CSDN通过智能技术生成

在这里插入图片描述

第007个

点击查看专栏目录

文章目录

示例效果

没有添加grid之前（有grid的默认值来控制）
在这里插入图片描述
添加grid之后（自定义控制大小）

示例源代码（共88行）

/*
* @Author: 还是大剑师兰特（CSDN）
* @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @First published time: 2023-02-03
*/
<template>
	<div class="container">
		<h3>vue+echarts：控制主体显示区的上下左右边距</h3>
		<p>大剑师兰特，还是大剑师兰特</p>
		<div id="vue-echarts" ref="refEcharts"> </div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写
	export default {
		name: 'cuclife',
		data() {
			return {}
		},
		methods: {
			initCharts() {
				let myChart = echarts.init(this.$refs.refEcharts);
				myChart.setOption({
					title: {
						text: '标题：ECharts示例'
					},
					// grid: {  //方法 1
					// 	  left: 15, 
					// 	  right: 15, 
					// 	  bottom: 0, 
					// 	  top: 45, 
					// 	  containLabel: true 
					// 	}, 
						
					grid: {  //方法 2
							x:25, 
							y:45, 
							x2:0, 
							y2:0, 
							containLabel: true 
							},	
					xAxis: {
						data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet']
					},
					yAxis: {},

					series: [{
						name: '技能值',
						type: 'bar',
						data: [5, 36, 10, 10, 20],
						itemStyle: { //静态时显示状态
						    color: new echarts.graphic.LinearGradient(
						         // (x1,y1) 点到点 (x2,y2) 之间进行渐变
						         1, 0, 0, 0,
						         [
						              { offset: 0, color: '#ff00ff' }, // 0 起始颜色
									  { offset: 0.5, color: '#758d36' }, // 0 起始颜色
						              { offset: 1, color: '#0099ce' }  // 1 结束颜色
						        ]
						     ),
						},
					}]
				});
			}
		},
		mounted() {
			this.initCharts();
		}
	}
</script>
<style scoped>
	.container {
		width: 840px;
		height: 580px;
		margin: 50px auto 0;
		border: 1px solid rgb(228, 57, 97);
	}

	#vue-echarts {
		width: 800px;
		height: 460px;
		border: 1px solid #d8d;
		margin: 0 auto;
	}
</style>

相应的设置参数（方法1）

grid. left = ‘10%’
grid 组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。
如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。

grid. top = 60
grid 组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。
如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。

grid. right = ‘10%’
grid 组件离容器右侧的距离。
right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。

grid. bottom = 60
grid 组件离容器下侧的距离。
bottom 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。

相应的设置参数（方法2）

在这里插入图片描述

专栏介绍

在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。
（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等
（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等
（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等
（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
（5）提供yAxis示例：展示控制y 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
（6）提供dataZoom示例：展示控制区域缩放的类型、位置、filterMode等
（7）提供tooltip示例：展示控制提示框组件的触发方式、位置、样式，标签、动画、内容格式器等
（8）提供地理坐标系示例：展示控制地理坐标的经纬度、放缩、位置，距离、字体、边框等
（9）提供animation示例：展示控制动画的持续时间、延迟时间、动画方式，连接等
（10）提供其他示例：展示series等组件的信息内容。