一、前言

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

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

四、总结

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