eCharts: Use for loop to generate points on a spider chart based on number of data points

I have several radar charts that are created in response to a set of questions. Each plot has a different number of data points, dependent on the number of questions.

Update: Working code with Arrary.from:

<div class = 'container' id='main' style='width: 80vw; height:70vh' >
    {{ 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 n = area_name.length;



      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);

      option = {
        aria: {
          enabled: true
        },

        radar: {
          // shape: 'circle',
          indicator: [
          { name: area_name[0], max: max, color:'black',
          axisLabel: {
            color: 'black',
            show: true,
            interval: 0,
            showMinLabel: false,
          },},
          ...Array.from({length: n - 1}, 
          (_, i) => ({name: area_name[i + 1], max: max, color: 'black'}))
    ]
        },
        series: [
          {

            type: 'radar',
            data: [
            {
              axisLabel: {
                show: true,
                interval: 0


              },
              value: area_scores,
              areaStyle: {
                color: overall_color,
                opacity: 0.5
              },
              label: {
                show: true,
                color: 'grey',
                formatter: function (params) {
                  return params.value;
                }
              }
            },
          ]
          }
        ]
      };
     

  option && myChart.setOption(option);


    </script;

I currently create the plot based on the answer I got in:

Changing eChart Options based on number of indicators on radar chart

That, however, results in creating multiple if length===n statements, one for each number of data points. I'd like to use some sort of for statement to generate the right number of points on the plot by appending additional lines of:

{ name: area_name[n], max: max, color:'black' },

where n is the next point number.

I've tried several for loops but can't seem to get it to wwork.

Sample code for 10 data points:

  if (length === 10) {
setTimeout(function (){
  const newIndicator = [
  { 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' },
  { name: area_name[7], max: max, color:'black' },
  { name: area_name[8], max: max, color:'black' },
  { name: area_name[9], max: max, color:'black' },
  ];

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

  
  myChart.setOption({
radar: { indicator: newIndicator },
series: [{ data: newData }]
 option && myChart.setOption(option);
});},)};

Javascript is a very dynamic language, you certainly don't have to write a statement for each particular value of n. There are multiple ways in which you could create the the array newIndicator dynamically, in one statement that would cover any value of n.

Here's an example based on your code sample (couldn't be tested as your code is not runnable), using Array.from and the spread syntax ...:

const n = 10;
setTimeout(function(){
   const newIndicator = [
      {
         name: area_name[0], max: max, color: 'black',
         axisLabel: {
            color: 'black',
            show: true,
            interval: 0,
            showMinLabel: false,
         },
      },
      ...Array.from({length: n - 1}, 
         (_, i) => ({name: area_name[i + 1], max: max, color: 'black'}))
   ];
   
   //............
});

or, an old school version, using Array#push:

const n = 10;
setTimeout(function(){
   const newIndicator =  [{
      name: area_name[0], max: max, color: 'black',
      axisLabel: {
         color: 'black',
         show: true,
         interval: 0,
         showMinLabel: false,
      },
   }];
   for(let i = 1; i < n - 1; i++) {
      newIndicator.push({name: area_name[i], max: max, color: 'black'});
   }
   
   //............
});