ionic2 项目中使用echarts图表,Jquery

                  开发中可能由于项目功能的需要需要嵌入一些图标页面，那么最流行的就是百度开放的echarts ,图标种类很多，非常好用。那么如何在ionic项目中进行使用呢？

首先需要对echarts的使用要有所了解，可以参考echarts的开发文档。接下来就是把echart集成到 ionic2项目中。

1. 导入文件。把下载的echarts.min.js 文件放在src\assets\js 目录下。   说明：echart使用并不需要jquery，这个是后边会有说明。



2.script 引用。在项目的index.html中引入js文件。(切记不是www下的文件) 

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

放在

<script src="cordova.js"></script>

的下面即可。



3.在page页面引用和使用。 具体代码如下 已有注释。

.html文件如下：

<ion-header>
<ion-navbar>
<ion-title>
Echarts Test
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<!--用于展示图标 #也就是id的含义class为其css样式-->
<div #container1 class="div-charts"></div>
</ion-content>

.sass文件如下

page-contact {
.div-charts{
width:100%;
height:100%;
}
}

.ts文件如下：

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

declare var echarts;//js echarts全局对象
// declare  var $;           //jquery 声明
@Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {
@ViewChild('container1') container:ElementRef;//与html中div #container1对应
chart :any;

constructor(public navCtrl: NavController) {

}

ionViewDidLoad() {

let ctx = this.container.nativeElement;
this.chart = echarts.init(ctx);
this.chart.setOption(
{
backgroundColor: '#2c343c',

title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},

tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},

visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '50%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:274, name:'联盟广告'},
{value:235, name:'视频广告'},
{value:400, name:'搜索引擎'}
].sort(function (a, b) { return a.value - b.value}),
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
);

// $('#p').html("hwphvaovj");        jquery 使用

}

}

  在命令行中运行 ionic serve  浏览器中最终呈现效果如下：



       大家要习惯ionic 中的这种代码组织结构，一个html 一个sass 一个ts 文件，ts文件是TypeScript文件 在打包过程中会被转化为js文件 ，sass文件也就是css文件，对此陌生的大家可以多查查资料。了解下ES6 语法，以及TypeScript 用法。这要才能写出规范优雅的代码。便于阅读与维护。

      另外补充一点，大家对jQuery 很熟悉，如何把项目中继承Jquery库呢，大家已经看到了，上面的使用流程， 其实一样的，不过在ts 文件中需要先定义才能使用的，代码已经备注说明，有兴趣的伙伴不妨一试！另外 一种方式大家可以参考  使用三方库 进行导入和使用！

         不妥之处还请指出说明，共同学习共同进步！