How to know what graph are you referring with multiple eCharts graphs in one page with `renderItem` callback

Question

If there are more then one charts in a single page and you got some functions like this to change the graph type

function setGraph_chartName1_to_customType(e){ //there are multiple functions like this
    chartName1.setOption({
        series: [{
            customtypename: 'customType',
            renderItem: renderItemCallback,
        }]
    });
       // ... somethings
}

and then in renderItemCallback() you have to identify the chart needed because the function renderItemCallback() it's used for more then one chart (eg. chartName1, chartName2, chartName3)

function renderItemCallback(params, api) {
    var points_array = chartName1.getOption().dataset[0].source; //HERE IS NEEDED THE CHART OBJECT
    if (points_array.length) {
             // ... somethings
    }
}

Now, after the code, see the question(s):

How to get chartName1 as referer graph inside renderItemCallback function?

Is there a way to send other parameters to the callback function in addition to params, api (to identify the graph you are working on)?

Answer 1

You may use a function that returns a function:

function renderItemCallback(chartName){
   return function(params, api) {
      var points_array = chartName.getOption().dataset[0].source; 
       if (points_array.length) {
             // ... somethings
       }
   };
}

When you call the external function it returns a closure, which is a function similar to the one in your original code, except its chartName variable is bound to the value you provided in the call.

So you can use it like this:

function setGraph_chartName1_to_customType(e){ //there are multiple functions like this
    chartName1.setOption({
        series: [{
            customtypename: 'customType',
            renderItem: renderItemCallback(chartName1),
        }]
    });
}