OptionManager - 选项管理器

发布于: 5/16/2022 阅读大约需要2分钟

src/model/OptionManager.ts

setOption - 图表配置变更

方法流程

方法解析

  1. 标准化图表数据(传入参数的series的data以及dataset的source)。
  2. 克隆option作为后续操作参数。
  3. 调用parseRawOption对option进行解析, 得到 newParsedOption
  4. 将解析后的newParsedOption.baseOption赋值给_newBaseOption进行存储,用于下次setOption进行合并(merge)。
  5. 条件判断 if如果有_optionBackup(上一次setOption的option), 则使用newParsedOptiontimelinemediaList 替换旧option备份(_optionBackup)对应属性。
    (官方注释解释:timeline选项和media选项不支持merge, 直接替换,🔗 官方文档解释
    条件判断 else如果没有则将解析后的newParsedOption赋值给 _optionBackup

_optionBackup是由第一次setOption创建的, 会在每次 setOption调用的时候通过内置方法 mergeToBackupOption来与新option对象进行合并

parseRawOption - 解析图表配置

概括:解析并返回处理后的用户传入的option数据

方法解析

  1. 如果有移动端自适应 media 配置(配置介绍), 解析并放入 mediaList
  2. doPreprocess预处理配置项, 遍历 配置预处理方法 依次处理option

配置预处理方法: optionPreprocessorFuns, 在 echarts.ts 中通过 registerPreprocessor 方法维护, 各个 echarts 扩展通过调用该方法注册option前置处理方法,用于对option数据及结构进行改动以适用于组件 目前有14个预设处理器 image.png

  1. 如果有timeline配置,处理timeline配置
  2. 如果有mediaList(见步骤1),处理mediaList
  3. 返回处理后的数据
{
  baseOption: baseOption, // 即已经处理过的用户传入的option
  timelineOptions: timelineOptionsOnRoot || [], // 时间线设置 []
  mediaDefault: mediaDefault, // 默认媒体设置, 不配置就是undefined
  mediaList: mediaList, // 媒体查询列表, 不配置就是空数组 []
}

mountOption - 挂载图表配置

概述:用于初始化当前实例的属性, 并根据是否需要重新创建标识来返回完整的option备份或者上一次setOption的选项副本.

OptionManager.prototype.mountOption = function (isRecreate) {
  var optionBackup = this._optionBackup;
  this._timelineOptions = optionBackup.timelineOptions;
  this._mediaList = optionBackup.mediaList;
  this._mediaDefault = optionBackup.mediaDefault;
  this._currentMediaIndices = [];
  return clone(isRecreate ? optionBackup.baseOption : this._newBaseOption);
};

方法流程