grid直角坐标系完全指南

📋 概述

**grid（直角坐标系网格）**是ECharts中用于控制图表绘图区域布局的核心组件。它决定了x轴和y轴的绘制范围、边距、背景等，是实现多图表对齐、响应式布局的基础。

核心价值

• 精确控制：像素级控制绘图区域位置和大小
• 多图表布局：实现多个图表的精确对齐
• 响应式适配：根据容器大小自动调整
• 视觉优化：控制边距、背景、阴影等视觉效果

---

🎯 核心概念

1. 基础grid配置

option = {
  grid: {
    left: '10%',      // 左边距
    right: '10%',     // 右边距
    bottom: '10%',    // 下边距
    top: '10%',       // 上边距
    containLabel: true // 是否包含坐标轴标签
  },
  
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  
  yAxis: {
    type: 'value'
  },
  
  series: [{
    type: 'bar',
    data: [10, 20, 30]
  }]
};

2. 多grid布局

option = {
  // 定义两个grid
  grid: [
    { left: '10%', right: '50%', top: '10%', height: '35%' },
    { left: '10%', right: '50%', top: '55%', height: '35%' }
  ],
  
  // 第一个x轴使用第一个grid
  xAxis: [
    { gridIndex: 0, ... },
    { gridIndex: 1, ... }
  ],
  
  // 第一个y轴使用第一个grid
  yAxis: [
    { gridIndex: 0, ... },
    { gridIndex: 1, ... }
  ],
  
  series: [
    { xAxisIndex: 0, yAxisIndex: 0, ... }, // 使用第一个grid
    { xAxisIndex: 1, yAxisIndex: 1, ... }  // 使用第二个grid
  ]
};

---

🔧 详细配置项

完整grid配置

option = {
  grid: {
    // === 位置和尺寸（四选一）===
    
    // 方式1：百分比（推荐，响应式）
    left: '10%',
    right: '10%',
    top: '10%',
    bottom: '10%',
    
    // 方式2：像素值（固定）
    // left: 50,
    // right: 50,
    // top: 50,
    // bottom: 50,
    
    // 方式3：宽度高度
    // width: '80%',
    // height: '70%',
    
    // 方式4：混合使用
    // left: 50,
    // right: '10%',
    // top: 50,
    // height: '70%',
    
    // === 标签包含 ===
    containLabel: false, // 默认false，不计算标签空间
    
    // === 背景样式 ===
    backgroundColor: 'transparent', // 背景色
    borderColor: '#ccc',            // 边框颜色
    borderWidth: 0,                 // 边框宽度
    borderRadius: 0,                // 圆角半径
    
    // === 阴影 ===
    shadowBlur: 0,                  // 阴影模糊
    shadowColor: 'transparent',     // 阴影颜色
    shadowOffsetX: 0,               // X偏移
    shadowOffsetY: 0,               // Y偏移
    
    // === tooltip限制 ===
    tooltip: {
      show: true,  // 是否在grid内显示tooltip
      confine: false // 是否限制在grid内
    }
  }
};

containLabel详解

// ❌ containLabel: false（默认）
// 坐标轴标签可能超出容器边界
grid: {
  left: '10%',
  right: '10%',
  containLabel: false
}

// ✅ containLabel: true
// 自动预留标签空间，确保标签可见
grid: {
  left: '10%',
  right: '10%',
  containLabel: true // 推荐开启
}

---

💡 实战案例

案例1：标准柱状图布局

option = {
  title: {
    text: '月度销售统计',
    left: 'center',
    top: 10
  },
  
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%', // 为标题预留空间
    containLabel: true // 确保标签不被裁剪
  },
  
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月'],
    axisLabel: {
      fontSize: 12
    }
  },
  
  yAxis: {
    type: 'value',
    name: '销售额（万元）',
    nameTextStyle: {
      fontSize: 12
    }
  },
  
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70]
  }]
};

案例2：双图表垂直布局

option = {
  title: {
    text: '销售和利润分析',
    left: 'center'
  },
  
  // 定义两个grid
  grid: [
    {
      left: '10%',
      right: '10%',
      top: '15%',
      height: '35%', // 第一个图表高度
      borderColor: '#eee',
      borderWidth: 1
    },
    {
      left: '10%',
      right: '10%',
      top: '55%', // 第二个图表位置
      height: '35%',
      borderColor: '#eee',
      borderWidth: 1
    }
  ],
  
  // 第一个图表的坐标轴
  xAxis: [
    {
      type: 'category',
      data: ['Q1', 'Q2', 'Q3', 'Q4'],
      gridIndex: 0, // 使用第一个grid
      axisLabel: { show: false } // 隐藏第一个的x轴标签
    },
    {
      type: 'category',
      data: ['Q1', 'Q2', 'Q3', 'Q4'],
      gridIndex: 1, // 使用第二个grid
      position: 'bottom'
    }
  ],
  
  // 第一个图表的y轴
  yAxis: [
    {
      type: 'value',
      name: '销售额',
      gridIndex: 0,
      position: 'left'
    },
    {
      type: 'value',
      name: '利润',
      gridIndex: 1,
      position: 'left'
    }
  ],
  
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [320, 332, 301, 334],
      xAxisIndex: 0,
      yAxisIndex: 0
    },
    {
      name: '利润',
      type: 'line',
      data: [80, 92, 75, 90],
      xAxisIndex: 1,
      yAxisIndex: 1,
      smooth: true
    }
  ]
};

案例3：响应式grid布局

// 根据屏幕尺寸动态调整grid
function getResponsiveGrid() {
  const isMobile = window.innerWidth < 768;
  
  return {
    left: isMobile ? '5%' : '10%',
    right: isMobile ? '5%' : '10%',
    top: isMobile ? '20%' : '15%',
    bottom: isMobile ? '15%' : '10%',
    containLabel: true
  };
}

