代码如下:
/**
* 创建一个 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后在引入这段代码。