使用 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: ["宜搭-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: '宜搭-ly'
        //   }
        // ]
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option);
}