Несколько одинаковых js-скриптов echarts на одной странице

У меня есть скрипт из библиотеки echarts, с помощью которого я строю диаграммы на своей html-странице. Я пытаюсь вызвать его несколько раз на одной странице в разных вкладках блока nav-tabs. Сам скрипт, с помощью которого я строю диаграммы, такой:

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'}
      ]
}]
});
});

Я попробовал назначить разным вкладкам в блоке nav-tabs разные id (соответственно, trafficChart1, trafficChart2, trafficChart3):

<div id="trafficChart1" style="min-height: 300px;" class="echart"></div>   
<script> 
    //здесь вышеприведенный код
</script> 

Соответственно, вызывая вышеприведенный js-код повторно, я меняю только значение querySelector на #trafficChart2 и #trafficChart3 и данные для самой диаграммы. По итогу мне нужно, чтобы во всех трех вкладках блока nav-tabs появились диаграммы, а она появляется только на первой вкладке, а на других вкладках ничего нет. На второй и третьей вкладках диаграммы не появляются. Хочу разобраться, какие исправления нужно внести в js-код для echarts, чтобы можно было вызывать его несколько раз для разных вкладок (на одной html-странице).