ionic3使用Echarts

一、使用nodejs插件来实现：

1.安装typings及echarts
npm install typings echarts --global
2.安装 ECharts 的 TypeScript 定义文件
npm install @types/echarts --save
3.在使用echarts的页面ts文件中引用echarts
import * as echarts from 'echarts';
4.在html页面添加div

<ion-content> 
    <div id="chart" #echarts></div> 
</ion-content> 

5.在scss中配置样式

page-home { 
    #chart { 
        position: absolute;
        width: 100%; 
        height: 100%; 
    }
} 

6.在ts文件中初始化

//@ViewChild('echarts') echarts:ElementRef;
ionViewDidEnter() {
    const ec = echarts as any;
    const container = document.getElementById('chart');
    //const container = this.echarts.nativeElement;
    const chart = ec.init(container);
    chart.setOption({
      series: {
        type: 'pie',
        data: [{
          name: '高中', value: 10
        }, {
          name: '初中', value: 20
        }, {
          name: '小学', value: 30
        }]
      }
    });
  }

效果：

image.png