如何做出漂亮、干净、优雅的移动端统计图表？看这一篇文章就够啦！

这是 Tiny 图表库第一版常见的四种图表类型，先一睹为快吧。

在开发移动产品的过程中，我们总会遇到一些业务场景，需要用合适的方式来呈现数据。比如健身类app 用户想要知道自己每天的健身时长来调整健身方式，理财类app 的用户想要了解目前主要基金的走势进行决策分析等等，在这些场景中，跟一团乱糟糟看的人直犯晕的数据相比，统计图会更直观、更友好，聪明的开发者会选择那种方式呢？

想必英雄所见略同，大家都会选择使用统计图来可视化数据，为了让事情更加简单，我们可爱的Tiny 团队挖掘了很多深层次需求之后，在Tiny 平台封装了你需要的最好的统计图表库。所以，让我们赶紧开始使用起来吧。

Tiny 统计图表库第一版的四种图表类型

1. 柱状图 和 条形图（TEBarChartEmbed）

2. 折线图（曲线图）和面积图（TELineChartEmbed）

3. 环形图（TECircleChartEmbed）

4. 饼图（TEPieChartEmbed）

5. Tiny 图表库的图表类型都具有绘制动画。

统计图博览会

柱状图与条形图

让我们来用Tiny 图表功能做一个简单的Bar chart吧 ^ ^

tml 页面

<div>
    <embed classid="TEBarChart" class="mapview" id="TEBarChartEmbed">
    </embed>        
</div>
/**
 *
 *  @param id 指定图表类型，TEBarChartEmbed 表示的就是柱状图
 *
 *  @param class 图表呈现的大小、位置、布局等
 */

结果华丽华丽的~

我们改变其中一个参数 direction 的值为 y 的时候，会发现我们的图表加了一个特效，居然成了条形图。

善变的折线图（曲线图、面积图）

在给我两分钟，让我们来用Tiny 图表功能做一个简单的line chart吧 ^ ^

tml 页面

<div>
    <embed classid="TELineChart" class="mapview" id="TELineChartEmbed">
    </embed>        
</div>
/**
 *
 *  @param id 指定图表类型，TELineChartEmbed 表示的就是折线图
 *
 *  @param class 图表呈现的大小、位置、布局等
 */

结果华丽华丽的~

我们改变参数 isColorFill 的值为 true 的时候，会发现我们的图表加了一个特效，居然成了面积图。

我觉得还可以改变，比如让参数 cubicIntensity 取值为1，会怎样呢？且看下图，跟棱角分明的折线图相比，虽然趋势依旧，但多了几分圆润。

环形图

我们举个栗子

tml 页面

<div>
    <embed classid="TECircle" class="circle" id="TECircleChartEmbed">
    </embed>        
</div>
/**
 *
 *  @param id 指定图表类型，TECircleChartEmbed 表示的就是环形图
 *
 *  @param class 图表呈现的大小、位置、布局等
 */

结果依旧是华丽丽的~

饼图

我们举复杂一点的栗子

tml 页面

<div>
    <embed classid="TEPieChart" class="circle" id="TEPieChartEmbed">
    </embed>        
</div>
/**
 *
 *  @param id 指定图表类型，TEPieChartEmbed 表示的就是饼图
 *
 *  @param class 图表呈现的大小、位置、布局等
 */

当然，还是华丽丽的~

额 这个饼图有点不一样，我们来改造改造，让参数 centerTitle 和 centerSummary 的值为空，且删除参数 centerColor，这下看起来是不是熟悉很多了呢！

如你在文章中所见，Tiny 平台的图表漂亮，干净，优雅，具有快速响应的动画效果，包括四个核心图表类型（柱状图，折线图，环形图和饼图）每个图表都是独立的模块，每种模块都有丰富的自定义选项和棒棒的动画效果哦~，所以你甚至可以只加载项目需要的模块以最大化缩小代码占用空间，同时能更容易提取和传达关键的观点和见解，还不赶紧来用用看。

更多资源信息，请关注微信公众号：TinyBuilder，或请移步官网

www.mtiny.cn

开发者，请使用PC端下载资源