option = {
  grid: getResponsiveGrid(),
  
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  
  yAxis: {
    type: 'value'
  },
  
  series: [{
    type: 'bar',
    data: [10, 20, 30, 40, 50]
  }]
};

// 监听窗口变化
window.addEventListener('resize', () => {
  chart.setOption({
    grid: getResponsiveGrid()
  });
});

案例4：带背景的卡片式布局

option = {
  backgroundColor: '#f5f7fa', // 整体背景
  
  grid: {
    left: '5%',
    right: '5%',
    top: '10%',
    bottom: '10%',
    backgroundColor: '#fff', // grid背景
    borderColor: '#e0e0e0',
    borderWidth: 1,
    borderRadius: 8, // 圆角
    shadowBlur: 10,
    shadowColor: 'rgba(0, 0, 0, 0.1)',
    shadowOffsetX: 0,
    shadowOffsetY: 5,
    containLabel: true
  },
  
  xAxis: {
    type: 'category',
    data: ['产品A', '产品B', '产品C', '产品D']
  },
  
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: '#f0f0f0'
      }
    }
  },
  
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80],
    itemStyle: {
      borderRadius: [4, 4, 0, 0]
    }
  }]
};

---

⚠️ 常见问题

问题1：标签被裁剪

症状：x轴或y轴标签显示不完整

解决：

// ❌ 错误：containLabel为false，标签可能被裁剪
grid: {
  left: '10%',
  right: '10%',
  containLabel: false
}

// ✅ 正确：开启containLabel，自动预留空间
grid: {
  left: '10%',
  right: '10%',
  containLabel: true
}

// 或者手动增加边距
grid: {
  left: '15%', // 增加左边距
  right: '15%',
  bottom: '15%'
}

问题2：多图表不对齐

症状：上下两个图表的x轴不对齐

解决：

// ✅ 确保两个grid使用相同的left和right
grid: [
  {
    left: '10%',
    right: '10%',
    top: '10%',
    height: '35%'
  },
  {
    left: '10%',  // 相同的left
    right: '10%', // 相同的right
    top: '55%',
    height: '35%'
  }
]

问题3：移动端显示异常

症状：在小屏幕上图表内容溢出

解决：

// 使用百分比而非固定像素
grid: {
  left: '5%',   // ✅ 响应式
  right: '5%',
  // left: 50,  // ❌ 固定值，小屏幕会溢出
  containLabel: true
}

// 或者动态计算
const containerWidth = chartDom.clientWidth;
const margin = Math.max(30, containerWidth * 0.05);

grid: {
  left: margin,
  right: margin
}

---

🎯 最佳实践

1. 统一边距规范

// 项目统一的grid配置
const GRID_CONFIG = {
  standard: {
    left: '10%',
    right: '10%',
    top: '15%',
    bottom: '10%',
    containLabel: true
  },
  
  compact: {
    left: '5%',
    right: '5%',
    top: '10%',
    bottom: '5%',
    containLabel: true
  },
  
  spacious: {
    left: '15%',
    right: '15%',
    top: '20%',
    bottom: '15%',
    containLabel: true
  }
};

// 使用
option = {
  grid: GRID_CONFIG.standard
};

2. 多图表对齐技巧

// 所有图表使用相同的grid配置
const sharedGridConfig = {
  left: '10%',
  right: '10%'
};

// 图表1
grid: [
  { ...sharedGridConfig, top: '10%', height: '35%' }
]

// 图表2
grid: [
  { ...sharedGridConfig, top: '55%', height: '35%' }
]

3. 性能优化

// 大数据量时简化grid
series: [{
  type: 'scatter',
  data: hugeData
}],

grid: {
  left: '5%',   // 减小边距，增加绘图区域
  right: '5%',
  top: '5%',
  bottom: '5%'
}

---

📊 性能指标

配置	渲染时间	影响
简单grid	<1ms	无影响
带阴影	+2-5ms	轻微
多grid（4个）	+5-10ms	适中
圆角+阴影	+8-15ms	注意性能

---

🔗 相关链接

• xAxis-yAxis坐标轴
• 多图表布局最佳实践
• 响应式设计

---

💎 总结

grid核心价值：

• ✅ 精确控制绘图区域
• ✅ 实现多图表对齐
• ✅ 响应式布局适配
• ✅ 视觉效果优化

关键配置原则：

1. 始终开启 containLabel: true
2. 优先使用 百分比而非像素
3. 多图表对齐 使用相同的left/right
4. 响应式适配 根据屏幕动态调整

掌握grid，让图表布局更精准！📐

多图表网格布局

{
  "title": {
    "text": "双图表对比",
    "left": "center"
  },
  "grid": [
    {
      "left": "5%",
      "right": "55%",
      "top": "15%",
      "height": "35%"
    },
    {
      "left": "55%",
      "right": "5%",
      "top": "15%",
      "height": "35%"
    }
  ],
  "xAxis": [
    {
      "gridIndex": 0,
      "type": "category",
      "data": [
        "A",
        "B",
        "C"
      ]
    },
    {
      "gridIndex": 1,
      "type": "category",
      "data": [
        "D",
        "E",
        "F"
      ]
    }
  ],
  "yAxis": [
    {
      "gridIndex": 0,
      "type": "value"
    },
    {
      "gridIndex": 1,
      "type": "value"
    }
  ],
  "series": [
    {
      "type": "bar",
      "xAxisIndex": 0,
      "yAxisIndex": 0,
      "data": [
        10,
        20,
        30
      ]
    },
    {
      "type": "line",
      "xAxisIndex": 1,
      "yAxisIndex": 1,
      "data": [
        15,
        25,
        35
      ]
    }
  ]
}