链式调用工具类和封装思路

链式调用的封装中,为每个方法都添加 JDoc注释可方便IDE提供调用提示

class 方式封装

/**
 * ECharts 配置类，用于链式配置图表选项
 */
class EChartsConfig {
  constructor() {
    this.option = {};
  }

  /**
   * 设置图表标题
   * @param {string} text - 主标题文本
   * @param {string} [subtext=''] - 副标题文本
   * @returns {EChartsConfig} 返回当前实例用于链式调用
   */
  title(text, subtext = '') {
    this.option.title = {
      text,
      subtext
    };
    return this;
  }

  /**
   * 设置图例配置
   * @param {Array} [data=[]] - 图例数据数组
   * @param {string} [position='top'] - 图例位置('top'|'bottom'|'left'|'right')
   * @returns {EChartsConfig} 返回当前实例用于链式调用
   */
  legend(data = [], position = 'top') {
    this.option.legend = {
      data,
      position
    };
    return this;
  }

  /**
   * 设置提示框配置
   * @param {string} [trigger='item'] - 触发类型('item'|'axis'|'none')
   * @param {string|Function} [formatter=null] - 提示框内容格式化器
   * @returns {EChartsConfig} 返回当前实例用于链式调用
   */
  tooltip(trigger = 'item', formatter = null) {
    this.option.tooltip = {
      trigger,
      formatter
    };
    return this;
  }

  /**
   * 设置X轴配置
   * @param {string} [type='category'] - 坐标轴类型('value'|'category'|'time'|'log')
   * @param {Array} [data=[]] - 坐标轴数据
   * @param {string} [name=''] - 坐标轴名称
   * @returns {EChartsConfig} 返回当前实例用于链式调用
   */
  xAxis(type = 'category', data = [], name = '') {
    this.option.xAxis = {
      type,
      data,
      name
    };
    return this;
  }

  /**
   * 设置Y轴配置
   * @param {string} [type='value'] - 坐标轴类型('value'|'category'|'time'|'log')
   * @param {string} [name=''] - 坐标轴名称
   * @returns {EChartsConfig} 返回当前实例用于链式调用
   */
  yAxis(type = 'value', name = '') {
    this.option.yAxis = {
      type,
      name
    };
    return this;
  }

  /**
   * 添加系列配置
   * @param {string} name - 系列名称
   * @param {string} [type='line'] - 图表类型('line'|'bar'|'pie'|'scatter'等)
   * @param {Array} [data=[]] - 系列数据
   * @param {Object} [options={}] - 系列额外配置项
   * @returns {EChartsConfig} 返回当前实例用于链式调用
   */
  series(name, type = 'line', data = [], options = {}) {
    if (!this.option.series) {
      this.option.series = [];
    }
    
    this.option.series.push({
      name,
      type,
      data,
      ...options
    });
    
    return this;
  }

  /**
   * 合并自定义配置
   * @param {Object} config - 自定义配置对象
   * @returns {EChartsConfig} 返回当前实例用于链式调用
   */
  custom(config) {
    this.option = {
      ...this.option,
      ...config
    };
    return this;
  }

  /**
   * 获取最终配置对象
   * @returns {Object} 返回配置好的option对象
   */
  get() {
    return this.option;
  }
}

export default EChartsConfig

function 方式封装

/**
 * @typedef {{
 *   value: Object,
 *   title: function(Object): PieOption,
 *   tooltip: function(Object): PieOption,
 *   xAxis: function(Object): PieOption,
 *   yAxis: function(Object): PieOption,
 *   series: function({name?: string, type?: string, data?: Array, options?: Object}): PieOption
 * }} PieOption
 */

/**
 * ECharts 饼图配置生成器
 * @returns {PieOption}
 */
function PieGenerator() {
  /** @type {PieOption} */
  const option = {
    value: {},

    /**
     * 设置标题配置
     * @param {Object} option 标题配置项
     * @returns {PieOption} this
     */
    title(option) {
      this.value.title = { ...option };
      return this;
    },
    /**
     * 设置提示框配置
     * @param {Object} option 提示框配置项
     * @returns {PieOption} this
     */
    tooltip(option) {
      this.value.tooltip = { ...option };
      return this;
    },
    /**
     * 设置x轴配置
     * @param {Object} option x轴配置项
     * @returns {PieOption} this
     */
    xAxis(option) {
      this.value.xAxis = { ...option };
      return this;
    },
    /**
     * 设置y轴配置
     * @param {Object} option y轴配置项
     * @returns {PieOption} this
     */
    yAxis(option) {
      this.value.yAxis = { ...option };
      return this;
    },
    /**
     * 设置系列配置
     * @param {Object} params 系列配置参数
     * @param {string} [params.name] 系列名称
     * @param {string} [params.type="line"] 系列类型
     * @param {Array} [params.data=[]] 系列数据
     * @param {Object} [params.options={}] 其他配置项
     * @returns {PieOption} this
     */
    series({ name, type = "line", data = [], options = {} } = {}) {
      this.value.series = [];
      this.value.series.push({
        name,
        type,
        data,
        ...options,
      });
      return this;
    },
    /**
     * 其他配置
     * @param {Object} option
     * @returns
     */
    custom(option) {
      this.value = {
        ...this.value,
        ...option,
      };
      return this;
    },
    /**
     * 获取配置好的 option
     * @returns 返回最终配置 option
     */
    get() {
      return this.value;
    },
  };

  return option;
}

export default PieGenerator;