封装echarts组件

代码如下: /** * 创建一个 ECharts 组件 * @param {HTMLElement} domElement - 要初始化 ECharts 的 DOM 元素 * @param {string} type - 图表类型(例如 'bar', 'line', 'pie' 等) * @

代码如下:

/**
 * 创建一个 ECharts 组件
 * @param {HTMLElement} domElement - 要初始化 ECharts 的 DOM 元素
 * @param {string} type - 图表类型(例如 'bar', 'line', 'pie' 等)
 * @param {Object} userOptions - 用户自定义的配置项
 * @param {Object} [eventHandlers] - 事件处理器对象,例如 { click: fn, mouseover: fn }
 * @returns {Object} 包含 ECharts 实例和事件绑定方法的对象
**/
function createEchatsComponent (domElement, type, userOptions, eventHandlers) {
  var $el = document.querySelector(domElement);
  if (!$el) {
    throw new Error(domElement + ' 元素不存在');
  }
  // 初始化 ECharts 实例
  if (typeof echarts === 'undefined') {
    throw new Error('ECharts未引入');
  }

  var chart = echarts.init($el);
  // 清除画布
  chart.clear();

  // 定义默认配置,根据图表类型设置基本配置
  var defaultOptions = {
    tooltip: {},
    legend: {},
    series: [],
    aria: {
      enabled: true,
    }
  };
  // 根据类型设置基本的 series 配置
  switch (type) {
    case 'bar':
      defaultOptions.series.push({
        type: 'bar'
      });
      break;
    case 'line':
      defaultOptions.series.push({
        type: 'line'
      });
      break;
    case 'pie':
      defaultOptions.series.push({
        type: 'pie'
      });
      break;
    default:
      throw new Error('不支持的图表类型');
  }
  // 合并用户配置
  var mergedOptions = mergeObjects(defaultOptions, userOptions || {});

  // 设置配置项
  chart.setOption(mergedOptions);

  // 响应式处理:监听窗口大小变化,调整图表大小
  function resizeHandler () {
    chart.resize();
  }

  window.addEventListener('resize', tools.debounce(resizeHandler, 200));
  // 事件绑定
  if (eventHandlers && typeof eventHandlers === 'object') {
    for (var eventName in eventHandlers) {
      if (eventHandlers.hasOwnProperty(eventName) && typeof eventHandlers[eventName] === 'function') {
        chart.on(eventName, eventHandlers[eventName]);
      }
    }
  }
  // 返回对象,包含 ECharts 实例和解绑事件的方法
  return {
    chart: chart,
    // 允许用户手动绑定事件
    on: function (eventName, handler) {
      chart.on(eventName, handler);
    },
    // 允许用户手动解绑事件
    off: function (eventName, handler) {
      chart.off(eventName, handler);
    },
    // 手动触发 resize
    resize: function () {
      chart.resize();
    },
    // 销毁图表实例
    dispose: function () {
      window.removeEventListener('resize', resizeHandler);
      chart.dispose();
    }
  }
}

// 深度合并对象
function mergeObjects (obj1, obj2) {
  // 如果其中一个不是对象,直接返回obj2的值
  if (typeof obj1 !== 'object' || obj1 === null) {
    return obj2;
  }
  if (typeof obj2 !== 'object' || obj2 === null) {
    return obj2;
  }

  // 创建一个新的对象来保存合并结果
  var mergedObject = Array.isArray(obj1) ? [] : {};

  // 合并obj1的属性
  for (var key in obj1) {
    if (obj1.hasOwnProperty(key)) {
      if (obj2.hasOwnProperty(key)) {
        // 如果obj2也有这个属性,并且都是对象,则递归合并
        mergedObject[key] = mergeObjects(obj1[key], obj2[key]);
      } else {
        // 否则,直接复制obj1的属性
        mergedObject[key] = obj1[key];
      }
    }
  }

  // 添加obj2中obj1没有的属性
  for (var key in obj2) {
    if (obj2.hasOwnProperty(key) && !obj1.hasOwnProperty(key)) {
      mergedObject[key] = obj2[key];
    }
  }

  return mergedObject;
}

需要先引入echart后在引入这段代码。

Comment