導讀這是Tiny圖表庫四種核心圖表類型的展示，在文章開始之前讓我們先來一睹為快吧。在開發(fā)移動產(chǎn)品的過程中，我們總會遇到一些業(yè)務場景，需要用合適的方式來呈現(xiàn)數(shù)據(jù)。....

這是Tiny 圖表庫四種核心圖表類型的展示，在文章開始之前讓我們先來一睹為快吧。

在開發(fā)移動產(chǎn)品的過程中，我們總會遇到一些業(yè)務場景，需要用合適的方式來呈現(xiàn)數(shù)據(jù)。比如健身類app 用戶想要知道自己每天的健身時長來調整健身方式，理財類app 的用戶想要了解目前主要基金的走勢進行決策分析等等，在這些場景中，跟一團亂糟糟看得人之凡云的數(shù)據(jù)相比，統(tǒng)計圖會更直觀、更友好，相比之下，做出聰明開發(fā)者的你會選擇那種方式呢？

想必英雄所見略同，大家都會選擇統(tǒng)計圖來可視化數(shù)據(jù)，為了讓事情更加簡單，我們可愛的Tiny 團隊挖掘了很多深層次需求之后，在Tiny 平臺封裝了你需要的最好的圖表庫。所以，讓我們趕緊開始使用起來吧。

Tiny圖表庫四個核心圖表類型

1. 柱狀圖 和 條形圖（TEBarChartEmbed）

2. 折線圖（曲線圖）和面積圖（TELineChartEmbed）

3. 環(huán)形圖（TECircleChartEmbed）

4. 餅圖（TEPieChartEmbed）

5. Tiny 圖表庫的圖表類型都具有繪制動畫。

統(tǒng)計圖博覽會

柱狀圖與條形圖的小事

讓我們來用Tiny 圖表功能做一個簡單的Bar chart吧 ^ ^

我們改變其中一個參數(shù) direction 的值為 y 的時候，會發(fā)現(xiàn)我們的圖表加了一個特效，居然成了條形圖。

善變的折線圖（曲線圖、面積圖）

讓我們來用Tiny 圖表功能做一個簡單的line chart吧 ^ ^

tml 頁面

<div>

<embed classid="TELineChart" id="TELineChartEmbed">

</embed>

</div>

/**

*

* @param id 指定圖表類型，TELineChartEmbed 表示的就是折線圖

*

* @param class 圖表呈現(xiàn)的大小、位置、布局等

*/

結果華麗華麗的~

我們改變參數(shù) isColorFill 的值為 true 的時候，會發(fā)現(xiàn)我們的圖表加了一個特效，居然成了面積圖。

我覺得還可以改變，比如讓參數(shù) cubicIntensity 取值為1，會怎樣呢？且看下圖，跟棱角分明的折線圖相比，雖然趨勢依舊，但多了幾分圓潤。

環(huán)形圖

我們舉個栗子

tml 頁面

<div>

<embed classid="TECircle" id="TECircleChartEmbed">

</embed>

</div>

/**

*

* @param id 指定圖表類型，TECircleChartEmbed 表示的就是環(huán)形圖

*

* @param class 圖表呈現(xiàn)的大小、位置、布局等

*/

結果依舊是華麗麗的~

餅圖

我們舉復雜一點的栗子

tml 頁面

<div>

<embed classid="TEPieChart" id="TEPieChartEmbed">

</embed>

</div>

/**

*

* @param id 指定圖表類型，TEPieChartEmbed 表示的就是餅圖

*

* @param class 圖表呈現(xiàn)的大小、位置、布局等

*/

當然，還是華麗麗的~

額 這個餅圖有點不一樣，我們來改造改造，讓參數(shù) centerTitle 和 centerSummary 的值為空，且刪除參數(shù) centerColor，這下看起來是不是熟悉很多了呢！

如你在文章中所見，Tiny 平臺的圖表漂亮，干凈，優(yōu)雅，具有快速響應的動畫效果，包括四個常見圖表類型（柱狀圖，折線圖，環(huán)形圖和餅圖）每個圖表都是獨立的模塊，每種模塊都有豐富的自定義選項和棒棒的動畫效果哦~，所以你甚至可以只加載項目需要的模塊以最大化縮小代碼占用空間，同時能更容易提取和傳達關鍵的觀點和見解，還不趕緊來用用看。

更多詳細，請關注微信公眾號TinyBuilder 或者i_chaixiaomu。