Angular---使用echarts图表库

在开发中，如果使用可视化图表来展示枯燥的统计数字，那么将大大提升用户体验。下面，我们就来在angular中引入百度的echarts库，并使用它。

参考地址

• 首先，我们在项目中要安装echarts库，代码如下：

npm install echarts --save
npm install ngx-echarts --save

• 然后，修改angular.json文件，引入echarts：
  

  修改angular.json文件.png

• 再然后，在需要的模块中，引入NgxEchartsModule模块，比如下面的user模块：
  

  引入NgxEchartsModule模块.png

• 最后，在需要的组件中使用就可以了。比如在user模块的statistic组件中用。

  
  statistic组件.png

statistic组件的模板代码如下：

<div class="bigTitle">预约统计：</div>
<div echarts [options]="chartOption3"></div>

statistic组件的代码如下：

import { Component, OnInit } from '@angular/core';

import { EChartOption } from 'echarts';

@Component({
  selector: 'yz-user-statistic',
  templateUrl: './statistic.component.html',
  styleUrls: ['./statistic.component.scss']
})
export class StatisticComponent implements OnInit {

  // 创建表格对象
  chartOption3: EChartOption = {};

  constructor() { }

  ngOnInit() {
    this.initChart3();
  }

  // 初始化表格对象
  initChart3() {
    this.chartOption3 = {
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        x: 'right',
        data: ['已上机', '已错过', '预约中', '已取消']
      },
      series: [
        {
          name: '后台统计',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            { value: 335, name: '已上机' },
            { value: 310, name: '已错过' },
            { value: 234, name: '预约中' },
            { value: 135, name: '已取消' }
          ]
        }
      ]
    };
  }
}

最终的效果就是这样：

最终效果.png