ECharts KB

Appearance

新手学习路径 (2-3周) ​

目标: 从零开始，系统掌握ECharts基础，能够独立完成常见图表开发

📅 学习计划总览 ​

🎯 第1周: 基础入门 ​

Day 1: 环境搭建与Hello World ​

学习目标:

  • 理解ECharts是什么，能解决什么问题
  • 完成开发环境搭建
  • 运行第一个ECharts示例

核心内容:

  1. ECharts简介与应用场景
  2. 安装方式(CDN/NPM/按需引入)
  3. 初始化图表实例
  4. 配置option基本结构

实践任务:

javascript
// 创建你的第一个ECharts图表
import * as echarts from 'echarts';

const chart = echarts.init(document.getElementById('main'));

const option = {
  title: { text: '我的第一个ECharts图' },
  xAxis: { data: ['A', 'B', 'C'] },
  yAxis: {},
  series: [{
    type: 'bar',
    data: [5, 20, 36]
  }]
};

chart.setOption(option);

推荐阅读:

Day 2-3: 折线图 Line ​

学习目标:

  • 掌握折线图的基本配置
  • 理解series系列概念
  • 学会多系列对比

核心知识点:

  • type: 'line' 基本用法
  • smooth平滑曲线
  • areaStyle面积图
  • markLine/markPoint标记

实践任务:

  • 实现股票价格趋势图
  • 实现气温变化折线图
  • 实现多产品线销售对比

推荐阅读:

  • 折线图 Line详解

Day 4-5: 柱状图 Bar ​

学习目标:

  • 掌握柱状图的多种形态
  • 理解堆叠柱状图原理
  • 学会横向柱状图

核心知识点:

  • type: 'bar' 基本配置
  • stack堆叠效果
  • barWidth/barMaxWidth柱子宽度控制
  • label标签显示

实践任务:

  • 实现部门业绩对比图
  • 实现堆叠柱状图展示产品构成
  • 实现排行榜横向柱状图

推荐阅读:

  • 柱状图 Bar详解

Day 6: 饼图 Pie ​

学习目标:

  • 掌握饼图的基本配置
  • 理解环形图实现原理
  • 学会南丁格尔玫瑰图

核心知识点:

  • type: 'pie' radius半径配置
  • roseType玫瑰图模式
  • emphasis高亮效果
  • formatter格式化标签

实践任务:

  • 实现市场份额占比图
  • 实现环形图展示进度
  • 实现玫瑰图展示多维度数据

推荐阅读:

  • 饼图 Pie详解

🎯 第2周: 进阶技能 ​

Day 8-9: 散点图与K线图 ​

学习目标:

  • 掌握散点图相关性分析
  • 理解气泡图实现
  • 学会K线图金融数据展示

核心知识点:

  • type: 'scatter' 散点图
  • symbolSize动态大小
  • type: 'candlestick' K线图
  • itemStyle颜色配置

实践任务:

  • 实现身高体重相关性分析
  • 实现城市GDP气泡图
  • 实现股票K线图

推荐阅读:

  • 散点图 Scatter
  • K线图 Candlestick

Day 10-11: 坐标系系统 ​

学习目标:

  • 理解Grid直角坐标系
  • 掌握XAxis/YAxis配置
  • 学会双Y轴实现

核心知识点:

  • grid网格配置
  • xAxis/yAxis坐标轴类型(value/category/time)
  • axisLabel标签格式化
  • splitLine分割线

实践任务:

  • 实现双Y轴展示销售额和增长率
  • 实现时间轴自动适配
  • 实现自定义刻度标签

推荐阅读:

  • Grid直角坐标系
  • XAxis/YAxis坐标轴

Day 12-13: 交互组件 ​

学习目标:

  • 掌握Tooltip提示框
  • 理解Legend图例
  • 学会DataZoom缩放

核心知识点:

  • tooltip触发方式(item/axis)
  • legend位置和样式
  • datazoom滑块缩放
  • toolbox工具栏

实践任务:

  • 实现自定义Tooltip内容
  • 实现图例开关系列
  • 实现大数据量缩放浏览

推荐阅读:

  • Tooltip提示框
  • Legend图例
  • DataZoom缩放

🎯 第3周: 实战演练 ​

Day 15-16: 事件处理与交互 ​

学习目标:

  • 掌握图表事件绑定
  • 理解事件参数对象
  • 学会图表联动

核心知识点:

  • chart.on('click', callback) 事件监听
  • params事件参数解析
  • dispatchAction 触发动作
  • connect多图联动

实践任务:

  • 实现点击柱子显示详情
  • 实现图表联动效果
  • 实现钻取下钻功能

推荐阅读:

  • 事件处理机制

Day 17-19: 综合实战项目 ​

项目1: 电商数据看板

  • 销售趋势折线图
  • 品类占比饼图
  • 热销商品排行榜
  • 实时订单监控

项目2: 学生成绩分析系统

  • 各科成绩雷达图
  • 班级平均分对比柱状图
  • 成绩分布散点图
  • 个人成长趋势折线图

项目3: 气象数据可视化

  • 年度气温变化折线图
  • 降水量柱状图
  • 风向玫瑰图
  • 空气质量气泡图

✅ 学习成果检验 ​

完成本阶段学习后，你应该能够：

  • [ ] 独立搭建ECharts开发环境
  • [ ] 熟练使用6种基础图表(Line/Bar/Pie/Scatter/Candlestick/Radar)
  • [ ] 配置坐标系系统和交互组件
  • [ ] 实现图表事件处理和联动
  • [ ] 完成中等复杂度的数据可视化项目

📚 下一步学习 ​

完成新手路径后，建议继续学习：

  1. 进阶路径(4-6周) - 深入理解架构和性能优化
  2. 核心架构模块 - 理解渲染引擎和更新机制
  3. 性能优化 - 掌握大数据量处理技巧

💡 学习建议 ​

  1. 动手实践: 每个知识点都要亲自写代码验证
  2. 查看源码: 遇到不懂的配置，查阅官方文档和源码
  3. 总结归纳: 建立自己的配置速查表
  4. 参与社区: 在GitHub Issues中学习和解决问题

祝你学习顺利！🚀

Released under the CC BY-SA 4.0 License.

Copyright © 2026 JarodChen