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

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

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

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

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

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

3. 環形圖（TECircleChartEmbed）

4. 餅圖（TEPieChartEmbed）

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

統計圖博覽會

柱狀圖與條形圖的小事

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

我們改變其中一個參數 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 或者i_chaixiaomu。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部