ionic3 使用echarts简单举例

深藏阁楼爱情的钟 2022-06-01 07:42 165阅读 0赞

使用 [Ionic][] 创建原生应用，并用 [ECharts][] 创建饼图

1.安装 typings 库，以及 ECharts：

npm install typings echarts --global

2.安装 ECharts 的 TypeScript 定义文件，这个文件来自社区贡献

npm install @types/echarts --save

3. 有可能在引入 ECharts 时报出错误ECharts 找不到 Cannot find module echarts ，则需要

npm install echarts --save

现在，我们可以在 TypeScript 文件中访问 ECharts 库了：

import * as echarts from 'echarts';

可以测试查看echarts的版本 本例编辑的是home.ts

import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    import * as echarts from 'echarts';
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      constructor(public navCtrl: NavController) {
          console.log(echarts);
      }
    }

html: 显示图表

<ion-content padding>
      <div id="chart"></div>
    </ion-content>

.scss

如果不定义图表可能不会显示

page-home {
      #chart{
      width: 100%;height: 100%;}
    }

.ts

不能在 HomePage 的构造函数中初始化图表，因为这时候页面还没有构建， document.getElementById('chart') 返回的是 null。

export class HomePage {
        constructor(public navCtrl: NavController) {
            console.log(echarts);
        }
        ionViewDidEnter() {
      /*当进入页面时触发*/
            const ec = echarts as any;
            var myChart = ec.init(document.getElementById('chart'));
            var optionchart = {
                series: {
                    type: 'pie',
                    data: [{
                        name: 'A', value: 15
                    }, {
                        name: 'B', value: 20
                    }, {
                        name: 'C', value: 15
                    }]
                }
            };
            myChart.setOption(optionchart);
        }
    }

显示页面：

![SouthEast][]

文章参考自：https://zhuanlan.zhihu.com/p/28902584

[Ionic]: http://link.zhihu.com/?target=http%3A//ionicframework.com/
[ECharts]: http://link.zhihu.com/?target=http%3A//echarts.baidu.com/
[SouthEast]: /images/20220601/6a649cdb1d1a4534af6a12f2699ac269.png