ionic3 使用echarts简单举例 (赞)

拼搏现实的明天。 2022-05-17 22:00 206阅读 0赞

原文出处：[https://blog.csdn.net/weixin\_39461487/article/details/79147957][https_blog.csdn.net_weixin_39461487_article_details_79147957]  
文章参考自：[https://zhuanlan.zhihu.com/p/28902584][https_zhuanlan.zhihu.com_p_28902584] (这个很好, 但少了下面的第3步，出现“Cannot find module echarts”错误）

使用 [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        ** (注意：要在具体项目的目录下执行）**

现在，我们在要使用echarts的 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_blog.csdn.net_weixin_39461487_article_details_79147957]: https://blog.csdn.net/weixin_39461487/article/details/79147957
[https_zhuanlan.zhihu.com_p_28902584]: 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/20220518/4c3ed986eb504cbca204fb181a720712.png