码迷,mamicode.com
首页 > 其他好文 > 详细

Angular+ionic2+Echarts 实现图形制作,以饼图为例

时间:2018-02-24 13:03:59      阅读:1979      评论:0      收藏:0      [点我收藏+]

标签:radius   item   view   step   toolbar   信息   art   引擎   inf   

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~

 

Angular+ionic2+Echarts 实现图形制作,以饼图为例

标签:radius   item   view   step   toolbar   信息   art   引擎   inf   

原文地址:https://www.cnblogs.com/tomboyxiao/p/8464842.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!