在angular中简单使用Echarts图表库

1.安装相关依赖

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

2.在app.moudle.ts中导入NgxEchartsModule模块

import {NgxEchartsModule} from 'ngx-echarts';
import * as echarts from 'echarts';
imports: [
    NgxEchartsModule.forRoot({
      echarts,
    })
  ],

3.在组件的ts文件中定义数据

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

@Component({
  selector: 'app-test-echarts',
  templateUrl: './test-echarts.component.html',
  styleUrls: ['./test-echarts.component.css']
})
export class TestEchartsComponent implements OnInit {

  constructor() { }
  option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {value: 335, name: '直接访问'},
          {value: 310, name: '邮件营销'},
          {value: 234, name: '联盟广告'},
          {value: 135, name: '视频广告'},
          {value: 1548, name: '搜索引擎'}
        ]
      }
    ]
  };
  ngOnInit() {
  }

}

4.对应的html中使用Echarts图表

<div echarts [options] = "option" class="demo-chart"></div>

5.结果如下图所示