Multiple eCharts graphs in one page and data mapping / [ECharts] `setOption` should not be called during main process

I’m trying to put multiple charts of eCharts in one page of only one type with series like (type: 'line') but datas should be formatted according to different parameters for each graph.

For a single graph it is quite simple using:

option = {
    dataset: {
        source: datamapping(data),
    },
    //...
}

where datamapping it’s a function like

function datamapping(data){
   var parameter_used_for_data_mapping = 'serverSideAssignmentVariable'; //this is important
   data.map(item => [ otherFunctionForMapping(item[0], parameter_used_for_data_mapping) ,item[1] ]); // mapping time: (uses parameter_used_for_data_mapping for xAxis)
   return data;
}

But when I have multiple graphs I can’t use the same function datamapping(data) because each graph has a different parameter var parameter_used_for_data_mapping to map data.

I would get a javascript error telling me that there are multiple functions with the same name if I create one for each graph (server side). Also option wouldn’t know which function it was referencing since they would all have the same name.


So you need a callback function like:

option = {
    dataset: {
        source: (data) => {
           var parameter_used_for_data_mapping = 'serverSideAssignmentVariable';
           //here inside the datamap
           return data;
        },
    },
    //...
}

But if I do something like this I got a big red error in console that has been bothering my eyes for hours and hours

[ECharts] `setOption` should not be called during main process.

Now the real question:

How can you map data for multiple charts differently in such a condition?