组件配置概述

理解ECharts组件系统，掌握坐标系、图例、提示框等核心配置

🧩 组件系统架构

ECharts采用组件化设计，主要包含以下组件：

ECharts Option
├── 坐标系组件
│   ├── Grid (直角坐标系)
│   ├── Polar (极坐标系)
│   ├── Geo (地理坐标系)
│   └── Parallel (平行坐标系)
│
├── 坐标轴组件
│   ├── XAxis (X轴)
│   ├── YAxis (Y轴)
│   ├── AngleAxis (角度轴)
│   └── RadiusAxis (半径轴)
│
├── 辅助组件
│   ├── Legend (图例)
│   ├── Tooltip (提示框)
│   ├── Toolbox (工具栏)
│   ├── DataZoom (数据缩放)
│   ├── VisualMap (视觉映射)
│   └── Timeline (时间轴)
│
└── 标注组件
    ├── Title (标题)
    ├── MarkPoint (标记点)
    ├── MarkLine (标记线)
    └── MarkArea (标记区域)

---

📐 核心组件详解

1. Grid - 直角坐标系网格

作用: 控制图表绘图区域的位置和大小

grid: {
  left: '10%',      // 左边距
  right: '10%',     // 右边距
  top: '15%',       // 上边距
  bottom: '10%',    // 下边距
  containLabel: true // 是否包含坐标轴标签
}

应用场景:

• 调整图表边距
• 多图表对齐
• 防止标签被截断

详细文档: Grid组件

---

2. XAxis/YAxis - 坐标轴

作用: 定义坐标轴的类型、样式和刻度

xAxis: {
  type: 'category',  // 类目轴
  data: ['A', 'B', 'C'],
  axisLabel: {
    rotate: 45,      // 标签旋转
    formatter: '{value} 单位'
  },
  splitLine: {
    show: true,
    lineStyle: { type: 'dashed' }
  }
},

yAxis: {
  type: 'value',     // 数值轴
  min: 0,
  max: 100,
  axisLabel: {
    formatter: '{value} %'
  }
}

坐标轴类型:

• category - 类目轴(离散数据)
• value - 数值轴(连续数据)
• time - 时间轴
• log - 对数轴

详细文档: 坐标轴配置

---

3. Legend - 图例

作用: 显示不同系列的标记、颜色和名称

legend: {
  orient: 'horizontal',  // horizontal | vertical
  left: 'center',
  top: 'top',
  data: ['系列1', '系列2'],
  textStyle: {
    color: '#333'
  },
  selected: {
    '系列1': true,
    '系列2': false  // 默认不显示
  }
}

交互功能:

• 点击切换系列显示/隐藏
• 拖拽调整位置
• 滚动(当图例过多时)

详细文档: Legend图例

---

4. Tooltip - 提示框

作用: 鼠标悬停时显示详细信息

tooltip: {
  trigger: 'item',     // item | axis | none
  position: 'top',     // 位置
  backgroundColor: 'rgba(50,50,50,0.7)',
  textStyle: {
    color: '#fff'
  },
  formatter: function (params) {
    return `${params.name}: ${params.value}`;
  }
}

触发方式:

• item - 数据项触发(饼图、散点图)
• axis - 坐标轴触发(折线图、柱状图)
• none - 不触发

详细文档: Tooltip提示框

---

5. DataZoom - 数据缩放

作用: 支持数据区域缩放和滚动

dataZoom: [
  {
    type: 'slider',    // slider | inside
    start: 0,          // 起始百分比
    end: 100,          // 结束百分比
    height: 20,
    bottom: 10
  },
  {
    type: 'inside',    // 内置缩放(鼠标滚轮)
    start: 0,
    end: 100
  }
]

使用场景:

• 大数据量浏览
• 时间范围筛选
• 细节查看

详细文档: DataZoom缩放

---

🎨 组件组合示例

完整配置示例

const option = {
  // 标题
  title: {
    text: '销售数据分析',
    left: 'center'
  },
  
  // 图例
  legend: {
    data: ['销售额', '利润'],
    top: '10%'
  },
  
  // 提示框
  tooltip: {
    trigger: 'axis'
  },
  
  // 网格
  grid: {
    left: '5%',
    right: '5%',
    bottom: '15%',
    containLabel: true
  },
  
  // 数据缩放
  dataZoom: [{
    type: 'slider',
    bottom: '5%'
  }],
  
  // X轴
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  
  // Y轴
  yAxis: {
    type: 'value'
  },
  
  // 数据系列
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110]
    },
    {
      name: '利润',
      type: 'line',
      data: [20, 40, 30, 15, 10, 25]
    }
  ]
};

---

📚 深入学习

每个组件都有详细的配置选项：

• Grid直角坐标系 - 绘图区域控制
• XAxis/YAxis坐标轴 - 坐标轴完全指南
• Legend图例 - 图例配置详解
• Tooltip提示框 - 提示框定制
• DataZoom缩放 - 数据缩放方案

---

💡 最佳实践

1. 响应式布局: 使用百分比而非固定像素
2. containLabel: 设置为true避免标签被截断
3. 组件联动: 利用legend和tooltip提升交互体验
4. 性能考虑: 大数据量时使用datazoom分片加载

下一步学习 性能优化 或查看 实战案例！🚀