Angular2组件与Echarts饼状图交互之饼图制作

本文链接：https://blog.csdn.net/happyniceyq/article/details/78723880

一、前言

1.基于ng4项目

2.组件包括：根组件app和饼状图组件echart

二、饼状图开发过程

1、添加插件 echart

cnpm install echarts --save

2、创建组件 echart

ng g component echart

三、代码编写

echart.component.css

.nf-chart{
    width:100%;
    height:380px;
    float:left;
}

echart.component.html

<div class="tableStyle" [@fadeIn]>
      <div #echart class="nf-chart"></div>
</div>

echart.component.ts

import {Component, OnInit, Directive, ElementRef, ViewChild, HostListener,Input} from '@angular/core';
import * as echarts from 'echarts'; //引入图表插件
import { OnlineSuperviseService } from './online-supervise.service';
import { InterceptorService } from '../../../../shared/interceptor.service';
import { fadeIn } from '../../../../animations/fade-in';// 动画引入

@Component({
  selector: 'app-online-supervise',
  templateUrl: './online-supervise.component.html',
  styleUrls: ['./online-supervise.component.css'],
  providers: [OnlineSuperviseService],
  animations: [fadeIn]
})
@Directive({
  selector: 'echart'
})
export class OnlineSuperviseComponent implements OnInit {
  @ViewChild('echart') echart: ElementRef

  constructor(private el: ElementRef, private onlineSuperviseService: OnlineSuperviseService,
    private http: InterceptorService) {}

  state: string;//考试状态
  examRoomArrageId: string;//考场id
  examRoomArrangeName: string;//考场名称
  noLonginNum: string;//未登录人数
  underExamNum: string;//正在考试人数
  noPaperNum: string;//未抽试卷人数
  finshExamNum: string;//已交卷人数

  ngOnInit() {
    this.getEchart();
  }

  //加载
  public getEchart() {
    
    let url = ;
    this.http.get(url).subscribe(

      data => {
        this.examRoomArrangeName = data.json().data.examRoomArrangeName;//考场名称
        //各考试状态人数赋值
        this.noLonginNum = data.json().data.noLonginNum;//未登录
        this.noPaperNum = data.json().data.noPaperNum;//未抽试卷
        this.underExamNum = data.json().data.underExamNum;//正在考试
        this.finshExamNum = data.json().data.finshExamNum;//已交卷
        this.pieChart.title.text = this.examRoomArrangeName;//表格标题赋值
        this.pieChart.series[0].data = [//各状态人数
          {
            value: this.noLonginNum,
            name: '未登录'
          }, {
            value: this.noPaperNum,
            name: '未抽题'
          }, {
            value: this.underExamNum,
            name: '正在考试'
          }, {
            value: this.finshExamNum,
            name: '交卷'
          }];

        echarts.init(this.echart.nativeElement).setOption(this.pieChart);//配置项加载到表格中        
      },
      error => console.error(error))
  }

  //表格配置项
  public pieChart = {
    //饼图各扇形颜色
    color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32'],
    //标题
    title: {
      text: '',
      x: 'center'
    },
    //百分比提示信息
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c}人 ({d}%)"
    },
    //用例
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['未登录', '未抽题', '正在考试', '交卷']
    },
    //扇形配置项
    series: [{
      name: '考试状态',
      type: 'pie',
      startAngle: -180,
      radius: '55%',
      center: ['50%', '50%'],
      data: [],
      itemStyle: {
        normal: {
          label: {
            show: true,
            formatter: '{b} : {c}人 ({d}%)'   //在饼状图上直接显示百分比
          },
          labelLine: { show: true }
        },
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };
}

最后配置好页面路由，饼状图就可以显示。