【开发实践】在线考试系统（二） 五边形战士——正确题目数统计

一、需求分析

【需求】：笔者最近开发了一个在线考试系统，指导教师提出一个需求：统计一下正确题目数在各类题型中的占比情况。

多种类型统计数据展示出来，当然表格也能实现，但是视觉效果就相对普通。不妨换种其他的图式——雷达图。

 二、技术引入

1、Apache ECharts

        ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表

 Apache ECharts 一个基于 JavaScript 的开源可视化图表库

【资源获取】

从 npm 获取

npm install echarts

从 CDN 获取

可以从以下免费 CDN 中获取和引用 ECharts。

cdn：https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js

unpkg：https://unpkg.com/browse/echarts@5.4.2/

 【官方提供的示例】

ECharts使用的官方示例

2、入门示例 

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

【效果展示】

 

三、需求实现

 1、数据格式

    option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: ['题型正确数']
        },
        radar: {
          indicator: [
              //服务端数据返回，如下为格式示例
              { name: '单选题', max: 10 }
            ],  
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [5],//统计的目标数据
                name: '题型正确数',
                areaStyle: {
                  color: 'rgba(0,250,0,0.3)'
                }
              }
            ]
          }
        ]
      }

四、效果展示

---

狂喜狂喜！已经是接近五边形战士的形状了hhhhh