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} 
{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> 
ion-content>

step4:实现图例如下

 over~

转载于:https://www.cnblogs.com/tomboyxiao/p/8464842.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！