如何在ECharts事件处理函数中添加自定义参数？

你完全可以在点击回调的参数中添加自定义数据，具体实现步骤如下：

1. 在ECharts系列配置中添加自定义数据
   在定义series时，给目标折线系列直接添加自定义属性（比如newData），示例代码：

   series: [
     // 其他系列配置...
     {
       name: 'Search Engine',
       type: 'line',
       stack: 'Total',
       data: [862, 1035, 901, 934, 1290, 1330, 1320],
       // 新增自定义数据
       newData: [1, 2, 3]
     }
   ]
   

2. 在点击回调中获取并挂载自定义数据
   在折线的点击事件回调里，通过params.seriesIndex找到对应系列，取出自定义数据后挂载到params对象上，之后就可以直接使用该数据发送请求：

   myChart.on('click', function(params) {
     // 从图表配置中获取对应系列的自定义数据
     const targetSeries = myChart.getOption().series[params.seriesIndex];
     if (targetSeries.newData) {
       // 将自定义数据添加到回调参数中
       params.newData = targetSeries.newData;
     }
     // 此时params就包含你需要的newData，可直接用于向后端发送
     console.log(params);
     // 示例：发送POST请求到后端
     fetch('/your-backend-api', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         seriesName: params.seriesName,
         newData: params.newData
       })
     });
   });
   

原理说明 #

ECharts允许在series的配置项中添加任意自定义属性，这些属性会被完整保留在图表的配置对象中。点击事件返回的params参数包含当前点击系列的索引seriesIndex，通过这个索引就能从图表的option中取出对应系列的自定义数据，进而挂载到params上供后续使用。

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