IONIC使用echarts制作曲线图、柱状图、以及饼形图

先看效果

曲线图                                                                                             柱状图

饼形图（可隐藏选中的饼形图数据，只显示特定的饼形图数据）

实现步骤

1. 先安装插件

npm install echarts --save

2. 在index.html中引入如下这句代码，要放在cordova.js之后

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

3.实现代码

  1). html页面

<ion-header>
  <ion-navbar>
     <ion-title>Filter</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

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

</ion-content>

2). css页面

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

3). ts页面

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import * as echarts from 'echarts';

/**
 * Generated class for the GoodsListPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-goods-list',
  templateUrl: 'goods-list.html',
})
export class GoodsListPage {
  @ViewChild('EchartsContent') container: ElementRef;
  echartsOptions: any = {};

  constructor(public navCtrl: NavController, 
              public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad GoodsListPage');

    //曲线图
    //this.Diagram();
    
    //饼形图
    //this.Histogram();

    //柱状图    
    this.PieChart();
   
    echarts.init(this.container.nativeElement).setOption(this.echartsOptions);    
  }

   //曲线图
  Diagram() {
    this.echartsOptions = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [8, 9, 4, 6, 9, 6, 7],
        type: 'line',
        smooth: true
      }]
    };
  }

  //柱状图
  Histogram(){
    var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
    var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
    var yMax = 500;
    var dataShadow = [];
    this.echartsOptions = {
      title: {
        text: '特性示例：渐变色 阴影 点击缩放',
        subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
      },
      xAxis: {
        data: dataAxis,
        axisLabel: {
          inside: true,
          textStyle: {
            color: '#fff'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        z: 10
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#999'
          }
        }
      },
      dataZoom: [
        {
          type: 'inside'
        }
      ],
      series: [
        { // For shadow
          type: 'bar',
          itemStyle: {
            normal: { color: 'rgba(0,0,0,0.05)' }
          },
          barGap: '-100%',
          barCategoryGap: '40%',
          data: dataShadow,
          animation: false
        },
        {
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ]
              )
            }
          },
          data: data
        }
      ]
    };
  }

  //饼形图
  PieChart(){
    this.echartsOptions = {
      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)'
            }
          }
        }
      ]
    };
  }

}

最后

   1.曾借鉴参考于 链接一：【ionic 3】怎么使用echarts绘制折线图_玫瑰与鹿°-CSDN博客（这是个美女哦！）

                   以及 链接二：Angular+ionic2+Echarts 实现图形制作，以饼图为例

      本来准备按照上面链接一的那位美女那样进行操作，结果发现有点问题；链接二的博主，封装了一个component组件进去！最后总结出本文，以供大家参考！

   2. 这是本文使用插件的官网地址：https://echarts.baidu.com/examples/index.html#chart-type-pi