了解Echarts
什么是Echarts?Echarts是百度的一个开源的数据可视化工具,可以帮助我们在前端展示各式各样的图,它是一个纯js图表库。
Echarts在ionic中的使用
1. 首先安装typings库,以及 ECharts:
npm install typings echarts --global
2. 其次需要安装 ECharts 的 TypeScript 定义文件
npm install @types/echarts --save
3. 然后要在 ts 文件中引入 echarts,这样才能在 ts 文件中使用echarts
import * as echarts from 'echarts';
4. 如果我们要在页面上展现图表,就必须要有div元素作为图表的容器。在HTML页中定义一个模板本地变量
当然,除此之外还要规定div的css样式,指定div的宽和高。
5. 接下来最重要的一步就是根据自己的需求写图表的配置了,如果是刚开始接触这个插件,我们可以借助官网的例子。Echarts官方实例
比如我们打开了一个实例,我们只需要将左边的代码复制到我们的 ts 文件中,然后根据我们想要的效果修改修改就可以了。
刚开始接触我们肯定也不知道图表的属性有什么,以及怎么修改,不用担心,还有配置手册,我们需要改成什么样,去配置手册中查就可以了。
6. 最后一步 ,界面初始化完成后,加载图表就可以了。
图表渲染有两种方式:Canvas 和 SVG ,具体用哪种方式,可以参见官网的介绍,this.lineChart
就是图表的配置。