Echarts grid组件：调整图表的位置

最新推荐文章于 2025-08-17 18:25:32 发布

原创最新推荐文章于 2025-08-17 18:25:32 发布 · 2.6w 阅读

56 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #js

Echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用Echarts配置图表的grid组件，调整图表在div容器内的位置以及设置图表背景样式。通过设置left、top、right、bottom属性，可以精确控制图表的边界距离；containLabel属性用于防止标签溢出；此外，还讲解了如何改变背景颜色、边框样式和阴影效果，使图表更具个性化。

官网配置项

1、先了解下grid

这是echarts基本的代码结构，来瞅一眼grid的位置；
我们通过配置grid组件，来调整图表在div容器里的位置，以及图表的背景样式；

option = {
  tooltip: {...}, // 提示框组件
  grid: {...},   // <-- 没错，就是要配置这个东东！！！
  xAxis: [{...}], // x轴
  yAxis: [{...}], // x轴
  series: [{...}] // 你美丽的图表（数据和样式）
}

2、调整图表位置

入正题 — 先试着调整图表在我们div里的位置，也就是图表离容器的距离

其实，很简单！！

通常配置left,top,right,bottom的值即可调整图表的位置；
其对应的值可以是具体像素值如left:20可以是相对于容器高宽的百分比如left:'20%'

献上代码段，如下：

grid: {
    left: "20%",
    top: "20%",
    right: "20%",
    bottom: "30%",
    containLabel: false  // 这个啥？看下面
  },

containLabel这个属性的用途，见下图：

设置containLabel: true常用于防止标签溢出，计算距离时候会计算容器边到标签的距离，否则计算容器边缘到刻度线的距离。

3、调整图表的背景样式

如果想让自己的图表花里胡哨，来配置属性吧：
在这里插入图片描述
首先grid设置show: true 这是决定是否显示直角坐标系网格的开关；
然后就是样式的各种配置：

颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’ ，
如果想要加上 alpha 通道，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，
也可以使用十六进制格式，比如 ‘#ccc’

backgroundColor 网格背景色，默认透明。
borderColor 网格的边框颜色。
borderWidth 网格的边框线宽。
shadowColor 阴影颜色。
shadowBlur 图形阴影的模糊大小。
shadowOffsetX 阴影水平方向上的偏移距离。
shadowOffsetY 阴影垂直方向上的偏移距离。