Echarts解决左右上下边距问题（ 两种方法）-灵析社区

示例效果

没有添加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>

相关资料参考

https://echarts.apache.org/zh/option.html#grid

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

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

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

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

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

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

点赞 评论 收藏 目录

阅读量：841

点赞量：0

收藏量:0