Angular2 项目中使用Echart实现环形图

背景： 要求在页面实现环形图，环形中心一开始默认占百分比最大的内容，鼠标移动到环形上展示当前的内容和百分比，鼠标移出展示最初的效果。

效果图如下：

 实现代码：

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { ECharts, init as echartsInit } from 'echarts';
import { ActionsSubject } from '@ngrx/store';
import { ofType } from '@ngrx/effects';
import { Subscription } from 'rxjs';
import _ from 'lodash';
import { DistributeService } from '../distribute.service';
import { reloadChart, ListItem, PieListItem } from '../distribute.type';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pieChart.component.html',
  styles: [
    `
      .chart-standard { // 设置echart图的高度，不设置环形图无法显示
        height: 200px;
        margin-top: 50px;
      }
    `
  ]
})
export class PieChartComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('leftChart', { static: true }) leftChartEle: ElementRef<HTMLDivElement>;
  @ViewChild('rightChart', { static: true }) rightChartEle: ElementRef<HTMLDivElement>;

  isSearchLoading: boolean = false;
  recordsLeft: PieListItem[] = [];
  recordsRight: PieListItem[] = [];
  private leftChart: ECharts;
  private rightChart: ECharts;
  private actionSub: Subscription;
  constructor(private distributeService: DistributeService, private readonly action$: ActionsSubject) {}

  ngOnInit(): void {
    this.isSearchLoading = true;
  }

  ngAfterViewInit(): void {
    this.distributeService.institutionList().subscribe(resp => {
      this.isSearchLoading = false;
      this.recordsLeft = this.getLeftList(resp.list);//获取数据列表
      this.leftRightChart(this.leftChart, this.leftChartEle, this.recordsLeft);
    });

    this.actionSub = this.action$.pipe(ofType(reloadChart)).subscribe(() => {});
  }

  leftRightChart(chart: ECharts, chartEle: ElementRef, pieList: PieListItem[]) {
    if (chart == null) {
      chart = echartsInit(chartEle.nativeElement);
    }
    chart.showLoading();
    chart.setOption({
      tooltip: {
        trigger: 'item',
        position: 'left'
      },
      series: [
        {
          name: '', // 鼠标移入时，卡片上的名字
          type: 'pie',
          radius: ['80%', '90%'],
          avoidLabelOverlap: false,
          label: {   方式一
            show: true, // 是否展示环形中心的初始数据
            position: 'center',
            fontSize: '15',// 环形中心的初始数据的样式
            fontWeight: 'bold',
            formatter: params => {// 环形中心的初始数据的展示格式
              return params.percent + '%' + '\n' + params.name;
            }
          },
          emphasis: {
            label: {
              show: true,// 鼠标移入时是否在环形中心展示当前数据
              fontSize: '15',
              fontWeight: 'bold',
              formatter: params => {// 鼠标移入时环形中心展示当前数据格式
                params.name = params.name || '';

                if (params.percent >= 1) {
                  return params.percent + '%' + '\n' + params.name;
                } else if (params.percent === 0) {
                  return '0%' + '\n' + params.name;
                } else if (params.percent < 1) return '<1%' + '\n' + params.name;
              }
            }
          },
          labelLine: {
            show: false
          },
          color: ['#CF1322', '#F29494', '#AFAFAF', '#797979'],
          data: pieList  // 环形图数据的数组
        }
      ]
    });

    chart.hideLoading();
    chart.on('mouseover', params => {
      this.handlePieOption(false, chart);// 鼠标移入时，环形中心隐藏初始默认数据
    });
    chart.on('mouseout', params => {
      this.handlePieOption(true, chart);// 鼠标移出时，环形中心展示初始默认数据
    });
  }

  handlePieOption(value: boolean, chart: ECharts) {
    chart.setOption({
      series: [
        {
          label: {
            show: value
          }
        }
      ]
    });
  }

  getLeftList(value: ListItem[]) {
    if (value.length > 0) {
      const pieListValue: PieListItem[] = [];
      pieListValue.push({
        name: 'ST Investment',
        color: '#CF1322',
        value: 111,
        summary: 111/ 500
      });
      pieListValue.push({
        name: 'Deposit equal or within 90 days',
        color: '#FF8286',
        value: 23,
        summary: 23/ 500
      });
      pieListValue.push({
        name: 'Saving Account',
        color: '#AFAFAF',
        value: 266,
        summary: 266/ 500
      });
     
      return pieListValue;
    }
    return [];
  }


  ngOnDestroy(): void {
    this.actionSub.unsubscribe();
  }
}

方式二：

chart.setOption({
      title: {
         text: 'aaa\n'+'100',
         left: 'center',
         top: 'center',
         fontSize: '10'
       },

)}

chart.on('mouseover', params => {
     chart.setOption({
      title: {
         text: '',
       },

)}

    });
chart.on('mouseout', params => {
      chart.setOption({
      title: {
         text: 'bbb\n'+'100',
       },
    });

方式三：

chart.setOption({
      graphic: {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: 'yonghu\n' + '100',
          textAlign: 'center',
          fill: '#000',
          width: 30,
          height: 30
        }
      },
})

chart.on('mouseover', params => {
      chart.setOption({
        graphic: {
          style: {
            text: ''
          }
        }
      });
    });

chart.on('mouseout', params => {
      chart.setOption({
        graphic: {
          style: {
            text: 'nihao'
          }
        }
      });
    });