快速开始

5分钟了解ECharts知识库,开始你的数据可视化之旅!

🎯 本知识库适合谁?

✅ 初学者 (0-1年经验)

想系统学习ECharts,建立完整知识框架
需要清晰的學習路径和实践任务
建议: 从新手路径开始

✅ 中级开发者 (1-3年经验)

已会基础图表,想深入理解原理
需要性能优化技巧和最佳实践
建议: 重点阅读性能优化模块

✅ 高级架构师 (3-5年+经验)

需要设计复杂可视化系统
参考企业级方案和架构设计
建议: 查阅实战案例和核心架构

✅ 技术面试官

想了解ECharts核心技术点
准备面试题库和评估标准
建议: 阅读反模式与陷阱

🚀 三步开始学习

第1步: 环境准备 (2分钟)

bash

# 安装Node.js (如果还没有)
# https://nodejs.org/

# 创建项目
mkdir my-echarts-project && cd my-echarts-project

# 初始化
npm init -y

# 安装ECharts
npm install echarts

第2步: 第一个图表 (3分钟)

创建 index.html:

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个ECharts图</title>
  <style>
    #main {
      width: 800px;
      height: 600px;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div id="main"></div>
  
  <script type="module">
    import * as echarts from 'echarts';
    
    // 初始化图表
    const chart = echarts.init(document.getElementById('main'));
    
    // 配置选项
    const option = {
      title: {
        text: '我的第一个ECharts图',
        left: 'center'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        itemStyle: {
          color: '#667eea'
        }
      }]
    };
    
    // 渲染图表
    chart.setOption(option);
  </script>
</body>
</html>

用浏览器打开,看到柱状图了吗?🎉 恭喜!你已经成功创建了第一个ECharts图表!

第3步: 选择学习路径 (1分钟)

根据你的当前水平,选择合适的学习路径:

点击对应链接开始学习:

💡 学习建议

✅ Do's

循序渐进 - 按学习路线图逐步深入,不要跳跃
动手实践 - 每个知识点都要写代码验证
对比思考 - 对比不同方案的优劣
总结归纳 - 做笔记,形成自己的知识体系
项目驱动 - 用真实项目检验学习成果

❌ Don'ts

不要只看不动手 - 看懂≠会做
不要盲目复制粘贴 - 理解每行代码的作用
不要忽视性能优化 - 早期养成好习惯
不要跳过基础知识 - 基础决定上限
不要闭门造车 - 多参考官方文档和社区经验

🔍 如何查找资料?

方法1: 使用搜索功能

点击右上角的🔍搜索框,输入关键词:

"折线图" → 找到折线图相关文档
"性能优化" → 找到所有性能优化相关内容
"内存泄漏" → 找到dispose相关文档

方法2: 浏览导航

顶部导航栏 - 按功能模块分类
左侧侧边栏 - 当前模块的详细目录
右侧大纲 - 当前页面的章节导航

方法3: 快速参考

查阅快速参考索引,按功能查找配置项:

基础图表配置
高级图表配置
交互组件
性能优化清单

📊 知识库概览

内容规模

✅ 111篇文档
   - 95篇核心技术文档
   - 16个辅助文档

✅ 21个功能模块
   - 基础图表、高级图表、组件配置
   - 性能优化、工程化、实战案例

✅ 65,000+行内容
   - 600+代码示例
   - 80+组性能测试数据
   - 40+Mermaid流程图

特色亮点

🎯 源码级深度 - TypeScript完整实现,不只是API罗列
⚡ 真实性能数据 - 基于实际测试,FPS/CPU/内存对比
🏆 企业级案例 - 12+生产环境验证的方案
⚠️ 反模式总结 - 避免常见陷阱和bug
🗺️ 系统化路线 - 明确的时间计划和检查点

🎓 下一步

现在你已经了解了知识库的基本情况,可以:

立即开始学习 - 选择学习路径
查看快速参考 - 常用配置速查表
阅读实战案例 - 企业级方案
了解项目背景 - README总览

祝你学习愉快!🚀

💬 遇到问题?

查阅常见问题FAQ
在GitHub提Issue
加入社区讨论群

快速开始 ​

🎯 本知识库适合谁? ​

✅ 初学者 (0-1年经验) ​

✅ 中级开发者 (1-3年经验) ​

✅ 高级架构师 (3-5年+经验) ​

✅ 技术面试官 ​

🚀 三步开始学习 ​

第1步: 环境准备 (2分钟) ​

第2步: 第一个图表 (3分钟) ​

第3步: 选择学习路径 (1分钟) ​

💡 学习建议 ​

✅ Do's ​

❌ Don'ts ​

🔍 如何查找资料? ​

方法1: 使用搜索功能 ​

方法2: 浏览导航 ​

方法3: 快速参考 ​

📊 知识库概览 ​

内容规模 ​

特色亮点 ​

🎓 下一步 ​