Use Apache ECharts

// loadScript method: creates a script tag and imports external JS, executes upon success with rapid development code
export function loadScript() {
  // Create script tag and import echarts.js
  // Call resolve(...) when async code succeeds, call reject(...) when async code fails
  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);
    // The script tag's onload event is triggered only after the external js file is loaded and executed
    script.onload = () => {
      resolve('Success');
    };
    script.onerror = reject;
  }).then(() => {
    // Load radar chart js after successful import
    radar();
  });
}

// Radar chart js method
export function radar() {
  // Radar chart js

  var chartDom = document.getElementById('main');
  chartDom.style.height = '400px';
  // Prepare a DOM with size (width and height) for ECharts, set width and height in JSX component styles
  // Initialize echarts instance based on the prepared DOM
  var myChart = echarts.init(chartDom);
  // Specify chart configuration and data
  var option;
  option = {
    // data uses variable data source, or can be written directly
    title: {
      text: 'Employee Comprehensive Ability',
    },
    legend: {
      data: state.nameArr,
      // data: ["YiDA-ly"]
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: 'Performance', max: 100 },
        { name: 'Comprehensive Ability', max: 100 },
        { name: 'Reaction Ability', max: 100 },
        { name: 'Professional Ability', max: 100 },
        { name: 'Judgment Ability', max: 100 },
        { name: 'Service Ability', max: 100 },
      ],
    },
    series: [
      {
        name: 'Employee Comprehensive Ability',
        type: 'radar',
        data: state.dataArr,
        // data: [
        //   {
        //     value: [80, 85, 90, 90, 88, 92],
        //     name: 'YiDA-ly'
        //   }
        // ]
      },
    ],
  };
  // Display the chart using the specified configuration and data
  option && myChart.setOption(option);
}