Ionic3+ECharts图表 (赞)

忘是亡心i 2022-05-18 04:35 271阅读 0赞

原文出处:[https://blog.csdn.net/a1\_a1\_a/article/details/80104770][https_blog.csdn.net_a1_a1_a_article_details_80104770]

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

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

步骤：

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

![70][]

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

注意：在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

5：运行ionic serve命令

注意：对于这个问题，原因是你没有将div张开，图标已经加载了但是div得宽高都为0，所以没有办法看到图表显示。

6：在对应的scss中加入如下代码，我这边对应的scss是about.scss

page-about \{  
  .EchartsDiv\{  
    width:100%;  
    height:100%;  
  \}

最终的结果如下：

![70 1][]

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

![70 2][]

只需要修改ts中

![70 3][]

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

![70 4][]

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

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

本文参考了ABC\_\_D的博客：https://blog.csdn.net/ABC\_\_D/article/details/74448783

![70 5][]

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

[https_blog.csdn.net_a1_a1_a_article_details_80104770]: https://blog.csdn.net/a1_a1_a/article/details/80104770
[70]: /images/20220518/9c3c982c7f20493e8fdb75e643d57622.png
[70 1]: /images/20220518/60db5caa3a9e49b7969132b529e0f61d.png
[70 2]: /images/20220518/94e311ddfeb4403cb812cd8f5197d028.png
[70 3]: /images/20220518/b71c19d6476444a491f95065ce36b29c.png
[70 4]: /images/20220518/31951cd887244f51bc8168082d8faee5.png
[70 5]: /images/20220518/77d01f0150e14dbfa0d1b33615fb95b9.png