一页上有多个相同的 Java 脚本

问：

我有一个来自 echarts 库的脚本，我用它在我的 html 页面上构建图表。我尝试为我的选项卡区域（导航选项卡）的不同选项卡多次调用它。 我将 echarts 库本身包含在 body 块的末尾

<script src="{% static 'js/echarts.min.js' %}"></script>

在页面上执行了几次的脚本代码如下：

document.addEventListener("DOMContentLoaded", () => {
echarts.init(document.querySelector("#trafficChart1")).setOption({
tooltip: {
    //tooltip settings
},
legend: {
    //legend settings
},
series:[{
    //diagramm settings
data: [
   {value: 50,  name: 'Region_100'},
   {value: 150, name: 'Region_200'},
   {value: 250, name: 'Region_300'}
      ]
}]
});
});

对于每个选项卡，我尝试使用不同的选择器：

<div id="trafficChart1" style="min-height: 300px;" class="echart"></div>   
<script> 
    //here is the code of the above script
</script> 

因此，对于其他两个选项卡，代码将相同，但图表的选择器（#trafficChart2、#trafficChart3）和数据将发生变化。

最后，一切看起来都是这样的（nav-tabs 块的第一个选项卡）

Nav-Tabs 块 2021 的第一个选项卡

但在 2022 年和 2023 年的选项卡中，图表不会显示，尽管它们标有标识符（分别为“trafficChart2”和“trafficChart3”）。

不显示图表的 2022 年和 2023 年选项卡

帮助我了解如何在 nav-tabs 块的不同选项卡中实现图表的构造，也就是说，本质上，在一个页面上多次调用 javascript。