支持圖表類型

• 餅圖 pie
• 圓環(huán)圖 ring
• 線圖 line（直線、曲線）
• 柱狀圖 column（分組、堆疊、溫度計(jì)）
• 區(qū)域圖 area（直線、曲線）
• 雷達(dá)圖 radar
• 圓弧進(jìn)度圖 arcbar
• 儀表盤 gauge
• K線圖 candle
• 混合圖 mix（支持 Point、Line 直線曲線、Column、Area 直線曲線）
• 玫瑰圖 rose（面積模式、半徑模式）
• 詞云圖 word（橫向、橫縱混排）
• 漏斗圖 funnel
• 地圖 map

插件特點(diǎn)

• 改造后的插件可以跨端使用，支持 H5、小程序（微信/支付寶/百度/頭條/QQ/360）、APP，調(diào)用簡(jiǎn)單方便、性能及體驗(yàn)極佳。
• 雖然沒有 Echarts 及 F2 圖表功能強(qiáng)大，但可以實(shí)現(xiàn)一套業(yè)務(wù)邏輯各端通用，并解決了支付寶小程序圖表顯示模糊等問題。
• 支持單頁(yè)面多圖表，demo 中單頁(yè) 10 個(gè)圖表，響應(yīng)速度超快。
• 支持入場(chǎng)動(dòng)畫及 ToolTip 動(dòng)畫效果。
• 獨(dú)特支持 橫屏模式。

為何不用 Echarts？

• 相比 Echarts 及 F2 的復(fù)雜的設(shè)置，本插件幾乎等于傻瓜式的配置。
• Echarts 在跨端使用更復(fù)雜，本插件只需要簡(jiǎn)單的兩個(gè) <canvas> 標(biāo)簽輕松區(qū)別搞定，代碼整潔易維護(hù)。
• Echarts 在 iOS 端圖表顯示錯(cuò)位，只能引用網(wǎng)頁(yè)解決。
• 本插件打包后的體積相比 Echarts 小很多很多，所以性能更好。
• 如果您是 uni-app 初學(xué)者，那么強(qiáng)烈建議您使用 uCharts，并且目前可以跨全端通用，減少工作量，增強(qiáng)一致性體驗(yàn)。
• 圖表樣式均可自定義，懂 JS 的都可以讀懂插件源碼，直接修改 u-charts.js 源碼即可。
• 本插件經(jīng)過大量測(cè)試，反復(fù)論證并加以改造而成，請(qǐng)各位放心使用。

uni-app 圖表選型參考流程

親手教您如何改造uCharts，打造您的專屬圖表

• 為何要改造 uCharts?
• 并不是所有圖表插件直接拿來就可以滿足客戶需求，如果您的 UI 設(shè)計(jì)師設(shè)計(jì)一個(gè)圖表，如下圖:

 

• 您會(huì)發(fā)現(xiàn)這個(gè)圖表即使在 echarts 里也不是很好實(shí)現(xiàn)，那么就需要我們自己動(dòng)手去實(shí)現(xiàn)。下面就讓我們一起來完成，本文旨在拋磚引玉，希望各位朋友能夠更好的應(yīng)用 uCharts 來完成您的項(xiàng)目，如果您有更好的設(shè)計(jì)，請(qǐng)?zhí)峤荒��?PR 到 Github uCharts跨端圖表，幫助更多朋友，感謝您的付出及貢獻(xiàn)！

【uCharts 跨端圖表改造教程】

圖表示例

               

快速體驗(yàn)

一套代碼編到 7 個(gè)平臺(tái)，依次掃描二維碼，親自體驗(yàn) uCharts 圖表跨平臺(tái)效果！iOS 因 demo 比較簡(jiǎn)單無法上架，請(qǐng)自行編譯。

標(biāo)簽： [db:TAGG]

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。