环境搭建

fork zrender和echarts，clone两个仓库。
两个仓储需要放到同一个目录下
image.png
下载依赖，删除echarts/node_modules/zrender，链接zrender到echarts/node_modules/zrender

  1. # 创建软链接  mklink /d “需要创建链接的文件夹绝对路径” “需要指向的文件夹绝对路径”
  2. $ mklink /D  E:\code\openSourceWorkspace\echart-workspace\echarts\node_modules\zrender E:\code\openSourceWorkspace\echart-workspace\zrender\

编译代码

  1. $ node build/build.js

image.png
你可以在test文件下找一个用例跑起来，测试一下你编译的代码是否正确。
image.png

源代码目录

echarts目录结构

  • build：打包生成dist文件
  • src：源文件
    • chart:某种图表特有的
    • component：组件
      • axis：坐标轴
      • dataZoom：缩放数据
      • geo：地理相关
      • helper：复杂算法的工具
      • lengend：图例
      • marker：标记
        • 标记点
        • 标记线
        • 标记区域
      • radar：雷达图全局设置
      • timeline：时间轴
      • toolbox：工具箱
      • tooltip：工具提示
      • visualMap：视觉映射
      • 其他功能
    • coord：坐标系
      • calender：日历
      • cartensian：笛卡尔坐标系
      • geo：地理坐标系
      • parallel：平行图坐标系
      • polar：极坐标坐标系
      • radar：雷达坐标系
      • single：单轴坐标系
  • test：测试
    • *.html 复现测试文件
  • theme：主题

zrender目录结构

  • build：打包生成dist文件
  • src：源文件
    • animation：动画
    • contain：包含容器
    • container：容器
    • core
    • dom
    • graphic：图形
      • helper
      • mixin
      • shape
    • mixin
    • svg：SVG单独渲染方式
    • tool
    • vml

  • test：测试

    Echrats Tag 简单介绍

  • support：提问

  • bug：缺陷
  • enhancement：现有功能的增强

    如何debug

    在test文件夹下新建测试用例debug-17708.html ```html <!DOCTYPE html>
  1. 监听源文件变化
  2. ```bash
  3. $ npm run dev

使用vscode插件Live Server打开debug-17708.html式

工作流

image.png

参考

【1】【滚城一团】首秀 debug ECharts 大乌龙，问题居然出在……【滚城一团的 ECharts 训练营·第二课时】_哔哩哔哩_bilibili
【2】echarts 源码分析 —— 基本框架_木子、的博客-CSDN博客_echarts源码
【3】echarts 源码分析 —— 具体内容_木子、的博客-CSDN博客_echarts源码解读