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

一、前言

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)'        }      }    }]  };}

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

四、总结

    遇到问题之后，首先要做的一点就是想清楚思路，其实问题不难解决，采用分治法讲问题分解为一个个小问题，一步步就可以完成。看官网文档，api文档提高自己的项目技能。