Apache ECharts の使用

// loadScript メソッド：script タグを作成して外部 JS をインポートし、成功後に高速開発コードを実行します
export function loadScript() {
  // script タグを作成して echarts.js をインポート
  // 非同期コードが成功した場合は resolve(...) を呼び出し、失敗した場合は reject(...) を呼び出します
  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);
    // script タグの onload イベントは、外部 js ファイルの読み込みと実行が完了した後にのみトリガーされます
    script.onload = () => {
      resolve('成功');
    };
    script.onerror = reject;
  }).then(() => {
    // インポート成功後にレーダーチャートの js を読み込みます
    radar();
  });
}

// レーダーチャートの js メソッド
export function radar() {
  // レーダーチャートの js

  var chartDom = document.getElementById('main');
  chartDom.style.height = '400px';
  // ECharts 用にサイズ（幅と高さ）を持つ DOM を準備し、JSX コンポーネントのスタイルで幅と高さを設定します
  // 準備した DOM に基づいて echarts インスタンスを初期化します
  var myChart = echarts.init(chartDom);
  // チャートの設定とデータを指定します
  var option;
  option = {
    // data は変数のデータソースを使用するか、直接記述することもできます
    title: {
      text: '社員の総合能力',
    },
    legend: {
      data: state.nameArr,
      // data: ["YiDA-ly"]
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '業績', max: 100 },
        { name: '総合能力', max: 100 },
        { name: '反応力', max: 100 },
        { name: '専門能力', max: 100 },
        { name: '判断力', max: 100 },
        { name: 'サービス力', max: 100 },
      ],
    },
    series: [
      {
        name: '社員の総合能力',
        type: 'radar',
        data: state.dataArr,
        // data: [
        //   {
        //     value: [80, 85, 90, 90, 88, 92],
        //     name: 'YiDA-ly'
        //   }
        // ]
      },
    ],
  };
  // 指定した設定とデータでチャートを表示します
  option && myChart.setOption(option);
}