基础图表概述

掌握ECharts最常用的6种基础图表，解决80%的可视化需求

📊 基础图表类型

ECharts提供6种最常用的基础图表类型：

图表类型	适用场景	难度	文档链接
折线图 Line	趋势分析、时间序列	⭐	查看详情
柱状图 Bar	分类对比、排名统计	⭐	查看详情
饼图 Pie	占比分析、构成比例	⭐	查看详情
散点图 Scatter	相关性分析、分布规律	⭐⭐	查看详情
K线图 Candlestick	金融数据、股票行情	⭐⭐	查看详情
雷达图 Radar	多维度评估、能力对比	⭐⭐	查看详情

---

🎯 学习建议

初学者路径

建议顺序:

1. 第1步: 折线图 - 最简单、最常用
2. 第2步: 柱状图 - 理解series系列概念
3. 第3步: 饼图 - 学习特殊的极坐标系
4. 第4-6步: 其他图表 - 根据项目需求选择

---

🔧 通用配置项

所有基础图表都共享以下核心配置：

1. series基本结构

{
  type: 'bar',  // 图表类型
  name: '系列名称',
  data: [10, 20, 30],  // 数据数组
  colorBy: 'series',  // 颜色策略
  legendHoverLink: true,  // 图例联动
  hoverAnimation: true,  // 悬停动画
  animation: true,  // 开启动画
  animationDuration: 1000  // 动画时长
}

2. 数据格式

一维数组 (适用于单系列):

data: [10, 20, 30, 40, 50]

二维数组 (适用于多系列):

data: [
  [10, 20, 30],  // 系列1
  [15, 25, 35]   // 系列2
]

对象数组 (支持更多配置):

data: [
  { value: 10, name: 'A' },
  { value: 20, name: 'B' },
  { value: 30, name: 'C' }
]

3. 样式配置

{
  // 默认样式
  itemStyle: {
    color: '#5470c6',
    borderColor: '#fff',
    borderWidth: 0,
    shadowBlur: 10,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  },
  
  // 高亮样式
  emphasis: {
    itemStyle: {
      color: '#91cc75'
    }
  },
  
  // 标签
  label: {
    show: true,
    position: 'top',
    formatter: '{c}',
    fontSize: 12,
    color: '#333'
  }
}

---

📈 快速示例

折线图

{
  type: 'line',
  data: [150, 230, 224, 218, 135, 147, 260],
  smooth: true,  // 平滑曲线
  areaStyle: {}  // 面积图
}

柱状图

{
  type: 'bar',
  data: [120, 200, 150, 80, 70, 110, 130],
  barWidth: '60%',  // 柱子宽度
  stack: 'total',   // 堆叠
  label: { show: true }
}

饼图

{
  type: 'pie',
  radius: ['40%', '70%'],  // 环形图
  data: [
    { value: 1048, name: '搜索引擎' },
    { value: 735, name: '直接访问' },
    { value: 580, name: '邮件营销' }
  ],
  roseType: 'area'  // 南丁格尔玫瑰图
}

---

🎨 最佳实践

1. 选择合适的图表类型

展示趋势 → 折线图

适合: 股票价格、气温变化、用户增长

对比数据 → 柱状图

适合: 销售额对比、部门业绩、产品排名

显示占比 → 饼图

适合: 市场份额、预算分配、用户构成

分析关系 → 散点图

适合: 身高体重相关性、GDP与幸福感

金融数据 → K线图

适合: 股票行情、外汇交易、期货数据

多维评估 → 雷达图

适合: 能力评估、产品对比、绩效考核

---

2. 颜色搭配原则

单色系渐变:

color: ['#5470c6', '#91cc75', '#fac858', '#ee6666']

主题色统一:

// 使用品牌色
const brandColors = ['#1890ff', '#52c41a', '#faad14', '#f5222d'];

避免色彩过多:

• 饼图: 不超过7个扇区
• 柱状图: 不超过5个系列
• 折线图: 不超过4条线

---

3. 响应式设计

// 监听窗口大小变化
window.addEventListener('resize', () => {
  chart.resize();
});

// 移动端优化
const isMobile = window.innerWidth < 768;
chart.setOption({
  legend: {
    orient: isMobile ? 'horizontal' : 'vertical',
    bottom: isMobile ? 0 : 'center'
  },
  grid: {
    left: isMobile ? '5%' : '10%',
    right: isMobile ? '5%' : '10%'
  }
});

---

⚠️ 常见陷阱

1. 数据为空时崩溃

错误做法:

chart.setOption({
  series: [{ data: [] }]  // 空数组可能导致报错
});

正确做法:

if (data.length === 0) {
  chart.setOption({
    graphic: {
      elements: [{
        type: 'text',
        left: 'center',
        top: 'middle',
        style: { text: '暂无数据' }
      }]
    }
  });
} else {
  chart.setOption({ series: [{ data }] });
}

---

2. 内存泄漏

忘记销毁实例:

// SPA路由切换时
router.beforeEach((to, from, next) => {
  if (chartInstance) {
    chartInstance.dispose();  // 必须销毁
    chartInstance = null;
  }
  next();
});

---

3. 性能问题

大数据量未优化:

// 超过1万数据点时
{
  type: 'line',
  data: largeDataArray,
  sampling: 'lttb',  // 启用采样
  progressive: 1000  // 渐进式渲染
}

---

📚 深入学习

每个图表类型都有详细的文档：

• 折线图 Line - 趋势分析完全指南
• 柱状图 Bar - 分类对比最佳实践
• 饼图 Pie - 占比分析技巧
• 散点图 Scatter - 相关性分析方法
• K线图 Candlestick - 金融数据可视化
• 雷达图 Radar - 多维度评估方案

---

🎯 实战练习

练习1: 销售数据分析

创建一个包含以下内容的仪表板：

• 月度销售趋势(折线图)
• 品类销售占比(饼图)
• 各地区销售额(柱状图)

练习2: 学生成绩系统

实现一个成绩分析页面：

• 各科成绩对比(柱状图)
• 成绩分布(散点图)
• 能力雷达图(雷达图)

---

💡 总结

基础图表是ECharts的核心，掌握这6种图表能够解决大部分可视化需求。

关键要点:

1. ✅ 根据数据特点选择合适的图表类型
2. ✅ 合理使用颜色和标签，保持视觉清晰
3. ✅ 注意性能优化和内存管理
4. ✅ 做好响应式适配

下一步学习 高级图表 或 组件配置！🚀

示例演示

{
  "series": [
    {
      "data": []
    }
  ]
}

示例演示

{
  "graphic": {
    "elements": [
      {
        "type": "text",
        "left": "center",
        "top": "middle",
        "style": {
          "text": "暂无数据"
        }
      }
    ]
  }
}