单页多ECharts图表下如何在renderItem回调中识别目标图表

1. 在renderItemCallback中获取对应图表实例 #

有两种可靠的实现方式：

闭包捕获实例 #

在切换图表类型的函数（比如setGraph_chartName1_to_customType）内部，利用闭包直接让renderItemCallback访问当前图表实例：

// 预先初始化图表实例
const chartName1 = echarts.init(document.getElementById('chart1'));
const chartName2 = echarts.init(document.getElementById('chart2'));

function setGraph_chartName1_to_customType() {
  // 闭包中直接引用chartName1实例
  const renderItem = function(params, api) {
    // 此处可直接操作chartName1实例
    console.log('当前操作的图表实例:', chartName1);
    // 自定义图形渲染逻辑
    return { /* 图形元素配置 */ };
  };

  chartName1.setOption({
    series: [{
      type: 'custom',
      renderItem: renderItem
    }]
  });
}

通过DOM关联实例 #

利用ECharts API的getDom()方法获取图表对应的DOM元素，再通过DOM标识（如ID、自定义属性）从全局存储中匹配实例：

// 全局存储所有图表实例
const chartMap = {
  chartName1: echarts.init(document.getElementById('chart1')),
  chartName2: echarts.init(document.getElementById('chart2'))
};

// 通用renderItemCallback
function renderItemCallback(params, api) {
  const chartDom = api.getDom();
  // 通过DOM ID匹配对应实例
  const chartInstance = chartMap[chartDom.id];
  console.log('当前操作的图表实例:', chartInstance);
  // 自定义图形渲染逻辑
  return { /* 图形元素配置 */ };
}

// 切换图表类型时直接使用通用回调
function setGraph_chartName1_to_customType() {
  chartMap.chartName1.setOption({
    series: [{
      type: 'custom',
      renderItem: renderItemCallback
    }]
  });
}

2. 给renderItemCallback传递额外参数 #

完全可以实现，推荐两种常用方式：

函数柯里化生成带参数的回调 #

创建一个高阶函数，先传入额外参数，再返回绑定了参数的renderItem回调：

// 高阶函数，接收额外参数并返回renderItem函数
function createRenderItem(chartId, extraData) {
  return function(params, api) {
    // 直接使用传入的chartId和extraData
    console.log('当前图表ID:', chartId);
    console.log('额外传递的数据:', extraData);
    // 自定义图形渲染逻辑
    return { /* 图形元素配置 */ };
  };
}

// 切换图表类型时，传入对应参数生成回调
function setGraph_chartName1_to_customType() {
  const renderItem = createRenderItem('chartName1', { key: 'customValue' });
  chartName1.setOption({
    series: [{
      type: 'custom',
      renderItem: renderItem
    }]
  });
}

使用bind绑定额外参数 #

通过Function.bind()将额外参数绑定到回调函数的参数列表中：

// 通用renderItemCallback，接收额外参数
function renderItemCallback(chartId, extraData, params, api) {
  console.log('当前图表ID:', chartId);
  console.log('额外传递的数据:', extraData);
  // 自定义图形渲染逻辑
  return { /* 图形元素配置 */ };
}

// 切换图表类型时，绑定对应参数
function setGraph_chartName1_to_customType() {
  const boundRenderItem = renderItemCallback.bind(null, 'chartName1', { key: 'customValue' });
  chartName1.setOption({
    series: [{
      type: 'custom',
      renderItem: boundRenderItem
    }]
  });
}

内容的提问来源于stack exchange，提问作者user27160653