ionic3 使用echarts简单举例

最新推荐文章于 2021-06-03 15:10:54 发布

转载最新推荐文章于 2021-06-03 15:10:54 发布 · 2.6k 阅读

Ionic 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用Ionic框架创建原生应用并结合ECharts实现动态饼图展示。通过安装必要的依赖包、配置TypeScript环境及引入ECharts库，最终实现在Ionic应用中动态更新的饼图。

使用 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);
    }
}