Ionic2系列——在Ionic2中使用ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表。当时答应说写个blog,简单写下步骤。
在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话TypeScript是认不出来的,无法编译通过。下面以百度的ECharts图表为例,演示一下使用第三方库的用法。
1、安装ECharts
首先需要使用npm安装ECharts,输入以下命令:
npm install echarts --save
安装完毕后可以看到node_modules目录下多了echarts目录。
因为TypeScript
使用了静态类型,所以我们需要描述将要使用并引入的功能。TypeScript
通过类型定义来描述这些功能。实际上TypeScript
团队已经包含了很多这样的类型定义,也可以通过NPM
进行安装。所以试试看:
npm install @types/echarts --save
还真有,安装完毕后,可以看到node_modules/@types目录下多了一个echarts目录,打开里面的index.d.ts看下,可以看到里面定义了ECharts的接口,有了这个定义文件,TypeScript就可以识别ECharts的方法和参数了。
2、使用ECharts
首先需要在ion-content内放一个div,作为图表的容器:
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 350px;height:300px;" ></div>
打开页面的ts文件,将ECharts引入进来,在头部添加:
import ECharts from 'echarts';
在页面上放一个按钮,把click事件绑定到以下方法:
createCharts() {
var myChart = ECharts.init(document.getElementById('main') as HTMLDivElement);
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
代码从ECharts官网抄的,只是示例。
这样点击按钮后就可以生成了。但是有个小问题,如果在不同分辨率的移动设备上图表宽度无法自适应。所以需要再做一点改动。
3、自适应宽度的Directive
在src目录下添加directives目录,添加一个auto-fit-layout.ts文件,输入以下代码:
import { Directive, ElementRef, Renderer } from '@angular/core'; @Directive({
selector: '[my-auto-fit-layout]'
})
export class AutoFitLayout {
constructor(public element: ElementRef, public renderer: Renderer) {
//因为ionic的默认padding宽度是16
renderer.setElementStyle(element.nativeElement, 'width', `${(document.body.clientWidth - 32).toString()}px`);
}
}
使用这个指令时,会获取当前窗口宽度,并设置指定div的宽度。将这个指令应用到图表的容器上:
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 350px;height:300px;" my-auto-fit-layout></div>
这样就可以在生成图表的时候自动适应当前容器的宽度了。
4、其他
如果找不到这个d.ts怎么办呢?也有办法,参考这个地址:
https://yanxiaodi.gitbooks.io/ionic2-guide/content/resources/third-party-libs.html
一种办法是自己写d.ts,也可以直接将第三方库声明出来,但是如果没有详细的d.ts的话就会失去TypeScript强类型的好处。所以一定不要忘了还有tsc --declaration my.ts这个命令,可以把js文件改后缀为ts,用这个命令生成一份d.ts。
Ionic2系列——在Ionic2中使用ECharts的更多相关文章
- Ionic2系列——在Ionic2中使用高德地图
之前讲过了如何在Ionic2中使用第三方库,因为第三方库必须针对TypeScript提供相应的声明文件——即d.ts文件,才能被TypeScript正确识别并编译.好在大多数的第三方库已经有了定义文件 ...
- Ionic2系列——Ionic 2 Guide 官方文档中文版
最近一直没更新博客,业余时间都在翻译Ionic2的文档.之前本来是想写一个入门,后来觉得干脆把官方文档翻译一下算了,因为官方文档就是最好的入门教程.后来越翻译越觉得这个事情确实比较费精力,不知道什么时 ...
- Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?
现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...
- Vue系列——在vue项目中使用echarts
该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像安装 npm install -g cnpm --registry= ...
- 接上一篇中记录Echarts进度环使用【不同状态不同进度环颜色及圈内文字】--采用单实例业务进行说明
接上一篇中记录Echarts进度环使用 此处处理不同状态下不同进度环颜色及圈内文字等的相关处理,采用实际案例源码说明 -----------------偶是华丽丽分割线---------------- ...
- 浏览器扩展系列————在WPF中定制WebBrowser快捷菜单
原文:浏览器扩展系列----在WPF中定制WebBrowser快捷菜单 关于如何定制菜单可以参考codeproject上的这篇文章:http://www.codeproject.com/KB/book ...
- 在vue-cli项目中使用echarts
这个示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --regist ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- 在vue中调用echarts中的地图散点图~
首先!当然是在vue中引入echarts! 命令行 npm install echarts --save 在main.js文件中里引入 import echarts from 'ech ...
随机推荐
- IOS FMDB 获取数据库表和表中的数据
ios开发中,经常会用到数据库sqlite的知识,除了增,删,改,查之外,我们说说如何获取数据库中有多少表和表相关的内容. 前言 跟数据库使用相关的一般的增删改查的语句,这里就不做解释了.在网上有很多 ...
- 开源免费且稳定实用的.NET PDF打印组件itextSharp(.NET组件介绍之八)
在这个.NET组件的介绍系列中,受到了很多园友的支持,一些园友(如:数据之巅. [秦时明月]等等这些大神 )也给我提出了对应的建议,我正在努力去改正,有不足之处还望大家多多包涵.在传播一些简单的知识的 ...
- Struts2实现ajax的两种方式
基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...
- PHP之Memcache缓存详解
Mem:memory缩写(内存):内存缓存 1. 断电或者重启服务器内存数据即消失,即临时数据: Memcache默认端口:11211 存入方式:key=>>value ...
- maven打包插件:appassembler
1.打包成bat 打包命令:mvn clean package appassembler:assemble <plugin> <groupId>org.codehaus.moj ...
- nexus 社区版3.0.2部署、访问
下载nexus社区办(oss): https://www.sonatype.com/download-oss-sonatype 目前最新版本 nexus-3.0.2-02-win64.zip nex ...
- 解决Ubuntu Kylin 1610安装ANSYS17.2的NVIDIA显卡驱动问题
Ubuntu Kylin 1610在安装完毕后,会自动安装显卡驱动,对于一般的图形图像使用来说自然不会有太大的问题,但是对于ANSYS17.2的一些模块,还是会出现问题.一个比较常见的问题就是Open ...
- Aop动态生成代理类时支持带参数构造函数
一.背景 在某些情况下,我们需要植入AOP代码的类并没有默认构造函数.那么此时动态生成的代理类也需要相同签名的构造函数,并且内部调用原始类的构造函数.自己折腾了1晚上没搞定,现在搞定了发出来供大家一起 ...
- Git入门资料汇总
Git是一个非常好用的版本控制工具,同时,它也是一个相对比较复杂的工具,想要掌握它还是需要花一番功夫的.网络上关于Git的入门资料已经很多了,我就不再重复了,直接把我学习的文章放在这里. Git详解 ...
- ASP.NET MVC Model验证(二)
ASP.NET MVC Model验证(二) 前言 上篇内容演示了一个简单的Model验证示例,然后在文中提及到Model验证在MVC框架中默认所处的位置在哪?本篇就是来解决这个问题的,并且会描述一下 ...