ionic3&echarts

发布时间 2018-11-20 19:33:09 浏览量() 收藏(1)

Ionic3+ECharts图表

步骤：

1：在ECharts官网：http://echarts.baidu.com/download.html 下载或在线定制下载官方提供的js文件

2：在ionic3项目的index.html文件中引入上一步下载的js文件

<script src="./assets/lib/echarts.min.js"></script>

注意：在assets文件是与index.html文件是同级，ionic3项目中的所有文件到最后都以模块的形式注入到index.html文件中。

注意：echarts.js文件引入的位置应该放在cordova.js的后面。

3：在你要插入图表位置页面对应的ts中要加入如下代码，比如我是添加图表到about页面中所以我写的位置为demo.ts文件。

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

declare var echarts;//设置echarts全局对象
@IonicPage()
@Component({
selector: 'page-demo',
templateUrl: 'demo.html',
})
export class DemoPage {
@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-demo {
.EchartsDiv{
width:100%;
height:100%;
}
}

广告会让浏览体验不好，可这是网站的唯一收入，请点击下面的百度广告，支持老高的开源行动吧！