有一些人对于JavaScript与TypeScript的区分还不是很了解(大家可以自己去了解),我这边就不多做阐述。
对于要在Ionic3这种TypeScript要使用JavaScript的第三方图表库的人来说可能是一个问题,我就在这简单讲解一下。
步骤:
1:在ECharts官网:http://echarts.baidu.com/index.html下载或在线定制下载官方提供的js文件
2:在ionic3项目的index.html文件中引入上一步下载的js文件
<script src="./assets/lib/echarts4.0.4/echarts.js"></script>
注意:在assets文件是与index.html文件是同级,ionic3项目中的所有文件到最后都以模块的形式注入到index.html文件中。
注意:echarts.js文件引入的位置应该放在cordova.js的后面。
3:在你要插入图表位置页面对应的ts中要加入如下代码,比如我是添加图表到about页面中所以我写的位置为about.ts文件。
import { Component, ViewChild, ElementRef } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; declare var echarts;//设置echarts全局对象 @IonicPage() @Component({ selector: 'page-about', templateUrl: 'about.html', }) export class AboutPage { @ViewChild('EchartsContent') container:ElementRef;//与html中div #container1对应 EChart :any; constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() {//当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开这个页面则不会触发 console.log('ionViewDidLoad AboutPage'); var data = []; for (var i = 0; i <= 360; i++) { var t = i / 180 * Math.PI; var r = Math.sin(2 * t) * Math.cos(2 * t); data.push([r, i]); } let ctelement = this.container.nativeElement; this.EChart = echarts.init(ctelement); this.EChart.setOption({ title: { text: '极坐标双数值轴' }, legend: { data: ['line'] }, polar: { center: ['50%', '54%'] }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, angleAxis: { type: 'value', startAngle: 0 }, radiusAxis: { min: 0 }, series: [{ coordinateSystem: 'polar', name: 'line', type: 'line', showSymbol: false, data: data }], animationDuration: 2000 }); } }4:在上一步所对应的页面插入如下代码,我这边的页面是about.html
<div #EchartsContent class="EchartsDiv"></div>5:运行ionic serve命令
注意:对于这个问题,原因是你没有将div张开,图标已经加载了但是div得宽高都为0,所以没有办法看到图表显示。
6:在对应的scss中加入如下代码,我这边对应的scss是about.scss
page-about {
.EchartsDiv{
width:100%;
height:100%;
}
}
最终的结果如下:
注意:如果要修改图表的类型需要到官网找http://echarts.baidu.com/examples/
只需要修改ts中
Echart.setoption()中的代码即可,至于setoption中的代码如何的来可以在官方demo中复制。
只需要将option中的代码复制到上述的ts中的Echart.setoption()方法内即可。
就能产生与代码相对应的图表了!!!
本文参考了ABC__D的博客:https://blog.csdn.net/ABC__D/article/details/74448783
注意:需要阿里金服所推出的图表库的请转到我的另一篇博客:Ionic3+Viser图表:https://blog.csdn.net/a1_a1_a/article/details/80106522