Ionic3+ECharts图表 (赞)

原文出处:https://blog.csdn.net/a1_a1_a/article/details/80104770

有一些人对于JavaScript与TypeScript的区分还不是很了解（大家可以自己去了解），我这边就不多做阐述。

对于要在Ionic3这种TypeScript要使用JavaScript的第三方图表库的人来说可能是一个问题，我就在这简单讲解一下。

步骤：

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

Ionic3+ECharts图表 (赞)

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%;
}

}

最终的结果如下：

Ionic3+ECharts图表 (赞)

注意：如果要修改图表的类型需要到官网找http://echarts.baidu.com/examples/

Ionic3+ECharts图表 (赞)

只需要修改ts中

Ionic3+ECharts图表 (赞)

Echart.setoption()中的代码即可，至于setoption中的代码如何的来可以在官方demo中复制。

Ionic3+ECharts图表 (赞)

只需要将option中的代码复制到上述的ts中的Echart.setoption()方法内即可。

就能产生与代码相对应的图表了！！！

本文参考了ABC__D的博客：https://blog.csdn.net/ABC__D/article/details/74448783

Ionic3+ECharts图表 (赞)

注意：需要阿里金服所推出的图表库的请转到我的另一篇博客：Ionic3+Viser图表：https://blog.csdn.net/a1_a1_a/article/details/80106522