ECharts 学习目录

ECharts 学习目录

1. ECharts 简介

   • ECharts 的概述
   • ECharts 的主要特点
   • ECharts 与其他图表库的比较

2. 环境搭建与安装

   • 使用 npm/yarn 安装 ECharts
   • 使用 CDN 引入 ECharts
   • 使用 ECharts 的基本 HTML 结构

3. ECharts 基础

   • 基本图表
     • 创建一个简单的折线图
     • 创建一个简单的柱状图
     • 创建一个简单的饼图
   • 图表的基本配置
     • title, tooltip, legend, grid 等基本配置项
   • 数据与样式配置
     • 配置数据源
     • 配置图表的样式（颜色、线条、字体等）

4. 折线图 (Line Chart)

   • 基本折线图配置
   • 多条折线图
   • 数据标记（标记点、标记线）
   • 平滑曲线与折线图的切换

5. 柱状图 (Bar Chart)

   • 基本柱状图配置
   • 分组柱状图与堆叠柱状图
   • 轴的配置与调整
   • 柱状图的数据标签与自定义样式

6. 饼图 (Pie Chart)

   • 基本饼图配置
   • 多层饼图与半径配置
   • 饼图的标签与样式
   • 饼图的交互效果与动画

7. 散点图 (Scatter Chart)

   • 基本散点图配置
   • 散点图的颜色与形状配置
   • 散点图的坐标轴与标记

8. 面积图 (Area Chart)

   • 基本面积图配置
   • 堆叠面积图与平铺面积图
   • 面积图的颜色渐变与透明度设置

9. 雷达图 (Radar Chart)

   • 基本雷达图配置
   • 多维雷达图与数据对比
   • 雷达图的样式与交互设置

10. K线图 (K-Line Chart)

    • 基本 K 线图配置
    • K 线图的技术指标（如移动平均线）
    • K 线图的数据格式与处理

11. 地图 (Map)

    • 基本地图配置
    • 中国地图与世界地图
    • 地图的数据源与样式配置
    • 地图的标记与热力图

12. 树图 (Tree Chart)

    • 基本树图配置
    • 树图的层级与节点配置
    • 树图的交互与样式设置

13. 仪表盘 (Gauge)

    • 基本仪表盘配置
    • 多个仪表盘与仪表盘的更新
    • 仪表盘的样式与动态效果

14. 热力图 (Heatmap)

    • 基本热力图配置
    • 热力图的数据格式与样式
    • 热力图的颜色映射与动画效果

15. 图表组合

    • 组合图表（如折线图与柱状图组合）
    • 多图表布局与配置
    • 图表间的联动效果

16. 交互与事件

    • 图表的事件处理（点击、鼠标悬浮等）
    • 图表的工具提示与自定义信息
    • 图表的缩放与拖拽

17. 数据可视化高级特性

    • 自定义系列 (Custom Series)
      • 使用自定义系列创建复杂图表
    • 自定义图形 (Custom Graphics)
      • 使用自定义图形组件绘制特殊图形
    • 图表动画与过渡效果
      • 动画效果的配置与使用
    • 图表的性能优化
      • 大数据量图表的优化策略

18. ECharts 与其他技术的结合

    • 与 Vue.js 结合
      • 使用 Vue-ECharts 组件
    • 与 React 结合
      • 使用 ECharts-For-React 组件
    • 与 Angular 结合
      • 使用 ngx-echarts 组件

19. ECharts 的国际化与主题

    • 配置国际化与多语言支持
    • 使用 ECharts 的内置主题
    • 自定义主题与样式

20. 实际项目应用

    • 创建数据仪表盘
      • 结合多种图表展示数据
    • 构建实时数据监控系统
      • 实时数据的展示与更新
    • 实现数据分析与报表系统
      • 复杂数据的可视化展示

21. 常见问题与解决方案

    • 常见错误与调试
    • 数据格式与处理
    • 图表的兼容性问题

---

这个目录提供了对 ECharts 的全面学习路线