【Angular】雷达图显示学生各科成绩

前言：

       最近小编正在开发的功能是手机端根据学生学号查询体测各科目成绩，断断续续的也做了很久，现在终于要接近尾声了，跟大家分享一下~

代码展示：

html代码：

<!-- 搜索框 -->
<div class="search" placeholder="请输入要查询的学号">
  <app-search [information]="information" [url]="searchUrl" (editData)="query($event)"></app-search>
</div> 
<!--各科体侧项目成绩-宋喆-2018年4月28日-->
<div>
  <echart [chartType]="RadarChart" id="radarStudentScores" class="nf-chart"></echart>
</div>

css代码：

.search{
    width:100%;
    margin-top: 10%;
    margin-left: 8%;
    margin-bottom: 10%;
    left: 10%;
}
.container{
    width:100%;
}
.nf-chart{
    width:100%;
    height:450px;
    float:left;
}
.bottom {
    font-size: 14px;
    padding-left: 40%
}
.bottom ul li {
    list-style:none;
    float: left;
    padding-right: 20px; 
}

component.ts代码：

import { Component, OnInit, Directive, ViewChild, ElementRef, Input } from '@angular/core';
import * as echarts from 'echarts'; //引入图表插件
import { InterceptorService } from "../../shared/interceptor.service";
import { LocalStorage } from "../../shared/exam-configure.storage";
import { Router } from '@angular/router';

@Component({
  selector: 'app-project-score',
  templateUrl: './project-score.component.html',
  styleUrls: ['./project-score.component.css']
})
@Directive({
  selector: 'echart',
})
export class ProjectScoreComponent implements OnInit {
  searchUrl = "";

  constructor(
    private router: Router,
    private http: InterceptorService,
    private storage: LocalStorage
  ) { }

  ngOnInit() {
  }

  query(info: string) {
    this.storage.remove('studentScores');
    this.setScoreInfo(info);
  }

  setScoreInfo(queryContent: string) {
    let url = "physicalProject-web/singlePoject/selectProjectScoreByCode" + queryContent;
    this.http.get(url).subscribe(
      res => {
        if (res.json().code == "0000" && res.json().data.length != 0) {
          this.storage.setObject("studentScores", res.json().data);
          let studentScores: number[] = new Array();

          studentScores.push(res.json().data[res.json().data.length - 1].lungCapacityMark);
          studentScores.push(res.json().data[res.json().data.length - 1].fiftyMetersMark);
          studentScores.push(res.json().data[res.json().data.length - 1].standingJumpMark);
          studentScores.push(res.json().data[res.json().data.length - 1].seatBodyBendsMark);
          studentScores.push(res.json().data[res.json().data.length - 1].eightMetersMark);
          studentScores.push(res.json().data[res.json().data.length - 1].sitUpsMark);
          studentScores.push(res.json().data[res.json().data.length - 1].bmiMark);

          this.RadarChart.series[0].data[0].value = studentScores;
          this.RadarChart.legend.data[0] = res.json().data[res.json().data.length - 1].name;

          for (let i = 0; i < this.RadarChart.radar.indicator.length; i++) {
            switch (this.RadarChart.radar.indicator[i].id) {
              case "endurance":
                switch (res.json().data[res.json().data.length - 1].sex) {
                  case "0":
                  case "女":
                    this.RadarChart.radar.indicator[i].text = "800米跑";
                    break;
                  case "1":
                  case "男":
                    this.RadarChart.radar.indicator[i].text = "1000米跑";
                    break;
                  default: break;
                }
                break;
              case "strength":
                switch (res.json().data[res.json().data.length - 1].sex) {
                  case "0":
                  case "女":
                    this.RadarChart.radar.indicator[i].text = "仰卧起坐";
                    break;
                  case "1":
                  case "男":
                    this.RadarChart.radar.indicator[i].text = "引体向上";
                    break;
                  default: break;
                }
                break;
              default: break;
            }
          }
        } else {
          this.RadarChart.series[0].data[0].value = [];
        }
        this.RadarChart.series[0].data[0].name = res.json().data[res.json().data.length - 1].name;
        var myChart = echarts.init(document.getElementById('radarStudentScores'));
        myChart.setOption(this.RadarChart);//配置项加载到图表中
      })
  }

  //设置雷达图的属性-宋喆-2018年4月23日19:43:32
  RadarChart = {
    // title: {
    //     text: '自定义雷达图'
    // },
    tooltip: {},  //悬浮框
    legend: {
      data: ['学生姓名']
    },
    radar:
      {
        indicator: [
          { id: 'lungCapacity', text: '肺活量', max: 15 },
          { id: 'fiftyMeters', text: '50米跑', max: 20 },
          { id: 'standingJump', text: '立定跳远', max: 10 },
          { id: 'seatBodyBends', text: '体前屈', max: 10 },
          { id: 'endurance', text: '耐力跑', max: 20 },
          { id: 'strength', text: '力量训练', max: 10 },
          { id: 'bmi', text: '体重指數', max: 15 }
        ],
        center: ['50%', '50%'],  //在页面中位置
        radius: 100,   //大小
        splitNumber: 4,   //分段栏数
        //shape: 'circle',  //图形样式
        name: {
          formatter: '【{value}】',
          textStyle: {
            color: '#72ACD1'
          }
        },
        splitArea: {
          areaStyle: {  //控制区域样式
            color: ['rgba(114, 172, 209, 0.2)',
              'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
              'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10
          }
        },
        axisLine: {    //坐标轴线
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        },
        splitLine: {   //坐标轴线
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        }
      },
      series: [
      {
        name: '学生成绩',
        type: 'radar',
        data: [
          {
            value: [],
            name: '学生姓名',
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.value;
                }
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            }
          }
        ]
      }
    ]
  }
}

效果：

小结：

       还是要多做项目，然后多和身边人沟通。在做项目的过程中，发现自己真的有很多地方还很欠缺，感谢组长给予我莫大的帮助，还给我讲解一些基础知识点和代码逻辑等，我会多多学习更快成长！