Angular+ionic2+Echarts 實現圖形制作，以餅圖為例

step1:添加插件echart;

npm install echarts --save

package.json文件中會在dependencies中添加echarts，如下圖：

 

 

 

step2:運行cmd,創建echart-pie組件；

ionic g component echart-pie

如下圖：

 

 生成對應文件：

 

 

echart-pie.html文件:

<div #echart class="echart-pie">  </div>

 

 echart-pie.scss文件：

echart-pie {
    .echart-pie {
        width: 100%;
        height: 380px;
    }
}

echart-pie.ts文件：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import * as echarts from 'echarts'; //引入圖表插件 
@Component({
  selector: 'echart-pie',
  templateUrl: 'echart-pie.html'
})
export class EchartPieComponent implements OnInit {
  @ViewChild('echart') echart: ElementRef;//顯示圖形的容器
  //顯示數據為官方文檔數據
  pieChart = {
    //標題  
    title: {
      text: '某站點用戶訪問來源',
      subtext: '純屬虛構',
      x: 'center'
    },
    //百分比提示信息  
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    //用例  
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
    },
    //扇形配置項  
    series: [
      {
        name: '訪問來源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          { value: 335, name: '直接訪問' },
          { value: 310, name: '郵件營銷' },
          { value: 234, name: '聯盟廣告' },
          { value: 135, name: '視頻廣告' },
          { value: 1548, name: '搜索引擎' }
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  constructor() {
  }

  ngOnInit() {
    this.getEchart();
  }

  getEchart() {
    //echarts初始化
    echarts.init(this.echart.nativeElement).setOption(this.pieChart, true);
  }
}

 

 

 

step3:在需要圖形顯示的位置調用該組件。

 

注意：在對應的module中引入該組件，以home為例.在home.module.ts中引入EchartPieComponent，如下：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { EchartPieComponent } from '../../components/echart-pie/echart-pie';

@NgModule({
  declarations: [
    HomePage,
    EchartPieComponent
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
  ],
  exports: [
    HomePage
  ]
})
export class HomePageModule {}

在home.html中使用：

 

<ion-header>
    <ion-toolbar>
        <ion-title>重點關注</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <echart-pie></echart-pie>
</ion-content>

 

 

 

step4:實現圖例如下

 

 over~