Changing eChart Options based on number of indicators on radar chart

I am using eCharts to create a radar graph, where the number of indicators on the chart can change. I would like to use one script and change the number of indicators based on data, rather than create separate scripts for 5 indicators, 6, etc., but can't seem to do that.

I tried using a for loop with the options = {...} part of the script but it didn't work. I then tried concatenating two variables, one for the bulk to the chart and the other for teh number of indicator, figuring I could use an if loop to get the total number, but even concatenating without the loop didn't work either.

I also tried:

          myChart3.setOption(option3, {
            notMerge: ['radar']
        });

Is there a good way to dynamically change the number of indicators on an eChart radar plot?

code:

<div class = 'container' id='main' style='width: 80vw; height:80vh' >
    {{ area_name|json_script:'area_name' }}
    {{ area_scores|json_script:'area_scores' }}
    {{ area_colors|json_script:'area_colors' }}
    {{ max|json_script:'max' }}
    {{ overallcolor|json_script:'overallcolor' }}

    <script type='text/javascript'>
          
      let area_name = JSON.parse(document.getElementById('area_name').textContent);
      let area_scores = JSON.parse(document.getElementById('area_scores').textContent);
      let area_colors = JSON.parse(document.getElementById('area_colors').textContent);
      let max = JSON.parse(document.getElementById('max').textContent);
      let overall_color = JSON.parse(document.getElementById('overallcolor').textContent);
      const length = area_name.length;



      let chartDom3 = document.getElementById('main');
      let myChart3 = echarts.init(chartDom3);

      let option3 = {
        color: ['darkgrey'],
        aria: {
          enabled: true
      },
        title: {
          text: 'Business Countinuity Results',
          left: 'center',
        },

        series: [
          {

            type: 'radar',

            data: [
              {
                axisLabel: {
                  show: true,
                  interval: 0
                },
                value: area_scores,
                areaStyle: {
                  color: overall_color,
                  opacity: 0.5
                },
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value;
                  }
                }
              },
            ]
          }
        ]
      };

    let radar = {

      // shape: 'circle',
    indicator: [
    { name: area_name[0], max: max, color:'black',
    axisLabel: {
      color: 'black',
      show: true,
      interval: 0,
      showMinLabel: false,
    },},
    { name: area_name[1], max: max, color:'black' },
    { name: area_name[2], max: max, color:'black' },
    { name: area_name[3], max: max, color:'black' },
    { name: area_name[4], max: max, color:'black' },
    { name: area_name[5], max: max, color:'black' },
    { name: area_name[6], max: max, color:'black' },
    ]
    };

    let radar6 = option3 + radar;

      myChart3.setOption(radar6);
    </script>

Example:

const newIndicator = [
    { name: 'Sales', max: 6500 },
    { name: 'Administration', max: 16000 },
    { name: 'Information Technology', max: 30000 },
    { name: 'Customer Support', max: 38000 },
    { name: 'Development', max: 52000 },
    { name: 'Marketing', max: 25000 },
    { name: 'New Category', max: 100 }
];
  
const newData = [
    {
        value: [4200, 3000, 20000, 35000, 50000, 18000, 50],
        name: 'Allocated Budget'
    },
    {
        value: [5000, 14000, 28000, 26000, 42000, 21000, 75],
        name: 'Actual Spending'
    }
];
  
myChart.setOption({
    radar: { indicator: newIndicator },
    series: [{ data: newData }]
});