原文链接:https://efe.baidu.com/blog/echarts-with-ionic/
在这个教程中,我们将使用 Ionic 创建原生应用,并用 ECharts 创建饼图和水球图。Ionic 项目开发语言是 TypeScript,而 ECharts 的官方版本是基于 JavaScript 的,本教程将带你轻松实现在 TypeScript 中创建 ECharts 图表。
最终,我们将实现这样的效果:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISWXFmb1MlWzJFSkZnSXxkas1mY2x2VM9mUYF2Mxk3YwoEWZ9mTXpFdrpWT0dGRNR3YU10dJpHTqxWbiZHbXx0bShVYzETejBjSYl1bOdlW2NmMiNnSywEd5ITW1VFSaBnRtlVdV1mWslTeMZTTINGMShUYvwlbj5yZtlmbkN3YuQnclZnbvN2Ztl2Lc9CX6MHc0RHaiojIsJye.jpg)
这篇教程将会教你:
- 安装 Ionic
- 在 TypeScript 中使用 ECharts
- 在 Ionic 项目中创建 ECharts 图表
- 在 Ionic 项目中创建 ECharts 水球图
它不会教你:
- ECharts 是什么
- Ionic 是什么
- Angular 是什么
- TypeScript 是什么
新建 Ionic 项目
Ionic 官网有详细的安装教程,这里我们简单介绍一下我们的操作步骤。
首先,安装全局的 Ionic 和 Cordova npm 包,前者是用来在命令行操作 Ionic 的,后者是提供从网页到原生应用的底层支持的库。
|
然后就可以创建项目了,我们的当前操作目录在
~/Workspace
,想创建一个名为
pretty-charts
的项目,执行:
|
这样就会自动下载项目的模板,并且一键安装各种 npm 包之类的。是不是超简单的!
现在,我们可以
cd
到
pretty-charts
目录下运行项目。
|
ionic serve
会编译你的代码(什么?你还没写?没关系,模板都帮你写好了),并且起一个本地的服务器,自动打开一个浏览器运行代码。看到的效果类似这样:
目前 Ionic 3 的运行需要 Node 6.0+,可以通过 nvm 安装并切换 Node 版本。
首先运行
查看 Node 版本,如果不是 6.0+,可以运行
node -v
。
npm i -g nvm; nvm install 6; nvm use 6
在 TypeScript 中引入 ECharts
之前我有写过一篇教程介绍如何用 typings 1.x 在 TypeScript 中引入 ECharts,想了解原理的可以参考这篇教程。下面我们使用的方法是基于 typings 2.x 的。
首先我们安装 typings 库,以及 ECharts:
|
然后,安装 ECharts 的 TypeScript 定义文件,这个文件来自社区贡献。
|
现在,我们可以在 TypeScript 文件中访问 ECharts 库了:
|
typings 实际上是为 JavaScript 的库提供了一个接口声明的作用,有点类似 C++ 的头文件的意思,但不对其作检查。具体来说,我们刚才下载的文件来自 DefinitelyTyped/types/echarts/index.d.ts,但是这个接口是否和 ECharts 吻合是不会有东西去检查的。
比如我们在项目的
src/pages/home.ts
中,引入并使用 ECharts,可以发现
echarts
这个变量是正确能访问的,但是如果我们访问
echarts.version
的话,就会编译报错。
|
这是因为在 typings 定义的文件中,不存在 version 这个变量。而我们安装的当前版本的 ECharts 3.7.0 其实是有这个变量的,因此这是 TypeScript 编译器的误报。
对于这种情况,我们可以提 Pull Request,或者用这样的方式让 TypeScript 不对 ECharts 做类型检查:
|
现在,你就可以按一般使用 ECharts 的方法使用它了。
初始化图表
我们在
home.html
中创建一个 DIV 元素作为图表的容器:
|
在
home.scss
中将其 CSS 设为:
|
但是,我们不能在
HomePage
的构造函数中初始化图表,因为这时候页面还没有构建,
document.getElementById('chart')
返回的是
null
。
正确的做法是,在
ionViewDidEnter
这个 Ionic 特定的函数中初始化图表,它将在进入这个页面后调用。这时候页面中已经有这个 DIV 并且正确的宽高了。整个
home.ts
文件是这样的:
|
现在,我们可以创建一个饼图了:
|
运行结果:
使用水球图
ECharts 水球图是作为扩展存在的,因此不在 ECharts 项目中,但是使用起来也是意外地简单呢!
首先,我们使用 npm 安装:
|
代码如下:
|
这样就能得到水球图啦!
是不是超简单的?
如果我们再配置一下水球图,就能得到更好玩的结果啦:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISWXFmb1MlWzJFSkZnSXxkas1mY2x2VM9mUYF2Mxk3YwoEWZ9mTXpFdrpWT0dGRNR3YU10dJpHTqxWbiZHbXx0bShVYzETejBjSYl1bOdlW2NmMiNnSywEd5ITW1VFSaBnRtlVdV1mWslTeMZTTINGMShUYvwlbj5yZtlmbkN3YuQnclZnbvN2Ztl2Lc9CX6MHc0RHaiojIsJye.jpg)
图标来自 www.flaticon.com 的 Freepik,基于 CC 3.0 BY 发布。
这里,我们使用 SVG Path 定义了水球图的形状,并且在 HTML 中加入瓶子的图片,就能得到一个奶瓶啦!完整代码请参见 GitHub 项目。
是不是很酷呢?