1、 使用npm安装angular2-highcharts

npm install angular2-highcharts --save

2、主模块中引入 app.module.ts

import {ChartModule} from "angular2-highcharts";...imports: [    ChartModule]...

3、组件中定义图标配置数据，可在highcharts官网查看配置 app.component.ts

import {Component} from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html'})export class AppComponent {  options:Object;  constructor() {    this.options = {      chart: {        plotBackgroundColor: null,        plotBorderWidth: null,        plotShadow: false,        type: 'pie'      },      title: {        text: 'Browser market shares at a specific website, 2014'      },      tooltip: {        pointFormat: '{series.name}: {point.percentage:.1f}%'      },      plotOptions: {        pie: {          allowPointSelect: true,          cursor: 'pointer',          dataLabels: {            enabled: true,            format: '{point.name}: {point.percentage:.1f} %'          }        }      },      series: [{        name: 'Brands',        data: [          { name: 'Microsoft Internet Explorer', y: 56.33 },          { name: 'Chrome', y: 24.03 },          { name: 'Firefox', y: 10.38 },          { name: 'Safari', y: 4.77 },          { name: 'Opera', y: 0.91 },          { name: 'Proprietary or Undetectable', y: 0.2 }        ]      }]    }  }}

4、模板中加载图像