Menggunakan Apache ECharts

// Metode loadScript: membuat tag script dan mengimpor JS eksternal, dieksekusi setelah berhasil dengan kode pengembangan cepat
export function loadScript() {
  // Buat tag script dan impor echarts.js
  // Panggil resolve(...) saat kode async berhasil, panggil reject(...) saat kode async gagal
  new Promise((resolve, reject) => {
    const src = 'https://g.alicdn.com/code/lib/echarts/5.3.0/echarts.min.js';
    const script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.src = src;
    document.body.appendChild(script);
    // Event onload pada tag script hanya dipicu setelah file js eksternal dimuat dan dieksekusi
    script.onload = () => {
      resolve('Berhasil');
    };
    script.onerror = reject;
  }).then(() => {
    // Muat js bagan radar setelah impor berhasil
    radar();
  });
}

// Metode js bagan radar
export function radar() {
  // js bagan radar

  var chartDom = document.getElementById('main');
  chartDom.style.height = '400px';
  // Siapkan DOM dengan ukuran (lebar dan tinggi) untuk ECharts, atur lebar dan tinggi pada gaya komponen JSX
  // Inisialisasi instance echarts berdasarkan DOM yang telah disiapkan
  var myChart = echarts.init(chartDom);
  // Tentukan konfigurasi dan data bagan
  var option;
  option = {
    // data menggunakan sumber data variabel, atau dapat ditulis langsung
    title: {
      text: 'Kemampuan Komprehensif Karyawan',
    },
    legend: {
      data: state.nameArr,
      // data: ["YiDA-ly"]
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: 'Kinerja', max: 100 },
        { name: 'Kemampuan Komprehensif', max: 100 },
        { name: 'Kemampuan Reaksi', max: 100 },
        { name: 'Kemampuan Profesional', max: 100 },
        { name: 'Kemampuan Penilaian', max: 100 },
        { name: 'Kemampuan Pelayanan', max: 100 },
      ],
    },
    series: [
      {
        name: 'Kemampuan Komprehensif Karyawan',
        type: 'radar',
        data: state.dataArr,
        // data: [
        //   {
        //     value: [80, 85, 90, 90, 88, 92],
        //     name: 'YiDA-ly'
        //   }
        // ]
      },
    ],
  };
  // Tampilkan bagan menggunakan konfigurasi dan data yang ditentukan
  option && myChart.setOption(option);
}